21. display

이번 포스팅에서는 display 속성에 대하여 알아보겠습니다.

모든 요소는 기본적으로 고유의 display 값을 지니고 있는데요.

해당 display 값에 따라 block level, inline level 등의 박스 유형이 결정되게 됩니다.

display 속성으로 요소의 고유 display 값을 변경하여 유연하게 대응할 수 있으니 확실하게 익혀두세요.

 

 

1. display

서론에서 말씀드렸다시피 display 속성은 박스 유형을 결정하는 속성인데요.

display 속성은 기본 값이 일정하게 정해져있는 것이 아닌, 요소에따라 결정되고 있습니다.

display의 속성 값으로는 inline, block, inline-block, none이 있으며, 하나 하나 알아보도록 하겠습니다.

 

2. inline

inline 속성 값은 inline level 요소처럼 표현되게 해줍니다.

inline level의 특징으로는 공백과 개행에 대하여 하나의 여백으로 판단한다는 것인데요.

이러한 특징때문에 inline과 inline-block의 경우 태그 사이에 공백이나 개행이 존재하는 경우 약 4px의 여백을 가지게 됩니다.

심화 과정이긴 하지만 이러한 여백을 없애기 위해서 부모 요소에 font-size:0;을 선언해주기도 합니다.

 

3. block

block 속성 값은 block level 요소처럼 표현되게 해주는데요.

block level은 앞선 포스팅에서 설명한 width, height, 그리고 boxmodel에서 설명한 margin, padding, border값을 모두 적용할 수 있습니다.

inline level은 block level과는 다르게 적용되지 않는 속성이 있다는 것이 차이점입니다.

 

4. inline-block

inline-block 속성 값은 inline level과 block level의 특징을 섞어두었다고 생각하시면 되는데요.

inline level처럼 텍스트만큼의 크기를 가지고 있지만, block level처럼 width, height, margin, padding, border 값을 모두 적용할 수 있다는 특징이 있습니다.

inline-block을 통하여 다양한 layout 구축이 가능하다는 장점이 있습니다.

 

5. none

none 속성 값은 화면에 none 속성 값을 지정한 요소가 노출되지 않도록 해주는데요.

none 속성 값을 사용했다가 특정 이벤트가 발생하거나 클래스가 붙는 경우에 block 처리는 해줌으로써 show/hide 기능을 구현할 수 있습니다.

 

마지막으로 display와 boxmodel의 관계를 표로 정리해보자면 아래와 같습니다.

 

display	width	height	margin	padding	border
inline	X	X	O (좌/우)	O (좌/우)	O (좌/우)
block	O	O	O	O	O
inline-block	O	O	O	O	O

 

여기까지 display 속성에 대하여 알아보았는데요.

실무에서도 display 속성은 다양한 layout 제작에 있어서 많이 사용됩니다.

다양한 layout 구축을 위해서는 필수로 익혀야하는 속성이니, 많은 연습을 해두는 것을 권해드립니다.

오늘도 읽어주셔서 감사합니다.

좋은 하루 보내세요! :)