본문 바로가기

WEB Basic28

[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.
[JavaScript] 스크롤 위치에 따라 상단 프로그래스 바 구현하기 1. 구현 결과 미리보기 HTML 삽입 미리보기할 수 없는 소스 2. 분석 웹 페이지에서 스크롤 위치에 따라 상단에 나타나는 프로그래스 바를 구현하는 방법을 알아보겠습니다. 이 기능은 사용자에게 페이지 스크롤의 진행 상태를 시각적으로 표시하여 사용성을 향상시킬 수 있습니다. 스크롤 프로그래스바를 적용하면 얻을 수 있는 이점 시각적 피드백: 로딩 및 스크롤 중에 프로그래스 바를 통해 현재 진행 중인 작업을 시각적으로 알 수 있습니다. 진행 상태 시각화: 페이지 스크롤 위치를 표현하여 사용자에게 현재 위치 및 전체 콘텐츠 양을 시각적으로 제시합니다. 사용자 참여 유도: 스크롤 시 프로그래스 바의 업데이트로 사용자를 더 많은 스크롤로 유도하며, 새로운 콘텐츠에 호기심을 유발합니다. 페이지 떠나지 않도록 유도:.. 2024. 1. 19.
HTML, CSS, JavaScript로 아래에서 위로 나타나는 액션시트(Action Sheet) 구현하기 1. 구현 결과 미리보기 2024. 1. 18.
HTML, CSS, JavaScript로 애니메이션 효과를 더한 햄버거 메뉴 만들기 1. 구현 결과 미리보기 HTML 삽입 미리보기할 수 없는 소스 2. 분석 웹 디자인 분야에서 햄버거 메뉴는 사용자 경험을 향상시키고 화면 공간을 효율적으로 활용하는 핵심 요소입니다. 이번 글에서는 HTML, CSS, JavaScript를 활용하여 효과적인 애니메이션 효과를 적용한 햄버거 메뉴를 소개하겠습니다. 애니메이션 효과의 중요성 햄버거 메뉴에 적절한 애니메이션을 추가함으로써 사용자에게 시각적인 흥미를 제공하고, 메뉴의 활성화 상태를 명확하게 전달할 수 있습니다. 이는 사용자와의 상호작용을 부드럽고 자연스럽게 만들어주어 전반적인 웹 경험을 향상시킵니다. 애니메이션 효과의 적용 코드에서 .menu.active 클래스가 활성화되면 각 바에 특별한 애니메이션 효과가 적용됩니다. 첫 번째 바는 시계방향으로.. 2024. 1. 17.
[JavaScript] 스크롤 시 나타나는 효과 구현하기: Intersection Observer API 1. 구현 결과 미리보기 HTML 삽입 미리보기할 수 없는 소스 2. 분석 1. 동작 원리: 화면 스크롤 시 요소의 교차 영역을 감지하고, 이벤트를 통해 페이드 인 효과를 부여합니다. 2. 주요 기능: 비동기적 감지: 브라우저 성능에 부담을 주지 않으면서 화면에 보이는 요소의 상태를 확인합니다. 이벤트 기반 실행: 스크롤 시 교차 영역의 변화를 감지하여 콜백 함수를 실행하여 페이드 인 효과를 적용합니다. 이벤트 리스너를 사용자가 `addEventListener`함수로 직접 추가하는 개념이 아니라, `IntersectionObserver API`에 관찰 대상으로 등록된 요소들에 스크롤 이벤트가 추가 됩니다. 활용 예시로 화면에 표시되는 각 섹션에 Fade In 효과를 부여하기 위해 Intersection .. 2024. 1. 16.
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.

티스토리툴바