display property 중 block과 inline에 대해 알아보자.
기본적으로 elements들은 block 아니면 inline 으로 setting된다. block은 horizontally 모든 공간을 점유한다. 반면, inline은 그 content만큼의 공간만 차지한다.
block-level element의 예는 div가 있고, inline element의 예로 span이 있다.
다음과 같이 해서 이 값을 바꿀 수도 있다.
[태그:] display
[HTML5&CSS] CSS page layout – float, flex, grid
세가지 많이 쓰이는 layout 테크닉이 있다.
- float
- flex
- grid
float-based CSS layout은 이 셋 중 가장 오래되었지만 여전히 쓰인다.
float의 property는 왼쪽 아니면 오른쪽 어디에 둘 건지를 정한다.
float: left 혹은 float: right
float: none을 쓰기도 하는데 자주 안 쓴다. left나 right를 override하고 싶을 때 쓴다.
일반적으로 float되는 element의 width를 px나 %등을 사용해서 명시적으로 정해준다.
width: 100px 혹은 width: 50%
float이라는 이름에서 알 수 있듯이, non-floated element 위에 떠 있는 식으로 보이면서 layout이 깨지는 문제를 자주 겪는다. 많은 해결책이 있지만, 가장 간단한 해결책은 이를 감싸는 element에 다음 속성을 주는 것이다.
overflow: hidden
flex-based CSS layout은 float-based CSS layout을 좀 더 개선한 새로운 대안이다. flex에서는 float에서와 같은 floating element의 clearing 문제를 걱정할 필요가 없다. 사용을 위해서는 개별 item을 담는 flex container에 다음을 적용하면 된다.
display: flex;
기본값으로 한 줄에 모든 element를 두도록 되는데, 이를 바꾸기 위해서는 다음 속성을 적용한다.
flex-wrap: wrap;
flex item들의 width를 정하기 위해서는 다음과 같이 한다.
flex-basis: 25%;
grid-based CSS layout은 세가지 중 가장 최신 기술이다. grid container에 다음을 적용한다.
display: grid;
그리고 grid 내에 몇 개를 둘 건지, 크기는 어떻게 할지, 몇 개의 열을 둘 것 인가를 정한다. 아래처럼 하면 4개의 같은 크기를 가지는 열을 갖게 된다.
grid-template-columns: auto auto auto auto;
float나 flex에서는 item들의 width를 정해주어야 했지만, grid-based CSS layout에서는 그럴 필요가 없다.