2. HTML의 특징 블록(block) 요소 vs 인라인(inline) 요소

HTML의 특징 파악하기

2-1 블록 요소와 인라인 요소

 

웹 브라우저의 공간 유무와 상관없이 hn태그나 p태그처럼 사용할 때마다 줄 바꿈 되는 태그가 있다.

이런 태그로 작성한 코드를 블록 요소(block element)라고 한다.

 

이와 반대로 a 태그나 span 태그처럼 공간이 부족할 때만 줄 바꿈되는 태그가 있는데, 이런 태그로

작성한 코드를 인라인 요소(inline element)라고 한다.

 

---

2-2). 블록 요소 (block element)

- 블록 수준 요소는 항상 새 줄에서 시작하며, 또한 전체 너비를 차지한다.

일반적으로 사용되는 두 가지 블록 요소는 <p>태그, <div> 태그를 사용한다.

 

<p> : HTML 문서의 단락을 정의한다.

<div> : 컨테이너 태그이다.

 

ex)

    <p>p 요소는 블록입니다.</p>
    <div>div 요소는 블록입니다.</div>

<p> 태그는 블록 요소이므로 전체 너비를 포함하고 있는것을 확인 할 수 있다.

<div> 태그 또한 블록 요소이므로 전체 너비를 포함하고 있는것을 확인 할 수 있다.

 

2-3).인라인 요소 (inline element)

- 블록 태그와는 반대로 공간이 부족할 때만 줄 바꿈이 되는 태그를 인라인 요소(inline element)라고 한다.

일반적으로 많이 사용하는 태그는 <a>, <span> 태그가 있다.

 

<a> : 링크로서의 기능을 한다.

<span> : 문장 단위로 텍스트 영역을 지정하는 것, CSS 스타일을 지정할 때 사용한다.

 

ex)

    <a href="#"> a 요소는 인라인 요소 입니다.</a>
    <span>span 요소는 인라인 요소 입니다.</span>

보다시피 a 요소는 inline element로 바로옆에 또다른 inline elemet가 올수 있다.

span도 마찬가지로 inline element 이다.

---

 

2-4) 인라인 요소(inline element) 블럭 요소(block element) 차이점

 

* 인라인 요소(inline element)

- 인라인 요소는 다른 블록 요소를 포함할 수 없다.

- 인라인 요소는 너비나 높이 값을 줄수 없다. (width, height)

- 대표적으로 (span>, <a>, <strong>, 태그 등이 있다.

 

* 블록 요소(block element)

-블록 요소는 너비나 높이 값을 줄 수있다.

- 대표적으로 <div>, <p>, <h1> ~ <h6>등의 태그가 있다.

 

긴 글 읽어주셔서 감사합니다.

부족한 설명은 댓글로 달아주시면 추가하도록 하겠습니다.

감사합니다. :)