[03-5] CSS 기본기 익히기: 블록 요소와 인라인 요소 태그 개념 정리!

[03-5] CSS 기본기 익히기: 블록 요소와 인라인 요소 태그 개념 정리!

 

 

HTML태그는 크게 블록 요소와 인라인 요소로 나뉘어져 있습니다. 요소의 특성에 따라 CSS가 적용안될 때가 있으니 꼭 알아야할 기본 코딩상식이라 할 수 있죠. 태그의 크기와 테두리 등을 지정할 때 블록 요소와 인라인 요소의 태그에 따라 다르게 적용됩니다. 이번 포스팅에서는 요소 태그는 어떤 것이 있고 어떤 특징이 있는지 알아봅니다.

 

 

---

 

 

 

블록 요소 vs 인라인 요소

---

 

분류	태그	특징
블록 요소	h1~h6, p, ol, ul, dl, div, header, footer, section, article, aside, nav	1. 줄을 자동으로 바꾼다. 2. 너비와 높이를 지정할 수 있다. 3. 너비를 지정하지 않으면 부모 요소 너빗값의 100%를 상속받는다. 4. 블록 요소와 인라인 요소 모두 묶을 수 있다.
인라인 요소	strong, em, a, span	1. 자동 줄 바꿈이 되지 않고 옆으로 나열된다. 2. 너비와 높이를 지정할 수 없다. 3. 인라인 태그를 사용한 텍스트의 크기가 해당 요소의 크기가 된다. 4. 인라인 요소만 묶을 수 있다.

 

블록 요소는 웹 페이지의 영역을 구분하는 레이아웃과 관련되고, 인라인 요소는 글의 서식과 관련된다는 특징이 있습니다.

 

 

 

위 표에 있는 태그들이 어떤 역할을 하는지 알고 싶다면 이 포스팅을 참고하시면 됩니다!

[02-1] HTML 필수 태그 정리: 뼈대를 만들어 보자!

 

 

블록요소와 인라인요소의 특징을 이미지로 쉽게 알아보도록 하겠습니다.

 

 

 

 

 

 

 

01. 블록 요소와 인라인 요소 차이

먼저 HTML에 블록 요소인 <p> 태그 안에 내용을 아무거나 써줍니다. 그리고 특정 내용을 인라인 요소인 <span> 태그로 감싸주고 강조하고 싶은 부분을 마찬가지로 인라인 요소인 <strong> 태그로 감싸줍니다.

 

 

 

그러면 밑의 화면처럼 출력되는 모습을 확인할 수 있습니다.

 

 

 

 

 

 

---

 

 

1) 자동 줄 바꿈

---

 

그 다음 CSS에서 속성을 부여해줍니다. 저는 <p>태그에 2px두께의 테두리를 치고 색깔을 회색으로 했습니다. 그리고 <strong>태그는 좀더 두꺼운 3px 두께의 초록 선을 쳤습니다. 그러면 아래와 같이 화면에 출력됩니다.

 

 

 

보시면 알겠지만 <p>태그는 줄바꿈을 해서 보여주지만 <strong>태그는 줄바꿈이 되지 않죠. 이처럼 블록 태그는 줄바꿈이 되고 인라인 태그는 줄바꿈이 안됩니다. 

 

 

 

 

 

---

 

 

2) 너비, 높이 속성

---

 

그렇다면 높이와 너비속성을 입력하면 어떻게 될까요? 두 태그에 높이 속성을 부여해봅니다.. <p>태그에는 30px을, <strong>태그에는 20px의 높이를 줬습니다.

 

 

 

그러면 아래 화면처럼 <p>태그는 반영된 모습을 볼 수 있지만 <strong> 태그는 전혀 적용이 안 된 모습이 출력됩니다. 여기서 알 수 있는 사실은 블록 요소는 높이와 너비 속성을 지정할 수 있지만, 인라인 요소는 너비와 높이를 지정할 수 없다는 것입니다.

 

 

 

 

---

 

 

 

02. 블록 속성 바꾸기

실무에서는 인라인 요소에 너빗값과 높잇값을 강제로 지정해야 할 때가 있습니다. 그럴 땐 블록 요소, 인라인 요소 둘다 쓰는 속성을 지정하거나, 인라인 요소를 블록 요소로 만들 수 있습니다. 하나씩 알아보도록 하겠습니다.

속성명	설명
display: inline-block	인라인과 블록 요소의 속성 모두 사용한다.
display: block	블록 요소의 속성으로 바꾼다.
display: inline	인라인 요소의 속성으로 바꾼다.

 

 

 

 

 

 

 

1) inline-block

---

 

밑의 이미지처럼 인라인 태그에 ⠀display: inline-block;⠀을 입력하면 인라인 태그가 이제 블록 요소의 속성도 사용할 수 있게 됩니다. 인라인 요소와 블록 요소의 속성을 모두 사용한다는 뜻입니다.

 

 

 

이렇게 위의 화면처럼 <strong>태그의 테두리의 높이가 25px로 적용된 모습을 보실 수 있습니다. 블록요소처럼 높이값을 지정할 수 있게 된거죠. 그러면서 인라인 속성도 함께 가지고 있어 줄바꿈은 되지 않습니다.

 

 

 

 

 

 

---

 

 

 

 

2) display: block

---

 

아니면 아예 인라인 요소를 블록 요소로 바꾸어 버릴 수도 있습니다. ⠀display: block;⠀을 입력해주면 됩니다. 인라인 요소를 블록 요소로 바꾼다는 뜻입니다.

 

위의 화면처럼 인라인 요소였던 <strong> 태그가 블록 요소가 되어 줄바꿈이 된 것을 보실 수 있습니다.

 

 

 

 

---

 

 

 

 

3) display: inline

---

 

반대로 블록 요소를 인라인 요소로 바꾸어버릴 수 있습니다. ⠀display: inline;⠀을 입력해주면 됩니다. 

 

그러면 이런식으로 화면에 출력됩니다. <p>태그가 인라인 요소가 되면서 줄바꿈을 못하고 일렬로 배열된 모습입니다. 인라인 요소가 되어서 높이 속성이 하나도 반영되지 않았습니다.

 

 

 

 

 

 

 

 

 

 

---

여기까지 HTML태그가 크게 블록 요소와 인라인 요소로 나뉘는 것과 그 차이점에 대해서 확인했습니다. 요소의 특징을 잘 알아두고 CSS로 속성을 부여해야 나중에 원하는 대로 화면에 구현할 수 있기 때문에 꼭 알아둬야할 상식입니다. 다음 포스팅에서는 웹 페이지의 배경을 꾸미는 방법에 대해 알아보도록 하겠습니다!