[HTML] 블럭요소

- 특정영역에 대해서 범위를 지정할 수 있다.

- 범위를 지정할 때 쓰는 코드는 여는태그와 닫는태그가 확실하게 있어야 한다.

  ex) <h1> </h1> | <p> </p> | <ul> /<ul> | <div> </div> | <span> </span>

---

1. 블럭요소

블럭요소의 크기는 자신이 감싸는 내용과 상관없이 자신의 영역을 가진다.

 

1) 블럭(범위가 없는 경우)

Text1
Text2
Text3

 

2) 블럭(범위)이 있는 경우

<div>Text4</div>
<div>Text5</div>
<div>Text6</div>

 

-> <div>태그는 HTML문서에서 특정영역(division)이나 구획(section)을 정의할 때 사용한다.

 

3) 블럭인용구(blockquote)

<blockquote>Text7</blockquote>
<blockquote>Text8</blockquote>
<blockquote>Text9</blockquote>

 

-> <blockquote> 태그는 탭기능이 기본특성으로 내제되어 있다.

 

4) <pre> </pre>

<pre>
    서울특별시
    송파구     올림픽로 300
    롯데     월드     타워     123층
</pre>

-> <pre>태그는 엔터(줄바꿈) / 스페이스바(띄어쓰기)를 인식하게 된다.

---

2. 인라인요소 inline

<strong>진하게</strong>
<u>밑줄</u>
<i>기울기</i>
<a>링크</a>
<span>롯데타워</span>
<textarea cols="10" rows="3"></textarea>

---

3. block요소의 크기

<div style="background-color: darorchild;">DIV</div>
<blcokquote style="background-color: aqua;">BLOCKQUOTE</blockquote>
<pre style="background-color: charteuse;">PRE</pre>
<h1 style="background-color: gold;">H1</h1>

<ul style="background-color: darkgreen;">
    <li>JAVA</li>
    <li>PYTHON</li>
</ul>

---

4. inline요소의 크기

<strong style="background-color: skyblue;">이익준</strong>
<span style="background-color: khaki;">양석형</span>

 

<div style="background-color: lightpink; width: 250px; height: 150px;"></div>

-> 블럭요소와 인라인요소는 CSS에서 주로 편집한다.