[CSS] display속성 block, inline, inline-block 정리 [3/17 Study]

 

 

display속성 block, inline, inline-block 정리

 

 

1. display: block;

: block 요소의 의미는, 이 요소 바로 옆(좌우측)에 다른 요소를 붙여넣을 수 없다는 뜻입니다.

블록 속성을 가지고 있는 태그는 기본적으로 너비 100% 속성을 가지고 있습니다.

화면의 가로 폭을 100%로 완전히 차지하기 때문에, 다음 요소가 양 옆으로 붙을 공간이 없어서 자연히 줄 넘김이 된다.

따라서 display 속성이 block으로 지정된 엘리먼트는 전후 줄바꿈이 들어가 다른 엘리먼트들을 다른 줄로 밀어내고 혼자 한 줄을 완전히 차지합니다.

예를 들어서 p, li, div, h1 등이 모두 block 요소에 해당하는 태그들입니다.

 

 

inline 요소와 다르게 margin, pedding, width, height 속성을 정의하면 모두 적용됩니다.

형태를 쉽게 제어할 수 있는 속성 때문에 대부분 블록 속성을 가진 태그를 화면 구성이나 레이아웃에 사용합니다.

특정 태그가 블록 요소인지 아닌지 가장 쉽게 파악하는 방법은, CSS로 배경색을 입혀보는 것입니다.

예시에서 배경색이 화면 폭을 모두 차지하는 경우, 그 태그는 블록 요소 태그임을 알 수 있습니다.

 

 

2. display: inline;

: inline이란 이라는 말 그대로 inline 요소는 요소끼리 서로 한 줄에, 바로 옆에 위치할 수 있다는 뜻입니다. 

대표적인 inline 엘리먼트로 span이나 a태그 등을 들 수 있습니다.

inline 엘리먼트은 width와 height 속성을 지정해도 효과가 적용되지 않습니다. 

👉 해당 태그가 마크업하고 있는 컨텐츠의 크기 만큼만 공간을 차지하도록 되어 있기 때문 입니다. 

또한, margin과 padding 속성은 좌우 간격만 반영이 되고, 상하 간격은 반영이 되지 않습니다.

 

 

 

 

 

3. display: inline-block;

: display 속성이 inline-block으로 지정된 엘리먼트는 기본적으로 inline 엘리먼트처럼 한 줄에 다른 엘리먼트들과 배치됩니다.

하지만 inline 엘리먼트에서 불가능하던 width와 height 속성 지정 및 margin과 padding 속성의 상하 간격 지정이 가능해집니다.

👉 즉 inline의 성질을 가지면서 동시에 사용자가 원하는 대로 모형을 꾸밀 수 있습니다.

button, input 태그 등이 대표적인 inine-block 요소 입니다.

inline-block 엘리먼트는 명시적으로 해당 엘리먼트의 스타일을 display: inline-block로 지정해주어야 합니다.

 

 

 

 

 

 

 

https://velog.io/@shin6403/CSS-inline-inline-block-block-%EB%9E%80

CSS inline, inline-block, block 란?

사진은 위 블로그에서 참조하였고 공부하였습니다.

 

 

 

 

🔥마무리

display 속성값인 inline과 block, inline-block에 대해서 알아보았습니다. 

참고로 <span>태그는 inline 속성값을 가지고, <div>태그는 block 속성값을 가지는 이유는  user agent stylesheet이라고 불리는 브라우저의 내장 스타일이 적용되서 그렇습니다.(개발자도구에서 확인 가능 합니다.)

이렇게 HTML 태그 별로 기본적으로 적용되어 있는 display 속성값은 원하는 값으로 CSS를 이용하서 자유롭게 변경이 가능합니다.

앞으로 display 성질들을 유념하면서 사용하도록 주의해야겠습니다!

오늘도 화이팅😊