💡 레이아웃과 관련된 CSS 속성
Layout
화면에 Element들을 어떻게 배치할 것인가?
display
Element를 어떻게 표시할지 방법에 관한 속성
div {
display: none | block | inline | flex;
}
display 속성의 대표적인 값들
- display: none;
- element를 화면에서 숨기기 위해 사용
- script 태그의 display 속성 기본값은 display: none;
- display: block;
- 블록 단위로 element를 배치
- p, div, h1 ~ h6 태그의 display 속성 기본값이 display:block;
- display: inline;
- element를 라인 안에 넣는 것
- span 태그의 display 속성 기본값이 display:inline;
- display: flex;
- element를 블록 레벨의 flex container로 표시
- container이기 때문에 내부에 다른 element들 포함
visibility
가시성
Element를 화면에 보여주거나 감추기 위해 사용
visibility 속성
div {
visibility: visible | hidden;
}
visibility 속성의 대표적인 값들
- visibility: visible;
- visibility: hidden;
- 화면에서 안 보이게 감추는 것
- element를 안 보이게만 하는 것, 화면에서의 영역은 그대로 차지
position
Element 위치 선정
position 속성
div {
position: static | fixed | relative | absolute;
}
position 속성의 대표적인 값
- static
- 기본값으로 element를 원래의 순서대로 위치시킴
- fixed
- element를 브라우저 window에 상대적으로 위치시킴
- relative
- element를 보통의 위치에 상대적으로 위치시킴
- absolute
가로, 세로 길이와 관련된 속성
div {
width: auto | value;
height: auto | value;
min-width: auto | value;
min-height: auto | value;
max-width: auto | value;
max-height: auto | value;
}
❕ 참고 링크 (값의 단위)
https://www.w3schools.com/cssref/css_units.asp
Flexbox
CSS 레이아웃 사용의 불편함을 개선
flex와 관련된 대표적인 속성
div {
display: flex;
flex-direction: row | column | row-reverse | column-reverse;
align-items: stretch | flex-start | center | flex-end | baseline;
justify-content: flex-start | center | flex-end | space-between | space-around;
}
flex-direction
어떤 방향으로 배치를 할 것인지 지정
flex-direction 속성의 대표적인 값들
- row
- 기본값, 아이템을 행(row)을 따라 가로 순서대로 왼쪽부터 배치
- column
- 아이템을 열(column)을 따라 세로 순서대로 위쪽부터 배치
- row-reverse
- 아이템을 행(row)의 역(reverse)방향으로 오른쪽부터 배치
- column-reverse
- 아이템을 열(column)의 역(rverse)방향으로 아래쪽으로 배치


align-items
container 내에서 아이템을 어떻게 정렬할 것인지 지정
align-items 속성의 대표적인 값들
- stretch
- 기본값, 아이템을 늘려서(stretch) 컨테이너를 가득 채움
- flex-start
- cross axis의 시작 지점으로 아이템을 정렬
- center
- flex-end
- cross axis의 끝 지점으로 아이템을 정렬
- baseline

justify-content
container 내에서 아이템을 어떻게 나란히 맞출 것인지 지정
justify-content 속성의 대표적인 값들
- flex-start
- main axis의 시작지점으로 아이템을 맞춤
- center
- flex-end
- main axis의 끝 지점으로 아이템을 맞춤
- space-between
- main axis를 기준으로 첫 아이템은 시작 지점에 맞추고 마지막 아이템은 끝 지점에 맞추며
중간에 있는 아이템들 사이(between)의 간격(space)이 일정하게 되도록 맞춤
- space-around
- main axis를 기준으로 각 아이템의 주변(around) 간격(space)을 동일하게 맞춤

❕ 참고링크 (flexbox)
https://www.w3schools.com/css/css3_flexbox.asp