웹에서 아이콘(icon)과 텍스트(text)를 함께 배치해야 하는 경우가 많습니다. 예를 들어, 버튼(button) 안에 아이콘과 텍스트가 같이 있으면 사용자에게 해당 버튼의 용도를 좀 더 빠르게 전달할 수 있습니다. 뿐만 아니라 같은 버튼인데 데스크탑 화면에서는 텍스트만 모바일 화면에서는 아이콘만 보여줄 수도 있지요. 하지만 웹 개발을 하다보면 아이콘과 텍스트를 나란히 가로 배치하는데 의외로 어려움을 겪을 수 있는데요. 이번 포스팅에서는 이럴 때 적용할 수 있는 CSS 스타일링 요령에 대해서 알아보겠습니다. HTML 마크업 스타일
웹에서 이미지 아래나 옆에 의도치 않게 공백이 생겨서 애를 먹는 경우가 있는데요. 이번 포스팅에서는 언제 이렇게 이미지 주변에 불필요한 공백이 생길 수 있으며, 이러한 성가신 공백을 효과적으로 제거하는 다양한 요령을 알려드리겠습니다. 이미지 아래에 생기는 공백 <div>나 <figure>와 같은 HTML 요소 안에 이미지를 담고 있는 <img> 요소를 넣어보겠습니다. 이미지 아래에 살짝 공백이 생긴 것이 보이시나요? 🤨 이미지 아래에 이러한 공백이 생기는 이유는 <img> 요소의 display 속성이 기본적으로 inline이기 때
이번 포스팅에서는 화면(viewport) 너비에 따라서 적절히 반응하는 글꼴을 CSS로 어떻게 스타일하는지 알아보겠습니다. Media Queries 반응형 글꼴하면 가장 쉽게 떠올리리 수 있는 방법이 바로 미디어 쿼리(media query)를 사용하는 것입니다. 예를 들어, 화면 너비가 480px 이상과 1024px 이상이 되었을 때 HTML의 여러 요소(element)와 클래스(class)에 적용된 글자 크기가 자동으로 늘어나게 스타일해볼까요? 오래전 부터 쓰이던 이 방법은 보시다시피 동일한 CSS 선택자에 대해서 여러 번 스타일
웹사이트 레이아웃에서 사이드바(sidebar)는 목차, 광고 배너, 인기/신규 게시물 목록, 연관/추천 상품 목록과 같이 보조적인 컨텐츠를 배치하기 위해서 사용합니다. 이번 포스팅에서는 플렉스 박스(Flexbox)와 미디어 쿼리(Media Query)를 이용해서 화면의 너비에 알아서 반응하는 사이드바를 만들어보겠습니다. 웹페이지 마크업 예제로 목차 영역과 기사 영역으로 이루어진 간단한 웹페이지의 구조를 HTML로 작성해보겠습니다. <main> 엘리먼트 아래에 목차 영역을 <aside> 엘리먼트로 기사 영역을 <article> 엘리먼
웹사이트에서 정말 흔하게 접할 수 있는 성배(Holy Grail) 레이아웃은 한 때 개발자 사이에서 제대로 구현하기 어렵기로 악명이 높았었는데요. Flexbox와 CSS Grid가 보편화되면서 이제는 옛말이 되어 가고 있는 것 같습니다. 이번 포스팅에서는 CSS의 최신 기술을 이용하여 어떻게 성배 레이아웃을 구현할 수 있는지 알아보도록 하겠습니다. 기본 구조 성배 레이아웃은 일반적으로 5개의 영역으로 구성이 되는데요. 회면 최상단에 각각 헤더(header)와 풋터(footer) 영역이 위치하고, 그 사이의 영역이 다시 네비게이션(n
CSS로 웹사이트의 레이아웃을 잡다보면 브라우저 화면 맨 중앙에 어떤 HTML 요소를 배치해야 할 경우가 자주 생기지요? 이번 글에서는 CSS의 Flexbox나 Grid를 활용하여 얼마나 쉽게 HTML 요소를 브라우저 화면에 중앙에 위치시킬 수 있는지 알아보겠습니다. 기본 HTML/CSS 중앙에 위치시킬 컨텐츠(content) 요소와 이 요소를 감싸는 래퍼(wrapper)요소에 대한 HTML 마크업을 하겠습니다. 그 다음 각 요소를 구분하기 쉽도록 CSS로 약간의 스타일을 해주겠습니다. 여기서 주의 깊게 보실 부분이 바로 래퍼 요소
CSS를 사용하다 보면 정말 간단한 정렬이 생각처럼 되지 않아서 애를 먹는 경우가 있습니다. 특히 초보자들이 많이 겪는 문제가 HTML 요소(element)를 우측으로 정렬하는 것입니다. HTML 웹페이지의 레이아웃에서 HTML 요소를 우측으로 정렬해야 하는 대표적인 경우는 헤더 영역입니다. 예를 들어, 다음과 같이 사이트명과 네비게이션으로 이루어진 간단한 헤더를 생각해보겠습니다. <h1> 요소와 <nav> 요소가 같은 줄에 나란히 배치될 수 있도록, CSS의 display 속성값을 변경해주겠습니다. 지금부터 <nav> 요소로 마크
이번 포스팅에서는 플렉스박스(Flexbox)와 미디어쿼리(media query)를 사용하여 반응형 네비게이션을 만들어보도록 하겠습니다. 네비게이션 1 아래 HTML 코드는 여느 웹사이트에서나 흔히 볼 수 있는 젼형적인 네비게이션입니다. 화면의 너비가 좁은 모바일 화면에서는 메뉴를 세로로 표시하고, 화면의 너비가 넓은 데스크탑에서는 메뉴가 가로로 표시하는 경우가 많은데요. 모바일 스타일 반응형 디자인을 할 때는 모바일 우선으로 스타일을 적용하는 것이 여러 가지 측면에서 좋은 관행으로 알려져있습니다. 먼저 <ul/> 엘리먼트를 Flex
Flexbox(플렉스박스)를 이용한 반응형 웹디자인이 대중화되면서 CSS에서 Flexbox의 존재감이 점점 커지고 있습니다. 이번 포스팅에서는 Flexbox를 이해하기 위해서 꼭 필요한 핵심 개념과 자주 사용되는 속성에 대해서 살펴보겠습니다. Flexbox 구성 요소 Flexbox는 일반적으로 하나의 Flex container와 여러 개의 Flex item으로 구성됩니다. 따라서, Flexbox를 사용할 때 마크업과 스타일은 대략 다음과 같은 형태를 띠게 됩니다. 여러 개의 내부 엘리먼트를 담고 있는 외부 엘리먼트에 display: