CSS에서 가장 헷갈리는 레이아웃을 다시 정리해본다. 본 TIL은 https://ko.learnlayout.com 의 'CSS 레이아웃을 배웁시다'를 바탕으로 작성되었다. (작성하다보니 거의 복붙이 되어버렸다...)
display 프로퍼티
display 는 CSS에서 레이아웃을 제어하기 위해 사용되는 프로퍼티이다. 모든 element에는 유형에 따라 기본 표시값이 존재하는데, 대부분 기본값은 block inline이다.
block
블록 레벨 엘리먼트는 새 줄에서 시작하고 좌우로 최대로 늘어난다. div, p, form은 블록 레벨 엘리먼트이고, HTML5에서 header와 footer, section이 추가되었다.
inline
인라인 엘리먼트는 단락 안에서 해당 단락의 흐름을 방해하지 않은 채로 텍스트를 감쌀 수 있다. span과 a 엘리먼트가 대표적인 인라인 엘리먼트이다.
none
none 값은 자바스크립트에서 엘리먼트를 실제로 삭제하거나 재생성하지 않고도 엘리먼트를 보이고 숨기는데 사용된다. script는 none 을 기본값으로 사용한다.
visibility: hidden;은 엘리먼트가 감춰지지만 여전히 공간을 차지한다. display: none; 으로 설정하면 엘리먼트가 없는 것처럼 페이지가 렌더링된다.
margin: auto;
좌우 마진을 auto 로 설정시 해당 엘리먼트를 컨테이너 안 가로 중앙에 오게 할 수 있다.
#main {
width: 600px;
margin: 0 auto;
}max-width
width 대신 max-width를 사용하면 작은 창에서는 창의 크기가 기기에 맞게 조절된다.
#main {
max-width: 600px;
margin: 0 auto;
}box-sizing
box-sizing 이라는 새로운 CSS 프로퍼티를 사용하면 해당 엘리먼트의 패딩과 테두리가 너비에 영향을 끼치지 않는다.
.simple {
width: 500px;
margin: 20px auto;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.fancy {
width: 500px;
margin: 20px auto;
padding: 50px;
border: solid blue 10px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}페이지 상의 모든 엘리먼트가 이런 식으로 동작하게 만들기 위해서는 이러한 코드를 집어넣으면 된다.
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}Position
static
static 은 기본값이다. position: static;이 설정된 엘리먼트는 위치가 지정된 것이 아니라고 표현한다.
relative
relative 는 별도의 프로퍼티를 지정하지 않는 이상 static 과 동일하게 동작한다. 상대 위치가 지정된 엘리먼트에 top, right, bottom, left를 지정하면 기본 위치와는 다르게 위치가 조정된다.
fixed
fixed 엘리먼트는 뷰포트(viewport)에 상대적으로 위치가 지정된다. 스크롤되더라도 늘 같은 곳에 있는 1:1 문의창 등이 해당된다. relative와 마찬가지로 top, right, bottom, left 프로퍼티가 사용된다. 모바일 브라우저에서는 고정엘리먼트 지원이 굉장히 불안정하다.
absolute
absolute 는 가장 다루기 까다로운 위치 지정 값이다. 뷰포트에 상대적으로 위치가 지정되는 것이 아니라 가장 가까운 곳에 위치한 조상 엘리먼트에 상대적으로 위치가 지정된다는 점을 제외하면 fixed 와 비슷하게 동작한다. 절대 위치가 지정된 엘리먼트가 기준으로 삼는 조상 엘리먼트가 없으면 문서 본문(document body)을 기준으로 삼고, 페이지 스크롤에 따라 움직인다.
Float
레이아웃을 잡는데 또 다른 중요한 프로퍼티이다. float는 이미지 주위를 텍스트로 감싸기 위해 만들어진 것이다.
clear
.box {
float: left;
width: 200px;
height: 100px;
margin: 1em;
}
.after-box {
clear: left;
}clear 을 통해 .box 뒤 섹션을 아래로 옮길 수 있다. left 값 외에도 right, both 도 비울 수 있다.
clearfix 핵
float를 사용할때 일어날 수 있는 바람직하지 않은 경우.
img {
float: right;
}
아래의 CSS 코드를 추가하면,
.clearfix {
overflow: auto;
}
위 방법은 근래에 나온 브라우저에서만 동작한다. IE6를 지원하고 싶다면 아래의 코드를 추가해야 한다.
.clearfix {
overflow: auto;
zoom: 1;
}float를 이용한 레이아웃
position 대신에 float으로 레이아웃을 잡을 수도 있다.
nav {
float: left;
width: 200px;
}
section {
margin-left: 200px;
}퍼센트 너비
퍼센트는 특정 엘리먼트를 담고 있는 블록에 상대적인 측정 단위이다. 레이아웃을 잡는데 퍼센트를 쓸 수도 있지만 창의 너비가 바뀔때 지저분하게 표시될 수 있으니 주의해야 한다.
미디어쿼리
"반응형 디자인"은 사이트가 표시되는 브라우저와 디바이스에 반응하는 사이트를 만드는 것이다. 미디어쿼리는 이에 가장 강력한 도구이다. 퍼센트 너비를 이용하는 레이아웃을 가지고 메뉴를 사이드바에 놓기에는 브라우저 창의 크기가 너무 작을 때 메뉴가 한 칼럼에 표시되게 만들 수 있다.
@media screen and (min-width:600px) {
nav {
float: left;
width: 25%;
}
section {
margin-left: 25%;
}
}
@media screen and (max-width:599px) {
nav li {
display: inline;
}
}inline-block
브라우저 너비를 채우고 알맞게 줄바꿈되는 박스 그리드를 만들 수 있다. inline-block 엘리먼트는 inline 엘리먼트와 비슷하지만 너비와 높이를 지정할 수 있다.
float 방식과 비교해보자.
.box {
float: left;
width: 200px;
height: 100px;
margin: 1em;
}
.after-box {
clear: left;
}inline-block 을 이용한 쉬운 방법. clear 없이도 줄바꿈이 일어난다.
.box2 {
display: inline-block;
width: 200px;
height: 100px;
margin: 1em;
}inline-block 레이아웃
레이아웃을 잡기 위해 inline-block 을 사용할 수도 있다. 몇 가지 염두해야 할 점.
inline-block엘리먼트는vertical-align프로퍼티의 영향을 받는다. (이 프로퍼티는top으로 설정.)- 각 칼럼의 너비를 설정할 필요가 있다.
- HTML의 각 칼럼 사이에 공백이 있으면 칼럼 간에 틈이 생긴다.
nav {
display: inline-block;
vertical-align: top;
width: 25%;
}
.column {
display: inline-block;
vertical-align: top;
width: 75%;
}column
다중 칼럼 텍스트를 손쉽게 만들 수 있는 CSS 프로퍼티가 새로 생겼다. IE9까지, 또는 오페라 미니에서는 동작하지 않는다.
.three-column {
padding: 1em;
-moz-column-count: 3;
-moz-column-gap: 1em;
-webkit-column-count: 3;
-webkit-column-gap: 1em;
column-count: 3;
column-gap: 1em;
}flexbox
flexbox를 이용한 간단한 레이아웃
.container {
display: -webkit-flex;
display: flex;
}
nav {
width: 200px;
}
.flex-column {
-webkit-flex: 1;
flex: 1;
}
flexbox를 이용한 멋진 레이아웃
.container {
display: -webkit-flex;
display: flex;
}
.initial {
-webkit-flex: initial;
flex: initial;
width: 200px;
min-width: 100px;
}
.none {
-webkit-flex: none;
flex: none;
width: 200px;
}
.flex1 {
-webkit-flex: 1;
flex: 1;
}
.flex2 {
-webkit-flex: 2;
flex: 2;
}
flexbox를 이용한 중앙 정렬
.vertical-container {
height: 300px;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
}
