[CSS] display : inline, block, inline-block 에 대해서 알아보자

 

 웹 페이지 클론 작업을 하다보니, CSS 레이아웃에 대한 이해가 낮다는 걸 스스로 알 수 있었다. 밀접하게 관련이 있는 display에 대해 명확하게 설명하지 못하고, 그저 활용할 줄만 알고 있었기 때문이다. 각설하고, 세 요소들 간의 관계에 대해서 자세히 알아보자. 

 

1. display란? 

[HTML] 인라인 요소(inline element)와 블록 요소(block element)에 대한 친절한 설명

 먼저 display에 대해서 알기 전에, 인라인 요소와 블록 요소가 각각 무엇이며, 어떤 관계인지 알지 못한다면 필자가 쓴 다음 글을 참고하자. Display 속성과 각각의 요소들은 밀접한 관계를 갖고 있기 때문이다. 

 

display 속성을 통해 레이아웃에 HTML의 요소가 블록과 인라인 요소 중 어느 쪽으로 처리할지, 혹은 화면에 나타내지 않을 것인지 등을 설정할 수 있습니다.
- MDN web docs

 

 이게 어떻게 가능할까? 바로 Display 속성은 CSS에 속하고, inline과 block 요소는 HTML에 속하기 때문이다. 우리는 HTML이 여러 태그들을 통해 웹 페이지의 구조(제목, 단락, 목록 등)와 그 밖의 정보(주소, 링크, 인용 등)들을 명시해주는 언어임을 이미 알고 있다. 또한 CSS은 HTML과 결합되어 글자 크기, 배경 색상 변경 등 HTML의 요소들을 디자인하기 위한 등장했다는 사실을 알고 있다. 

 그 사실들을 적용해보면, display란 HTML의 inline 요소와 block 요소 등을 변경하는 CSS의 속성임을 알 수 있다. (display 속성은 Flex와 Grid 그리고 Flow처럼 자식 요소의 레이아웃을 설정할 때에도 사용되지만, 지금 단계에서는 다루지 않겠다) 

 

inline, block, inline-block, table, none 등이 있다. 
- MDN web docs

 

 그렇다면 display 속성을 통해, 변경할 있는 범위는 어디까지인지 알아보자. inline과 block 값은 각각 inline을 block으로, block을 inline으로 변경시켜 줄 것임을 직관적으로 알 수 있다. 그 중 눈에 띄는, inline-block에 대해, inline과 block과의 비교를 통홰 알아보자. 

 

See the Pen JjXLgPG by joonho lee (@goldycoder) on CodePen.

 

1) display : inline과의 차이점은 display : inline-block을 통해, 해당 요소에 가로길이와 세로길이를 지정해줄 수 있다는 점이다. 또한 Padding, Margin 등 역시 적용될 수 있다는 것이다.  (그러나 위의 코드를 살펴보면, div 요소를 display:inline 처리하니 완벽하게 적용되진 않는 모습을 확인할 수 있다) 

block 요소는 줄바꿈 현상이 있다.

inline-block 요소는 줄바꿈 현상이 없다.

 

2) display : block과의 차이점은 display : inline-block은 줄바꿈 현상이 없다는 점이다. 

 

또한, 이를 활용하면 다음과 같이 화면의 크기에 따른 줄바꿈이 있는 레이아웃을 구성할 수도 있다. 

 

See the Pen inline-block 연습 by joonho lee (@goldycoder) on CodePen.

 

display 

 

developer.mozilla.org/ko/docs/Web/CSS/display

display

css layout - display : inline-block

 

www.w3schools.com/css/css_inline-block.asp