<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>01_블럭요소와 인라인요소의 차이</title>
</head>
<body>
<h1>레이아웃을 구성하는 div, span태그</h1>
<mark>div{block$}*5</mark>
<div>block1</div>
<div style="background-color: pink;">block2</div>
<div style="background-color:#E8F95C; color: blue;">block3</div>
<div style="color:red">block4</div>
<div>block5</div>
<br>
<br>
<br>
<mark style="background-color: purple; color:white;">span{inline$}*5</mark>
<span>inline1</span>
<span>inline2</span>
<span style="background-color:#3CD6BC">inline3</span>
<span style="color:hotpink; background-color:lightblue;">inline4</span>
<span>inline5</span>
</body>
</html>
블럭요소는 브라우저의 한 블록을 다 차지하고
인라인 요소는 텍스트의 크기만큼만 블럭을 사용한다.
'HTML > code' 카테고리의 다른 글
| .html을 이용하여 원하는 페이지로 넘어가는 과제 (0) | 2023.03.28 |
|---|---|
| form tag를 이용한 과제 (0) | 2023.03.28 |
| div를 이용한 레이아웃 (0) | 2023.03.28 |
| 기본 폼태그의 활용 (0) | 2023.03.28 |
| sementic를 이용한 레이아웃 (0) | 2023.03.28 |
