[HTML] 블록과 인라인의 개념 (특징, 주의할 점)

블록과 인라인

h1, h2, h3, p, strong, br 사용

<h1>
        제일 큰 제목 h1
    </h1>
    <h2>
        Header2
    </h2>
    <h3>h3 + tab : 자동완성</h3>
    <p>
        글씨를 쓸 때 사용하는 태그
    </p>
    <strong>strong아무글자<br>
        행에서 드래그하지않고 ctrl + c, v 사용가능<br>
    </strong>

 

 

 

 

---

오른쪽 작성된 코드와 왼쪽 내용을 비교해보면
태그 내용은 모두 <br>을 통해 줄바꿈을 해줘야하는데
strong을 제외한 태그들은 <br> 태그를 통한 개행이 없는 것을 확인할 수 있다.

 

이유는 html을 구성하는 레이아웃 요소는 블럭과 인라인 두 가지로 구분되는데

 

블럭은 자신의 고유한 할당 영역이 있고 크기와 너비 등이 지정이 가능하다.

고유한 할당 영역이 있기에 수직으로 쌓이게된다.

그러므로 자동으로 개행이 된 태그들은 블록 속성임을 알 수 있다.

 

인라인은 내부의 내용이 있어야 영역이 생기고 크기와 너비 등이 지정이 안된다.

그리고 수평하게 가로로 계속 내용이 쌓인다.

 

위 내용은 <strong>만 인라인 태그이기에 가로로 내용이 쌓여 <br>이 필요하고
블럭 요소들은 가로 세로 모두 고유한 할당 영역을 가졌다.

 

 

그러므로 태그 작성 시 주의할 점은

 

블럭 안에 인라인은 포함 가능하지만

인라인 안에 블럭은 포함하지 않는다.

 

---

예제

    <!-- div, span은 레이아웃을 구성할 때 주로 사용한다. -->

    <div>블럭</div>
    <div>블럭</div>
    <div>블럭</div>
    <span>인라인</span>
    <span>인라인</span>
    <span>인라인</span>

---

    <!-- 블럭요소는 전체영역을 공간으로 가진다.

    안에는 블럭, 인라인이 들어갈 수 있다. -->

    <hr>
    <p>블럭</p>
    <h2>블럭</h2>
    <ul><li>블럭</li><li>블럭</li></ul>
    <div>블럭</div>
    <table><tr>블럭</tr></table>
    <hr>

 

---

    <!-- 인라인 요소는 태그 자체의 크기를 가진다.

    안에는 인라인 요소만 들어갈 수 있다. -->

    <a href="#">inline</a>
    <span>인라인</span>
    <b>인라인</b>
    <i>인라인</i>
    <img src="업로드할 이미지(경로)" alt="image" width="50" height="50">
    <strong>인라인</strong>
    <small>인라인</small>
    <input type="name">

 

            <div>

                <span>인라인</span>

            </div>

 

인라인 마지막 요소는 div 블럭으로 공간을 할당 후 넣었다.

---