display 속성
: inline, block, inline-block, list-item, table, flex, none 등
- 모든 HTML 요소는 하나의 display 값을 갖는다.
- 대부분 inline 또는 block
(1) inline display
: <span>,<b>,<i>, <a>, <img>, <button>
- 특징
-다른 요소들과 같은 줄에 머무르려고 함 (줄 바꿈 X)
-가로 길이는 필요한 만큼만 차지하며 따로 값을 설정해주더라도 적용되지 않음
-width, height 속성 효과 X margin-top, margin-bottom 효과 X
(2) block display
: <div>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <p>, <nav>
- 특징
-새로운 줄에 가려고 함 (줄 바꿈 O)
-가로 길이를 최대한 많이 차지하려고 함 (기본값)
-가로 길이를 따로 설정해주면 설정값으로 적용
-width, height 속성 효과 O
(3) inline-block display
- 특징
-inline과 같이 다른 요소들과 같은 줄에 머무름
-가로, 세로 길이 설정 가능 (inline과 차이)
-width, height, margin-top, margin-bottom 속성 효과 O
