본문 바로가기

WEB Basic/HTML & CSS12

[CSS] Pure CSS Loader 사이트 모음 (무료, 커스터마이징) 1. 서론 CSS Loader는 웹 페이지에서 데이터를 불러오거나 처리하는 동안 사용자에게 로딩 상태를 시각적으로 알려주는 중요한 요소입니다. 웹 페이지의 사용자 경험을 향상시키는 데 도움이 되며, 특히 사용자가 대기해야 하는 경우에는 필수적입니다. 이 글에서는 CSS Loader의 필요성과 그것을 구현하는 데 사용되는 Pure CSS의 장점에 대해 알아보겠습니다. CSS Loader의 필요성 CSS Loader는 웹 페이지에서 사용자에게 로딩 상태를 시각적으로 전달하는 중요한 요소입니다. 사용자가 웹 페이지를 이용하는 동안 데이터를 불러오거나 처리하는 시간이 걸릴 수 있으며, 이때 로딩 상태를 제공함으로써 사용자는 대기하는 동안 어떤 작업이 진행 중인지 인지할 수 있습니다. 로딩 상태를 시각적으로 표현.. 2024. 2. 4.
PicoCSS: HTML 기반 경량 CSS 프레임워크 (with Semantic Tag) 소개 PicoCSS는 경량이고 미니멀한 CSS 프레임워크입니다. PicoCSS는 작고 빠르며, 웹 사이트나 애플리케이션에 필요한 기본적인 스타일링을 제공합니다. 이 프레임워크는 간결한 디자인과 사용자 정의가 용이하다는 특징을 갖고 있습니다. 따로 커스텀 스타일을 많이 하지 않고 빠르고 깔끔하게 프로토타입을 만들고 싶을때 사용하면 굉장히 유용한 프레임워크입니다. 그렇다고 아예 커스텀이 불가능 한 것도 아니라, class를 사용해서 스타일 커스텀이 얼마든지 가능합니다. 공식 홈페이지에서 소개하는 PicoCSS는 다음과 같은 4가지 특징이 있습니다. 적은 클래스와 시멘틱 태그 가능한 한 시멘틱 HTML 태그를 사용합니다. Pico에서는 10개 미만의 클래스만 사용됩니다. CSS로만 훌륭한 스타일 제공 의존성,.. 2024. 1. 29.
임시 샘플 이미지, 대체 이미지(Placeholder Image) URL 모음 임시 샘플 이미지란? 임시 샘플 이미지는 웹 개발이나 디자인 작업 중에 사용되는 가상 이미지로, 실제 이미지 대신 사용되어 디자인을 완성하거나 레이아웃을 확인하는 데 도움을 줍니다. 이러한 이미지는 주로 디자인 작업 중에 빈 공간을 채우거나 이미지가 로드되지 않았을 때 사용자에게 이미지의 위치를 알려주는 데 활용됩니다. 다양한 임시 샘플 이미지를 제공하는 웹 사이트들이 있으며, 이를 통해 원하는 이미지를 쉽게 얻을 수 있습니다. 다음으로 몇 가지 임시 샘플 이미지를 제공하는 웹 사이트들을 소개하고 사용 예시를 안내해드립니다. placeholder URL 리스트 1. placehold.co - 소개 가장 기본이 되는 임시 샘플 이미지 URL입니다. 사이트로 이동해보면, Documentation을 확인하여 .. 2024. 1. 28.
HTML, CSS, JavaScript로 인터렉티브한 모달 구현하기 (with transition) 1. 구현 결과 미리보기 2024. 1. 20.
HTML, CSS, JavaScript로 애니메이션 효과를 더한 햄버거 메뉴 만들기 1. 구현 결과 미리보기 HTML 삽입 미리보기할 수 없는 소스 2. 분석 웹 디자인 분야에서 햄버거 메뉴는 사용자 경험을 향상시키고 화면 공간을 효율적으로 활용하는 핵심 요소입니다. 이번 글에서는 HTML, CSS, JavaScript를 활용하여 효과적인 애니메이션 효과를 적용한 햄버거 메뉴를 소개하겠습니다. 애니메이션 효과의 중요성 햄버거 메뉴에 적절한 애니메이션을 추가함으로써 사용자에게 시각적인 흥미를 제공하고, 메뉴의 활성화 상태를 명확하게 전달할 수 있습니다. 이는 사용자와의 상호작용을 부드럽고 자연스럽게 만들어주어 전반적인 웹 경험을 향상시킵니다. 애니메이션 효과의 적용 코드에서 .menu.active 클래스가 활성화되면 각 바에 특별한 애니메이션 효과가 적용됩니다. 첫 번째 바는 시계방향으로.. 2024. 1. 17.
HTML과 CSS로 로딩 스피너 만들기: 부드러운 로딩 애니메이션 구현 1. 구현 결과 미리보기 HTML 삽입 미리보기할 수 없는 소스 2. 분석 로딩 스피너의 중요성 웹 페이지나 웹 애플리케이션에서 사용자에게 컨텐츠가 로딩 중임을 시각적으로 알려주는 로딩 스피너는 사용자 경험을 향상시키는 데 중요한 역할을 합니다. 특히, 네트워크 속도가 느릴 때 사용자는 페이지 로딩이 진행 중인지를 인지하고 있어야 합니다. 로딩 스피너의 역할과 사용 기술 소개 로딩 스피너는 주로 네트워크 요청, 데이터 로딩, 페이지 전환 등의 작업이 이뤄지는 동안 화면에 표시됩니다. 주로 사용되는 기술로는 CSS 애니메이션과 트랜지션입니다. 이러한 기술을 통해 로딩 스피너는 부드럽게 회전하면서 사용자에게 로딩 중임을 시각적으로 알려줍니다. 전체 화면 덮는 역할 /* style.css */ .loading.. 2024. 1. 15.
Bootstrap Grid System 그리드 시스템 이해하기 부트스트랩의 그리드 시스템은 레이아웃을 행과 열로 관리하며, 열은 최대 12개의 열을 기준으로 한다. 또한 그리드를 관리할 때 6개의 반응형 중단점을 이용한다. 중단점은 min-width 미디어 쿼리를 기반으로 한다. 즉, 중단점과 그 위에 있는 모든 중단점에 영향을 미친다.(md는 992px이상의 크기에서 모두 적용된다.) Table of Contents Bootstrap Grid System Table of Contents 그리드 옵션 (반응형 중단점) 열 레이아웃 열 자동 레이아웃 Equal-width col 한 열의 너비 설정 col-${number} 가변 너비 열 (fit-content) col-auto 행열 row-cols-${number} 반응형 클래스 (중단점 지정) 중단점 한 열의 너비 .. 2023. 2. 12.
CSS 방법론 BEM (Block, Element, Modifier) BEM은 CSS 설계 방법론 중 하나이다. 공식 문서에서는 BEM을 프론트엔드 개발 시 코드 공유할 수 있는 재사용가능한 컴포넌트 생성에 도움을 주는 방법론이라고 설명한다. 일반적인 CSS를 아래와 같이 작성한다면 #opinions_box h1 { margin: 0 0 8px 0; text-align: center; } #opinions_box { p.more_pp { a { text-decoration: underline; } } input[type="text"] { border: 1px solid #ccc !important; } } BEM 방법론을 적용한 CSS는 아래와 같다. .opinions_box { margin: 0 0 8px 0; text-align: center; &__view-more .. 2023. 2. 11.
CSS로 checkbox, radio 이미지 변경(커스텀) 하기 (with google fonts icon) 1. 분석 HTML input tag의 type중 `checkbox`와 `radio`를 커스텀 이미지로 변경해야 하는 경우가 자주 있다. `checkbox`, `radio`의 보여지는 체크 이미지를 커스텀할때 방법이 CSS, JS등 여러가지 존재하지만 이중 한 번 스타일을 작성해놓으면 HTML tag만 복사해서 재사용 할 수 있는 CSS로 체크박스와 라디오버튼의 이미지 변경하는 방법에 대해 알아본다. `checkbox`와 `radio`의 커스텀을 위해 CSS와 HTML tag의 속성을 같이 사용해야 하는데, HTML tag중 `label`이라는 tag의 `for` 속성과 `input` tag의 `id` 속성의 관계를 이해하는 것이 중요하다. 1.1. input과 label의 id, for 속성 `inpu.. 2023. 2. 8.
checkbox, range, range, progress 색상 변경 (css accent-color) accent-color CSS accnet-color 속성은 UI 컨트롤 요소의 accent(악센트) 색상을 변경할 수 있다. 변경되는 accent 색상에 따라 체크요소나 배경색은 시각적으로 확인하기 적절한 색상으로 변경된다. 브라우저는 accent-color속성은 아래와 같은 HTML element에 적용된다. 이 중 체크박스는 accent-color의 색상에 따라 체크 색상이 #3B3B3B 혹은 #FFFFFF으로 변경되는데, 둘 중 시각적으로 확인 하기 좋은 색으로 변경된다. 문법 /* Keyword values */ accent-color: auto; /* values */ accent-color: red; accent-color: #5729e9; accent-color: rgb(0, 200, 0).. 2023. 2. 6.
CSS fade in, fade out 효과 구현하기 1. 분석 fade in, fade out 효과를 구현할 때 CSS 속성인 `opacity`와 `transition`을 활용해서 쉽게 구현할 수 있다. 이번 포스팅에선 CSS만 활용해서 효과를 구현할 것이기 때문에 마우스를 오버했을 때 효과가 나타나는 것을 구현한다. .fade-in { width: 100px; height: 100px; background-color: brown; opacity: 0; transition: 0.3s; } .tip1:hover + .fade-in { opacity: 1; } .fade-out { width: 100px; height: 100px; background-color: darkcyan; opacity: 1; transition: 0.3s; } .tip2:hover.. 2022. 5. 25.
CSS 선택자(Selector) 종류와 적용 우선순위 CSS 선택자(Selector)란 CSS 규칙을 적용할 요소를 정의합니다. 프론트엔드 개발을 하다보면 공통된 스타일 요소를 적용하고 싶을 때 어떤 CSS 선택자를 사용할 수 있는지, 다른 개발자가 구현한 화면을 보고 어떻게 스타일을 적용해서 구현했는지 검사도구로 확인 해 볼 때 :before, :after등 들어보지 못한 CSS 선택자 종류를 접하게 됩니다. 또한 한 프로젝트를 협업하다보면 A와 B가 서로 다른 세부 페이지 화면을 개발하고 통합하려는데 CSS 선택자값이 겹쳐서 적용 우선순위에 따라 CSS가 충돌이 일어나는 경우도 있을겁니다. 이런 경우 CSS 선택자 종류와 적용 우선순위에 대한 이해도가 있다면 충돌 문제를 쉽게 해결할 수 있을 것입니다. 따라서 해당 글에서는 CSS를 적용하는 CSS 선택.. 2021. 3. 29.

티스토리툴바