그 동안 <h1>, <p>, <a>, <img>, <table>, <li>와 같이 많지는 않지만 중요한 요소들에 대해서 알아보았습니다.
아마도 공부하면서 눈치채신분도 계시겠지만 특정 요소는 사용하면 자동으로 줄을 바꾸는 경우가 있습니다. 의도하든 아니든 말이죠.
반면에 특정요소를 사용하고나서 줄을 바꿨으면 좋겠지만 그렇지 않은 경우도 있고요. 왜 그럴까요?
오늘은 요소에 내재된 디스플레이 옵션인 Block & Inline 요소에 대해서 공부해 보려고 합니다.
모든 요소는 "block level element"와 "inline level element"로 구분할 수 있습니다.
여기서 Block-level Elements는 요소를 사용하면 줄바꿈을 하며 크롬과 같은 브라우저가 자동으로 공간을 할당합니다.
따라서 Block-level 에서는 항상 브라우저의 전체 가로길이를 사용할 수 있습니다.
대표적으로 <p>, <h1>-<h6>, <ol>, <ul>, <table>, <div>와 같은 요소들이 존재합니다.
반면에 Inline-level Elements에서는 요소를 사용한다고 해서 줄바꿈을 하지는 않습니다.
따라서 브라우저 창의 전체 가로길이를 사용하는 것이 아닌 요소를 구성하는 태그에 필요한 만큼의 공간만 차지하는 것이죠.
대표적으로 <a>, <span>, <img>, <br>과 같은 요소들과 Text-formatting에 사용하는 요소들이 인라인 요소에 해당합니다.
참고로 <div>, <span>은 container로 여태까지 배운 요소와 다르게 의미는 없지만 다른 요소들과 구분을 할때 또는 CSS로 스타일을 주고자할 때 자주 사용하는 요소입니다.
다음 코드를 통해 어떻게 처리하는지 살펴보겠습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test</title>
</head>
<body>
<h1>Block and Inline Elements</h1>
<div style="background-color: yellowgreen;"><div>요소는 대표적인 Block Elements로 사용하고 나면 자동으로 줄바꿈이 실행됩니다.</div>
<div><span>요소는 대표적인 <span style="background-color: yellow;">Inline Elements</span>로 요소에 필요한 만큼의 공간만을 사용합니다.</div>
</body>
</html>
- block-level 요소인 <div>태그에 배경색을 지정하니 문장이 끝나도 브라우저 창의 가로 너비만큼 배경색이 적용된 모습을 볼 수 있으며 자동으로 줄바꿈을 하는것을 확인할 수 있습니다.
- 반면에 inline-level 요소인 <span>태그에 배경색을 지정하니 <div>요소와 다르게 요소에 필요한 너비만큼 배경색이 적용되어 있으며 <span> 요소가 끝난다고 하더라도 줄바꿈이 되지 않는 것을 확인할 수 있습니다.
그러면 다른 궁금증이 생길 수 있을 것 같습니다.
블록 레벨을 인라인 레벨로 변경할 수 있나요?
이련 경우에는 CSS의 display 속성을 사용해서 block-level을 inline-level로 변경할 수 있습니다. (반대도 가능)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test</title>
</head>
<body>
<h1>Block and Inline Elements</h1>
<p style="display: inline;">p태그는 대표적인</p>
<p style="display: inline;">block-level 요소입니다.</p>
</body>
</html>
'Web Programming' 카테고리의 다른 글
| [HTML] Entity Code (0) | 2023.02.20 |
|---|---|
| [HTML] Head Element (0) | 2023.02.20 |
| [HTML] Lists (0) | 2023.02.15 |
| [HTML] Tables (0) | 2023.02.14 |
| [HTML] Images and Favicon (0) | 2023.02.12 |