초보개발자의 성장블로그
HTML 42 <div> 태그와 <span> 태그
프론트엔드/HTML2021. 4. 3. 14:59
div 공간분할
div 첫번째영역입니다.
div 두번째영역입니다.
div 세번째영역입니다.
span 공간분할
span 첫번째영역입니다. span 두번째영역입니다. 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>
<h3>div 공간분할</h3>
<div style="background-color: #FFFF00;">div 첫번째영역입니다.</div>
<div style="background-color: #00FF00;">div 두번째영역입니다.</div>
<div style="background-color: #FF00FF;">div 세번째영역입니다.</div>
<p/>
<h3>span 공간분할</h3>
<span style="background-color: #FFFF00;">span 첫번째영역입니다.</span>
<span style="background-color: #00FF00;">span 두번째영역입니다.</span>
<span style="background-color: #FF00FF;">span 세번째영역입니다.</span>
</body>
</html>div/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>
<h3>div/span 공간분할조합</h3>
<div style="height: 70px; background-color: #FFFF00;">머리말영역</div>
<div style="height: 50px; background-color: #FF00FF;">본문영역</div>
<span style="background-color: #FF0000;">왼쪽텍스트영역</span>
<span style="background-color: #FFFFFF;">가운데텍스트영역</span>
<span style="background-color: #0000FF;">오른쪽텍스트영역</span>
<div style="height: 40px; background-color: #FFFF00;">꼬리말영역</div>
</body>
</html>'프론트엔드 > HTML' 카테고리의 다른 글
| HTML 43 <iframe> 태그 (4) | 2021.04.03 |
|---|---|
| HTML 40 <meter> 태그와 <progress> 태그 (0) | 2021.04.03 |
| HTML 39 <form>태그 초기화 양식 만들기 (2) | 2021.04.03 |
| HTML 38 <form> 태그 제출 양식 만들기 (0) | 2021.04.03 |
| HTML 37 <form>태그 POST방식 (0) | 2021.04.03 |
댓글()