▶ Block 요소
- <div>, <h1>, <p> 등
1. 사용 가능한 최대 가로 너비를 사용함.
- 가로 너비를 지정하지 않았으나 화면의 왼쪽부터 오른쪽 끝까지 배경색이 모두 출력됨.
2. 크기를 지정할 수 있음.
- 지정된 px만큼의 너비와 높이를 가지는 영역이 됨.
3. width: 100%, height: 0px에서 출발
- 이 값에서 출발해서 요소가 완성되는 것.
- block 요소가 늘 이 값을 가진다는 건 아니라는 점에 유의.
- 이전 예와 비교해 height를 지정하지 않으면 <div> 내용의 높이만큼만 영역을 가지게 됨.
4. 수직으로 쌓임.
- 블록요소는 왼쪽 상단을 기준으로 위에서 아래로 수직으로 쌓임.
5. margin, padding 속성의 상하좌우 여백을 온전하게 사용 가능.
- block 요소는 상하좌우 여백이 모두 적용됨.
6. 레이아웃을 위한 용도로 사용.
▶ Inline 요소
- <span>, <img> 등
1. 필요한 만큼의 너비만 사용함.
- width와 height를 지정하지 않은 채 배경색 지정 시 전체 가로 너비를 사용하지 않고 자신 안에 포함된 내용만큼만 가로 너비를 사용함.
2. 크기를 지정할 수 없음
- inline 요소인 <span>에 width와 height을 지정해도 결과는 width와 height를 지정하지 않은 이전 예시와 동일함.
3. width: 0, height: 0으로 출발.
- 자신 안에 content로 들어간 내용만큼의 너비만 사용할 수 있음.
※ 기본적으로 브라우저에서는 block 요소와 inline 요소 모두 width: auto, height: auto로 지정해 주지만, 서로 다르게 구현된다는 것.
cf. 블록 요소는 본인이 사용 가능한 최대 가로 너비를 사용.
4. 수평으로 쌓임.
- inline 요소의 경우 수평으로 쌓임.
- 또한 별도로 margin을 지정하지 않았는데 중간중간 여백이 들어가 있는 것을 볼 수 있음. inline 요소의 특징.
- 붙여서 작성한 inline 요소는 결과상 여백이 없는데 줄바꿈을 한 경우 여백이 들어감.
block 요소의 경우 이와 같은 결과로 나타나지 않음.
5. margin, padding 중 상하 여백은 사용할 수 없음.
- margin: 20px; 적용 시 좌우 여백 20px은 적용되었으나 margin-top과 margin-bottom은 적용되지 않음.
- padding: 20px; 적용 시 좌우 20px이 적용되었으며, padding-bottom이 적용된 것처럼 보임(아래 예시 추가 참조).
- 하지만 inline 요소 아래에 다른 요소를 넣어 보면 추가된 요소가 겹쳐 나오는 것이 보임.
※ margin과 padding은 여백을 지정하는 속성이며 요소와 요소 사이의 거리를 만들어내는 데 사용함.
- margin이 적용되지 않는 것과 달리 padding은 시각적으로 확인은 가능하지만 실질적인 거리를 만들어내지는 못함.
- inline 요소의 경우 margin의 상하 여백뿐 아니라 padding의 상하 여백 또한 온전하게 사용할 수 없음.
6. 텍스트를 다루는 용도로 사용.
▶ css의 display 속성
- inline 요소에는 width와 height를 지정해도 적용되지 않음.
- CSS의 display 속성을 통해 display: block; 지정 시 가로/세로 너비 지정 가능.
- inline 요소를 사용한 후 강제로 block 요소의 특성으로 변경.
- display: inline;으로 지정 시 가로/세로 크기가 지정될 수 없는 inline 요소로 다시 변경됨.
- block 요소의 경우에도 마찬가지로 display: inline 지정 시 inline 요소의 특성으로 변경됨.
- block 요소에 대한 display 속성의 기본값은 display: block;
- inline 요소에 대한 display 속성의 기본값은 display: inline;
※ HTML에는 크게 block 요소와 inline 요소라는 개념이 존재하고 이는 실제로 CSS의 display 속성의 영향을 받음.
'HTML' 카테고리의 다른 글
| [HTML] Contents 구분(2) - main, article, section, aside (0) | 2020.08.21 |
|---|---|
| [HTML] Contents 구분(1) - header, footer, h1 ~ h6 (0) | 2020.08.21 |
| [HTML] 메타데이터(2) - <meta> (0) | 2020.08.20 |
| [HTML] 메타데이터(1) - title, link, style, MIME Type, base (0) | 2020.08.20 |
| [HTML] HTML 문서의 주요 범위 (0) | 2020.08.18 |
