display란?
- 요소가 화면에 보이는 방식을 지정하는 속성 (가시 속성 중 하나)
- 요소가
block으로 처리될지,inline box로 처리될지를 결정한다. (block, inline) <- 외부 레이아웃 결정 - 요소의 하위 요소들에 대한 레이아웃을 설정한다. (flex, grid, flow layout) <- 내부 레이아웃 결정
display-outside 속성에 사용 가능한 키워드
noneblockinlineinline-block
display-outside 키워드 별 특징
none
- 요소가 화면에서 보이지 않는다.
- 아예 렌더링조차 되지 않기 때문에 보이지 않는 것이다.
- 이는
visibility: hidden의 경우와 차이를 보인다.
block
개요
- 요소가 블록처럼 차곡차곡 쌓아 올려지는 형식이다.
특징
- block인 요소는 부모 요소만큼의 너비를 가진다.
- width, height, margin 속성을 적용할 수 있다.
block을 기본값으로 가지는 태그
divph1~6olullitableform
inline
- 요소가 한 줄 안에 차례차례 위치하는 형식이다.
inline을 기본값으로 가지는 태그
spanastrongemcodebrimg(일부 브라우저는 block)
inline-block
- inline과 마찬가지로 요소가 한 줄 안에 차례차례 위치하는 형식이다.
inline-block을 기본값으로 가지는 태그
buttoninputselect
inline과 inline-block은 무엇이 다를까?
얼핏 보면 inline과 inline-block은 차이가 없는 것처럼 느껴질수 있다. 하지만 다음 경우에 두 속성값은 차이가 생긴다.
width와height속성을 적용할 때margin또는padding속성을 적용할 때
import styled from "styled-components";
// display: inline
export const InlineDiv = styled.div`
display: inline-block;
background-color: aqua;
width: 300px;
height: 50px;
margin: 10px;
`;
// display: inline-block
export const InlineBlockDiv = styled.div`
display: inline;
background-color: aqua;
width: 300px;
height: 50px;
margin: 10px;
`;
출력 결과는 다음과 같다.
inline: width와 height이 적용되지 않았고, margin과 padding은 좌우만 적용되었다.inline-block: width와 height, 그리고 margin과 padding이 정상적으로 적용되었다.
따라서, 인라인 속성을 가지면서 크기와 여백을 조정해야 한다면 inline-block 속성값을 쓰는 것이 좋다.
vertical-align
- inline-block일 경우 가질 수 있는 속성
- inline-block 요소의 자식 요소들의 정렬을 결정한다.
- top ⇒ 자손들의 top을 전체 라인의 top으로 정렬한다.
- bottom ⇒ 자손들의 bottom을 전체 라인의 bottom으로 정렬한다.
- middle ⇒ 자손들의 middle을 부모의 (
baseline+ (x-height/2))로 정렬한다.
vertical-align: middle이 권장되지 않는 이유
- input이나 select 태그 등 브라우저마다
baseline지점이 다른 경우 중간값 계산이 달라질 수 있다. - 인라인 요소의 수직 정렬만 적용된다.
- block 요소의 수직 정렬에는 영향을 미치지 않음.
- 주변 요소들도 모두
inline으로 만들어야 한다.
display-inside 속성에 사용 가능한 키워드
flexgridflowflow-roottable
display-inside 키워드 별 특징
flex
개요
flexbox 모델에 따라 내부 요소들을 배치한다.
특징
- 요소의 레이아웃을 1차원으로 정의한다.
- flex를 적용한 요소는
container, 그의 자식 요소들은item이 된다. - item들은 container에 빈 공간이 남을 경우 늘어날 가능성이 있다.
- item들은 container가 넘칠 경우 줄어들 가능성이 있다.
- item들은 수직/수평 정렬될 수 있다.
- item들은 기본적으로 가로 방향으로 배치된다.
- item들은 자신의 width만큼의 너비를 가진다.
- item들은 height를 지정하지 않을 경우 container의 height만큼 높이가 늘어난다.
flex-direction
- container의 축의 방향을 결정한다.
row: 가로 방향으로 배치, 주축이 가로가 된다.column: 세로 방향으로 배치, 주축이 세로가 된다.
flex-wrap
- container의 줄바꿈 가능 여부를 결정한다.
- 기본값 :
nowrap nowrap: flexbox의 줄바꿈을 허용하지 않는다.wrap: flexbox의 줄바꿈을 허용한다.
flex-basis
- item의 초기 기본 크기를 설정한다.
- 기본값 :
auto - 0 : 최소 너비를 갖는다.
- 200px : 무조건 200px를 보장하며, 나머지 item들의 너비를 그에 맞게 줄인다.
flex-grow
- item이 다른 item에 비해 갖는 주축 크기를 설정한다.
- 기본값 : 0
- 1 : 다른 item과 동일한 크기를 갖는다.
- 2 : 다른 item의 2배 크기를 갖는다.
flex-shrink
- container가 줄어들 때, 해당 item이 어떻게 줄어들어야 하는지를 설정한다.
- 기본값 : 1
- 0 : 줄어들지 않고, 다른 item들이 줄어든다.
- 1 : 다른 item과 같이 줄어든다.
- 2 : 다른 item 대신 먼저 줄어든다.
flex의 정렬 (justify-content)
주 축(Main Axis)의 정렬 방법을 정의한다.- 기본값 :
normal center: 중앙 정렬start: 시작지점 정렬end: 끝지점 정렬space-between: 주축을 따라 container에 고르게 분포, item 간의 간격은 동일하다. 첫 item과 마지막 item은 양쪽 끝에 붙는다.
space-around: 주축을 따라 container에 고르게 분포, item 간의 간격은 동일하다. 첫 item 앞공간과 마지막 item 뒷공간은 각 item 간격의 절반이 된다.
space-evenly: 주축을 따라 container에 고르게 분포, item 간의 간격은 동일하다. 첫 item 앞공간과 마지막 item 뒷공간은 각 item 간격과 동일하다.
flex의 정렬 (align-items)
교차 축(Cross Axis)의 정렬 방법을 정의한다.- 기본값 :
stretch center: 중앙 정렬start: 시작지점 정렬end: 끝지점 정렬baseline: 텍스트 베이스라인 기준으로 정렬
grid
개요
gridbox 모델에 따라 내부 요소들을 배치한다.
특징
- 요소의 레이아웃을 2차원으로 정의한다.
- grid container의 모든 자식들은 grid item이 된다.
grid-template-rows
- 그리드의 행을 정의하는 속성
다음과 같이 grid 각 행의 크기가 결정되는 모습을 볼 수 있다.
grid-template-columns
- 그리드의 열을 정의하는 속성
다음과 같이 grid 각 열의 크기가 결정되는 모습을 볼 수 있다.
flow-root
개요
- 자식 요소가 float이 되어도 쪼그라 드는 것을 방지하는 속성값이다.
- 요소는 새로운 BFC (Block Formatting Context)를 설정하는 block container를 만든다.
table
개요
- table 태그와 비슷하게 동작한다.
