[콘텐츠 모델/시멘틱 마크업/블록&인라인] 블록&인라인
콘텐츠 모델 이전에 요소들을 블록 레벨과 인라인 레벨로 구분했었다.
블록 레벨 요소와 인라인 레벨 요소는 시각적으로 명확하게 구분되기 때문에 지금도 두 가지로 많이 구분한다.
목차
1. 블록 레벨 요소
2. 인라인 레벨 요소
블록 레벨 요소
부모 요소의 가로 영역에 맞게 꽉 채워져 표현되는 요소이다.
양옆으로 다른 요소가 배치되지 않도록 박스를 생성하므로 박스의 위아래로 줄바꿈이 생기게 된다.
블록 레벨 요소는 일반적으로 모든 요소(블록, 인라인)들을 자식으로 가질 수 있다.
대표적으로 div, h1~h6, p, ul, li, table 태그 등이 있다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>block</title>
</head>
<body>
<h1>블록 레벨 요소</h1>
<div>블록 레벨 요소 추가</div>
<p>블록 레벨 요소 추가</p>
</body>
</html>
따로 개행 태그를 추가해주지 않아도 브라우저에서 위아래 줄바꿈이 일어난 것을 확인할 수 있다.
인라인 레벨 요소
하나의 라인 안에서 자신의 내용만큼의 박스를 만드는 요소이다.
라인의 흐름을 끊지 않고 요소 앞 뒤로도 줄 바꿈이 되지 않아 다른 인라인 요소들이 자리할 수 있다.
인라인 레벨 요소는 블록 레벨 요소의 자식으로 분류되기 때문에 자손으로 블록 레벨 요소를 가질 수 없다.
인라인 레벨 태그로는 span, i, img, a, em, strong 등이 있다.
단, HTML5버전에서 생긴 예외 경우가 있는데 <a> 태그는 인라인 레벨 요소이지만 자손으로 블록 레벨 요소를 가질 수 있다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>inline</title>
</head>
<body>
<span>인라인 레벨 요소</span><i>인라인 레벨 요소 추가</i><strong>인라인 레벨 요소 추가</strong>
</body>
</html>
개행 태그를 추가하지 않으면 한 라인에 계속해서 인라인 레벨 요소가 추가되는 것을 확인할 수 있다.
부스트코스의 강의 내용을 정리한 포스트입니다.
https://www.boostcourse.org/cs120
비전공자를 위한 HTML/CSS
부스트코스 무료 강의
www.boostcourse.org
'공부 > HTML과 CSS' 카테고리의 다른 글
| [CSS 이해하기] CSS 문법과 적용 (0) | 2022.12.13 |
|---|---|
| [CSS 이해하기] CSS 소개 (0) | 2022.12.13 |
| [콘텐츠 모델/시멘틱 마크업/블록&인라인] 시멘틱 마크업 (0) | 2022.12.12 |
| [콘텐츠 모델/시멘틱 마크업/블록&인라인] 콘텐츠 모델 (0) | 2022.12.12 |
| [HTML 태그] 폼 요소 (0) | 2022.12.09 |
