HTML 블록요소 인라인요소 개념 및 차이점

오늘은 간단하지만 정말 중요한 개념을 배웠습니다. HTML에서 코딩시 흔하게 사용하는 <p> 태그라던지, <br> 태그라던지 하는 개념에 대한 부분이었습니다. 이 한 묶음의 태그를 "요소" 라고 말합니다. 예를 들자면, <p>티스토리는 참 재미있습니다.</p> 를 사용했을 경우, <p></p> 가 한쌍으로 묶였는데, 이것을 요소라고 보시면 됩니다.

 

요소에는 블록요소와 인라인요소라고 하는 개념이 존재합니다. 저도 처음 들었을 때는 대체 뭔소린가 싶었는데, 자세히 배워보니까 생각보다 이해하기 쉬운 것이었습니다. 한번 예를 들어서 알아보도록 하겠습니다.

 

브라켓으로 HTML 기본 구조를 작성합니다. 그리고 위와같은 태그로 한번 구성해 봤습니다. 헤드 태그 안쪽에 쉽게 설명을 위한 스타일 태그도 넣었습니다. 이렇게 하면 결과가 어떻게 얻어지는지 한번 보겠습니다.

 

그렇습니다. 이렇게 출력이 됩니다. 빨간색 백그라운드의 텍스트가 블록요소로 완성된 것이고, 녹색 백그라운드는 인라인 요소 입니다. 대충 차이점이 눈에 보이시나요? 간단히 정리해 보겠습니다.

 

블록요소

1. 줄 바꿈이 일어남.

2. 블록 요소 안에는 텍스트와 인라인 요소를 포함할 수 있음.

3. 블록 요소 안에 또 다른 블록 요소를 포함할 수 있음. (단, 예외도 존재함)

 

인라인요소

1. 줄 바꿈이 일어나지 않음.

2. 인라인 요소 안에는 텍스트와 인라인 요소를 포함할 수 있음.

3. 인라인 요소 안에는 블록 요소를 포함할 수 없음.

4. 인라인 요소와 텍스트는 블록 요소 안에 포함되어야 함.

 

이런 차이가 있습니다. 실제로 1번의 경우는 위의 결과물만 봐도 바로 알 수 있습니다. 현재 하얀색이 메인 백그라운드이고, 빨간색이나 초록색의 경우가 해당 요소에 적용된 배경색인데 블록요소의 경우는 줄바꿈이 일어났음을 알 수 있습니다. 반면 인라인요소는 그냥 한줄로 나란히 있습니다. 코딩에서는 strong 태그와 a태그를 한 줄 내려썼어도 옆으로 붙어서 출력되었습니다. 이게 가장 큰 차이라고 생각하시면 될 것 같습니다. 또한 인라인 요소 안에는 블록요소를 포함할 수 없습니다. 한 마디로 이렇게 되어야 합니다.

 

<a><h1>이렇게는 불가능</h1></a>

<h1><a>이렇게는 가능</a></h1> 

 

기타 나머지 내용은 위에서 언급한대로 이해하시면 됩니다.

 

그리고 body 안에 작성된 태그들의 스타일을 한번 지정해 보겠습니다. 백그라운드 색상에 추가로 영역까지 지정해 보겠습니다. 그러면 블록요소와 인라인요소가 어떻게 변하게 될까요?

 

결과물 입니다. 블록요소는 영향을 받는 반면, 인라인 요소는 영향을 받지 않는다는것을 알 수 있습니다. 스타일 중 블록요소는 100% 다 적용되는 반면, 인라인요소는 일부는 영향을 받지 않는다는 것을 확인할 수 있습니다.

 

아까 인라인요소는 블록요소 안에서 사용할 수 있다고 했으니, 지금까지 작업했던 인라인 요소들을 위처럼 P태그로 감싸보겠습니다.

 

그러면 블록요소로 영역이 지정되는 동시에, 인라인 요소는 인라인 요소대로 동작하고 있음을 알 수 있습니다. 이제 블록요소와 인라인요소가 대략 어떤 차이가 있는지, 수많은 HTML 태그들 중에서 인라인 요소와 블록 요소의 쓰임새를 구별지어 적절히 사용할 수 있을 것 같습니다. 끝.