JunO3O
공간 분할 태그
공간 분할 태그
2023. 3. 21. 03:01ㆍHTML
기본 공간 분할 태그 div / span
# 공간 분할 태그
ㅁ div 태그는 공간을 블록 형식으로 분할합니다.
ㅁ span 태그는 공간을 인라인 형식으로 분할합니다.
# 공간을 블록 형식으로 분할하기
ㅁ div 태그를 사용해 공간을 분할하면 각 태그가 한 행을 모두 차지합니다. 이를 블록 형식이라고 합니다.
<!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>Document</title>
</head>
<body>
<div> div 태그1 - 블록 형식으로 공간을 분할합니다.(1) </div>
<div> div 태그2 - 블록 형식으로 공간을 분할합니다.(2) </div>
<div> div 태그3 - 블록 형식으로 공간을 분할합니다.(3) </div>
<div> div 태그4 - 블록 형식으로 공간을 분할합니다.(4) </div>
<div> div 태그5 - 블록 형식으로 공간을 분할합니다.(5) </div>
</body>
</html>
# 공간을 인라인 형식으로 분할하기
ㅁ span 태그를 이용하면 각 태그는 자신의 글자 크기만큼 영역을 차지하며, 왼쪽에서 오른쪽으로 쌓이게 됩니다.
ㅁ 이것을 인라인 형식이라고 합니다.
<!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>Document</title>
</head>
<body>
<span> span 태그1 - 인라인 형식으로 공간을 분할합니다.(1) </span>
<span> span 태그2 - 인라인 형식으로 공간을 분할합니다.(2) </span>
<span> span 태그3 - 인라인 형식으로 공간을 분할합니다.(3) </span>
<span> span 태그4 - 인라인 형식으로 공간을 분할합니다.(4) </span>
<span> span 태그5 - 인라인 형식으로 공간을 분할합니다.(5) </span>
</body>
</html>
