HTML에서 blockElement를 사용해보자.
div, p, h가 있다.
div는 주로 문단, 영역을 나타낼 때 사용하고 다른 요소를 포함 시키는 용도로 사용한다.
p는 하나의 단락을 나타낸다.
h는 주로 제목을 나타낼 때 사용하고 h1~h6까지 크기가 다양하다.
Step03_blockElement.html
<!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>Step03_blockElement.html</title>
</head>
<body>
<div>div 요소는 주로 문단을 나타낼 때 사용합니다.</div>
<div>div 요소는 주로 다른 요소를 포함 시키는 용도로 사용합니다.</div>
<div>문단3</div>
<div>문단4</div><div>문단5</div><div>문단6</div>
<div>
<p>단락 1 입니다.</p>
<p>단락 2 입니다.</p>
<p>단락 3 입니다.</p>
</div>
</body>
</html>
Step03_blockElement2.html
<!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>Step03_blockElement2</title>
</head>
<body>
<p>
안녕하세요!
오늘부터 본격적으로 시작이군요
열심히
재미있게 공부해 봅시다.
</p>
<p>
안녕하세요! <br>
오늘부터 본격적으로 시작이군요 <br>
열심히 <br>
재미있게 공부해 봅시다. <br>
</p>
</body>
</html>
Step03_blockElement3.html
<!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>Step03_blockElement3.html</title>
</head>
<body>
<h1>대제목</h1>
<h2>중제목</h2>
<h3>소제목</h3>
<h4>hn 요소도 block 요소 입니다.</h4>
<h5>h1~h6까지 있습니다.</h5>
<h6>h6입니다.</h6>
<p>p 요소는 주로 문자열로 구성된 단락(paragraph)를 구성할 때 사용합니다.</p>
<p>p 요소도 역시 block element 입니다.</p>
<p>동쪽으로 가면 <br> 귀인을 만나요! </p>
</body>
</html>'WEB' 카테고리의 다른 글
| [HTML] 목록 만들기 / ul, ol, dl (0) | 2021.10.06 |
|---|---|
| [HTML] span (0) | 2021.10.06 |
| [HTML] <img src="" alt=""> 사용하여 이미지 삽입하기 (0) | 2021.10.06 |
| [HTML/CSS/JavaScript] 주석 (0) | 2021.10.06 |
| [HTML/CSS/JavaScript] 기본 (0) | 2021.10.06 |
