웹 페이지에 이미지나 비디오를 넣을 때 가로세로 비율 때문에 고생해본 적 있으신가요? 너비를 100%로 맞추면 높이가 찌그러지고, 높이를 고정하면 이미지가 잘리고 😅 특히 반응형 웹에서는 화면 크기에 따라 요소의 너비가 계속 바뀌기 때문에 비율을 유지하는 게 쉽지 않습니다. 예전에는 padding-top 트릭 같은 우회 방법을 썼는데요. 이제는 CSS의 aspect-ratio 속성 하나로 깔끔하게 해결할 수 있습니다. aspect-ratio 속성 aspect-ratio는 요소의 가로세로 비율을 지정하는 CSS 속성입니다. 너비 /
이번 포스팅에서는 화면(viewport) 너비에 따라서 적절히 반응하는 글꼴을 CSS로 어떻게 스타일하는지 알아보겠습니다. Media Queries 반응형 글꼴하면 가장 쉽게 떠올리리 수 있는 방법이 바로 미디어 쿼리(media query)를 사용하는 것입니다. 예를 들어, 화면 너비가 480px 이상과 1024px 이상이 되었을 때 HTML의 여러 요소(element)와 클래스(class)에 적용된 글자 크기가 자동으로 늘어나게 스타일해볼까요? 오래전 부터 쓰이던 이 방법은 보시다시피 동일한 CSS 선택자에 대해서 여러 번 스타일
웹사이트 레이아웃에서 사이드바(sidebar)는 목차, 광고 배너, 인기/신규 게시물 목록, 연관/추천 상품 목록과 같이 보조적인 컨텐츠를 배치하기 위해서 사용합니다. 이번 포스팅에서는 플렉스 박스(Flexbox)와 미디어 쿼리(Media Query)를 이용해서 화면의 너비에 알아서 반응하는 사이드바를 만들어보겠습니다. 웹페이지 마크업 예제로 목차 영역과 기사 영역으로 이루어진 간단한 웹페이지의 구조를 HTML로 작성해보겠습니다. <main> 엘리먼트 아래에 목차 영역을 <aside> 엘리먼트로 기사 영역을 <article> 엘리먼
다양한 디바이스들이 웹브라우징을 지원하면서 뷰포트(viewport) 너비에 따라 유연하게 컨텐츠를 배치하는 기술이 점점 중요해지고 있습니다. 이번 포스팅에서는 이러한 반응형 웹디자인의 기본이되는 CSS의 미디어 쿼리(Media Query)에 대해서 살펴보겠습니다. 기본 문법 미디어 쿼리는 CSS에서 어떤 스타일을 선택적으로 적용하고 싶을 때 사용합니다. 다른 프로그래밍 언어의 if 조건문과 비슷한 개념이라고 생각하시면 이해가 쉬우실 겁니다. @media 키워드로 시작하는 미디어 쿼리의 문법 구조는 아래와 같습니다. 스타일 부분에는
많은 프로그래밍 언어에서 주어진 여러 값 중에서 최소값 또는 최대값을 반환하는 기능을 제공합니다. 예를 들어 파이썬(Python)은 min(), max() 내장 함수를 제공하고, 자바(Java)는 Math 클래스에서 min(), max() 정적 메서드를 제공합니다. 자바스크립트(JavaScript)에서도 마찬가지로 Math.min(), Math.max() 함수를 통해 같은 기능을 사용할 수 있습니다. 흥미롭게도 CSS에서도 동일한 기능을 하는 min()과 max() 함수가 존재하는데요. 이번 포스팅에서는 반응형 웹디자인을 할 때 유
이번 포스팅에서는 플렉스박스(Flexbox)와 미디어쿼리(media query)를 사용하여 반응형 네비게이션을 만들어보도록 하겠습니다. 네비게이션 1 아래 HTML 코드는 여느 웹사이트에서나 흔히 볼 수 있는 젼형적인 네비게이션입니다. 화면의 너비가 좁은 모바일 화면에서는 메뉴를 세로로 표시하고, 화면의 너비가 넓은 데스크탑에서는 메뉴가 가로로 표시하는 경우가 많은데요. 모바일 스타일 반응형 디자인을 할 때는 모바일 우선으로 스타일을 적용하는 것이 여러 가지 측면에서 좋은 관행으로 알려져있습니다. 먼저 <ul/> 엘리먼트를 Flex
웹 페이지에서 이미지를 다룰 때 한 가지 파일로 모든 상황을 커버하기란 쉽지 않습니다. 모바일에서는 세로로 길쭉한 이미지가 잘 어울리는데 데스크톱에서는 가로로 넓은 이미지가 필요할 수 있고, 최신 브라우저에서는 AVIF로 용량을 줄이고 싶지만 구형 브라우저에서는 JPEG로 보여줘야 하죠. <img> 태그 하나로는 이런 분기를 처리할 수가 없습니다. HTML의 <picture> 요소는 바로 이런 문제를 해결하기 위해 등장했는데요. 화면 크기, 이미지 포맷 지원 여부, 해상도 등 여러 조건에 따라 브라우저가 최적의 이미지를 골라서 보여
시장에 출시되는 디바이스들의 화면들이 점점 다양해지면서 다양한 크기의 화면에 똑똑하게 반응하는 웹디자인이 중요해지고 있습니다. 이번 포스팅에서는 CSS의 미디어 쿼리(Media Query)와 float 속성을 이용해서 반응형 레이아웃을 잡는 방법에 대해서 알아보겠습니다. 웹페이지 마크업 CSS로 스타일할 예제 사이트의 전체 웹페이지를 HTML5에서 추가된 시멘택 태그를 활용해서 마크업하도록 하겠습니다. 먼저, 헤더 영역은 <header/> 태그로 감싸고, 사이트명에는 <h2/> 태그, 메뉴바에는 <nav> 태그를 적용합니다. 메인