프론트엔드/CSS (12) 썸네일형 리스트형 Viewport 뷰포트는 화면의 크기를 말합니다. 과거에는 컴퓨터가 웹사이트에 접근하기 위한 거의 유일한 수단이었기 때문에 뷰포트도 컴퓨터 화면에 최적화되었습니다. 문제는 상대적으로 큰 크기의 컴퓨터 화면에 최적화된 뷰포트는 작은 화면에서 표시되는 콘텐츠와 비율이 맞지 않아 미적기능이 저하되었습니다. 문제는 지정된 뷰포트의 크기보다 기기 화면이 작을 때 발생하는데요. 아래처럼 뷰포트의 크기가 기기 크기보다 클 때 콘텐츠가 화면에 다 표시되지 않습니다. 뷰포트의 설정된 크기보다 기기의 크기가 큰 경우는 무리 없이 화면에 표시됩니다. 디바이스의 종류와 관계없이 뷰포트의 비율을 조정하기 위해 아래와 같이 메타태그를 추가되었고 현재 널리 사용되고 있습니다. 뷰포트 메타태그는 아래와 같은 속성을 가집니다. 1. width 보기처.. Media queries 미디어쿼리는 조건에 따라 스타일을 적용하게 해 주는 CSS의 고급기능입니다. 주로 화면의 크기와 함께 사용되어 반응형 애플리케이션을 구현하는 데 사용되는데요. 사용하는 방법은 미디어 메타태그와 함께 옵션을 지정하여 사용합니다. 기본문법 @media 'mediaTypes' ('mediaFeatures') { targetElement: style } 'mediaTypes'은 기기를 특정하는 값으로 'all', 'print', 'screen' 등의 값을 가집니다. 생략할 경우 'all'이 적용됩니다. 'mediaFeatures'은 조건을 특정하는 값으로 종류와 조건이 다양합니다 (예를 들면 특정입력도구가 hovering이 가능한 경우 발동) 중괄호에는 위 조건이 모두 참일 때 스타일이 적용될 대상과 발동될 스.. CSS 컴포넌트 - 토글버튼 HTML과 CSS로 토글 버튼을 만들어보겠습니다. 구현 코드 방법 1 HTML CSS /* toggle */ label { height: 30px; width: 60px; border-radius: 30px; } input { display: none; } input:checked + span { background-color: gray; } input:checked + span::before { left: 30px; } .toggle-circle { height: 100%; width: 100%; display: block; border-radius: 30px; transition: 0.4s ease; border: 1px solid black; position: relative; } .toggle-c.. CSS 컴포넌트 - 카운트다운 CSS animation을 활용해서 카운트다운을 구현해 보겠습니다. 구현 코드 HTML 카운터로 표시될 만큼의 숫자를 추가합니다. 1 2 3 Go CSS 애니메이션에서 delay를 통해 순차적으로 작동하도록 구현합니다. /* count */ .count { height: 50px; width: 50px; position: relative; margin: auto; overflow: hidden; } .count .num { height: 40px; position: absolute; bottom: -5px; left: 50%; transform-origin: bottom; transform: translateX(-50%) rotate(180deg); font-size: 1.5rem; } .count .n.. 이전 1 2 다음
