블록, 인라인, 인라인 블록 성질과 정렬 방법

블록, 인라인, 인라인 블록 엘리먼트의 성질과 정렬 방법에 대해 에 대해 알아보겠습니다.

 

block, inline, inline-block은 HTML을 구성하는 태그들의 가장 기초적인 성질라고 보시면 되겠습니다.

 

블록, 인라인, 인라인 블록은 태그마다 기본적으로 가지고 있는 성질이기도 하고, display명령을 통해 임의로 바꿀 수도 있습니다.

 

이것들을 알아야하는 가장 큰 이유는 CSS 정렬일 것 입니다.

 

태그를 원하는 크기와 정렬로 설정하기 위해, 태그의 display 속성이 어떤지 알아봅시다.

블록 엘리먼트

 

<div>, <h1>, <p>, <ul>, <ol>, <form> 등의 태그가 해당됩니다.

 

블록 엘리먼트의 특징은 다음과 같습니다.

 

1. 메모리에 행단위로 저장됩니다.
2. 기본적으로 너비가 100%로 생성되어, 자동으로 줄바꿈이 됩니다.

 

자주 쓰는 HTML 태그들이 대부분 블록 요소입니다.

 

참고로 display : none;을 해서 요소를 감추었다가 보일 때도 display : block을 자주 사용합니다.

 

블록 엘리먼트의 정렬

 

기본 너비가 100%이기 때문에, 블록 엘리먼트를 정렬할 때는 width를 줄여야 배치, 정렬이 가능합니다.

 

 

인라인 엘리먼트

 

<span>, <a>, <img> 등의 태그가 해당됩니다.

 

인라인 엘리먼트의 특징은 다음과 같습니다.

 

1. 메모리에 열단위로 저장됩니다.
2. 내용이 담긴 크기 만큼만 영역을 차지합니다.
3. 줄바꿈이 없습니다.

 

인라인 블록은 내용물 만큼의 크기를 가지기 때문에, 너비 높이 패딩 마진 등을 바꿀 수 없습니다.

 

인라인 엘리먼트의 정렬

 

크기나 정렬을 바꾸려면 <div>등의 블록 엘리먼트 안에 넣어서 바꾸거나, display : inline-block으로 바꿔주면 됩니다.

 

예를 들면 a, span, img 등의 인라인 성질의 태그를

 

div나 p등의 블록 성질의 태그 안에 넣어서 사용합니다.

 

참고로 블록 엘리먼트도 CSS에서 display : inline으로 선언해 바꿔주면 엘리먼트 사이사이에 들어갈 수 있습니다.

인라인 블록 엘리먼트

 

<button>, <input>, <select> 등의 태그가 해당됩니다.

 

인라인 블록 엘리먼트의 특징은 다음과 같습니다.

 

1. 외부에서는 인라인처럼 내용물만큼의 크기를 가집니다.
2. 내부에서는 블록처럼 너비 높이 마진 설정이 가능합니다.

 

인라인 블록은 인라인의 성질과 블록의 성질을 모두 갖고 있습니다.

 

조금 헷갈리실 수 있는데, 그냥 '글자'라고 이해하면 쉽습니다.

 

 

아시다시피 글자는 크기도 변경할 수 있고, 정렬과 줄간격 등을 자유자재로 설정할 수 있습니다.

 

패딩 마진도 설정할 수 있습니다. 마치 블록 엘리먼트 처럼요.

 

그러나 블록 엘리먼트처럼 처음부터 한 줄 을 통째로 차지하지는 않습니다. 

 

인라인 엘리먼트처럼 기본적으로는 내용물 만큼의 크기를 가지지만 크기 등을 변경할 수 있습니다.

 

인라인 블록은 웹 사이트의 메뉴나 내비게이션 바를 만들 때 자주 사용합니다.

인라인 블록의 정렬

 

인라인 블록은 블록이나 인라인보다 정렬하는게 어렵게 느껴질 수 있습니다.

 

그러나 앞서 얘기했듯이 그냥 글자라고 생각하면 됩니다. 

 

인라인 블록이 담긴 부모 태그에 text-align이나 line-height로 정렬할 수 있습니다.

 

인라인 블록이 담고 있는 자식 태그를 display: inline-block로 바꾸고 vertical-align등을 이용하여 정렬할 수 있습니다.

 

 

마무리

 

처음 엘리먼트 속성을 볼 때는 뭐가 뭔지, 어떻게 써야하는지 잘 와닿지 않을 수 있습니다.

 

그러나 자주 쓰는 태그는 많지 않으니까 코딩을 하다보면 어떤 태그가 블록이고, 인라인이고, 인라인 블록으로 만들면 편리할지 감이 오실 겁니다.

 

따라서 하나하나 외울 필요는 전혀 없습니다. 이런 성질들이 있구나 정도로 이해하고 코딩하면서 CSS에서 display와 크기 정렬 등을 바꿔보면서 익혀보시는 것을 추천합니다.

 

 

---- 2022.07.21 업데이트

 

디스플레이 속성 변경을 비롯해, CSS 레이아웃을 위한 기초적인 명령어들의 핵심 정리도 참고해보세요.

 

CSS float, display, visibility, opacity 요약 정리

 

이상으로 블록, 인라인, 인라인 블록 성질과 정렬 방법에 대해 알아보았습니다. 읽어주셔서 감사합니다.