[프로젝트] CSS - display 속성

Layout

1. block

• 항상 새로운 라인에서 시작
• 폭 전체 차지
• <p> <div>

https://www.w3schools.com/html/tryit.asp?filename=tryhtml_block_div

2. inline 

• 새로운 라인에서 시작하지 않고 필요한 만큼의 영역 차지
• <span> <a> <img>

https://www.w3schools.com/html/tryit.asp?filename=tryhtml_inline_span

3. inline-block

• display: inline으로 하면 폭, 높이, 마진 균일하지 않음
• display:inline-block으로 하면 균일한 폭, 높이로 맞출 수 있음

https://www.w3schools.com/css/tryit.asp?filename=trycss_inline-block_span1

4. flex

• flexible items에 flexible length 지정
• flexible item이 아니라면 flex 속성 효과 없음
• 가로/세로 정렬을 쉽게 조정할 수 있는 layout 시스템
• 부모 요소(컨테이너)에 display: flex를 적용하면 그 안의 자식 요소(item)들이 flex 규칙에 따라 배치됨

• flex-direction: row, column을 활용해 정렬 방향 결정, 기본이 row(왼쪽 → 오른쪽)
• justify-content: 가로축에서 아이템들의 위치 조정, 기본이 flex-start(왼쪽 정렬)
• align-items: 세로축에서 아이템들의 위치 조정, 기본이 stretch(컨테이너 높이에 맞춰 늘어남)

https://www.w3schools.com/css/tryit.asp?filename=trycss3_flexbox

container에 display:flex를 지정해야 자식 요소가 정렬된다.

 

https://www.w3schools.com/cssref/playdemo.php?filename=playcss_display&preval=flex