학습 내용
영역 태그
영역을 분할하거나 컨텐츠를 담는 컨테이너의 역할을 한다.
inline level element, block level element
모든 영역 태그는 inline level element인지, block level element인지로 구분된다.
inline: 컨텐츠의 크기만큼만 공간 할당. (그래서 가로로 나열됨)
block: 부모 요소의 전체 가로 크기만큼 공간 할당. (그래서 세로로 나열됨)
대표적으로 <span>이 inline, <div>가 block에 해당한다.
css로 설정할 때, inline 요소는 공간의 width, height 등을 지정할 수 없고, block은 가능하다.
참고로 css의 display를 통해서도 inline, block을 설정해줄 수 있다.
css를 통해 background color를 칠해서 inline인지 block인지 구분할 수 있다.
코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
div {
background-color: red;
}
span {
background-color: yellow;
}
</style>
</head>
<body>
<div>탁트리오</div>
<span>탁트리오</span>
</body>
</html>
Reference
'프론트엔드 > HTML' 카테고리의 다른 글
| [HTML] head 태그 (2) | 2024.02.04 |
|---|---|
| [HTML] Form 태그 (0) | 2024.02.01 |
| [HTML] 이미지 & 멀티미디어 태그 (0) | 2024.01.31 |
| [HTML] 태그 (0) | 2024.01.30 |
| [HTML] VSCode Emmet (0) | 2024.01.30 |
