Layout

2 posts

[CSS] 성배 (Holy Grail) 레이아웃 (Flexbox, Grid)

웹사이트에서 정말 흔하게 접할 수 있는 성배(Holy Grail) 레이아웃은 한 때 개발자 사이에서 제대로 구현하기 어렵기로 악명이 높았었는데요. Flexbox와 CSS Grid가 보편화되면서 이제는 옛말이 되어 가고 있는 것 같습니다. 이번 포스팅에서는 CSS의 최신 기술을 이용하여 어떻게 성배 레이아웃을 구현할 수 있는지 알아보도록 하겠습니다. 기본 구조 성배 레이아웃은 일반적으로 5개의 영역으로 구성이 되는데요. 회면 최상단에 각각 헤더(header)와 풋터(footer) 영역이 위치하고, 그 사이의 영역이 다시 네비게이션(n

CSS로 반응형 레이아웃 스타일하기

시장에 출시되는 디바이스들의 화면들이 점점 다양해지면서 다양한 크기의 화면에 똑똑하게 반응하는 웹디자인이 중요해지고 있습니다. 이번 포스팅에서는 CSS의 미디어 쿼리(Media Query)와 float 속성을 이용해서 반응형 레이아웃을 잡는 방법에 대해서 알아보겠습니다. 웹페이지 마크업 CSS로 스타일할 예제 사이트의 전체 웹페이지를 HTML5에서 추가된 시멘택 태그를 활용해서 마크업하도록 하겠습니다. 먼저, 헤더 영역은 <header/> 태그로 감싸고, 사이트명에는 <h2/> 태그, 메뉴바에는 <nav> 태그를 적용합니다. 메인