CSS 쉽게 배우기 | 디스플레이 (Display)

CSS display로 요소의 보이는 방식 설정하기

 

안녕하세요

이번 편에서는 요소의 표시 방식(?)에 대해서 알아볼게요

표시 방식이라고하면 뭔가 말이 좀 이상한데

쉽게 말해서 요소를 숨기고 싶다, 안 보이게 하고 싶다, 등

요소가 어떻게 표시돼야하는지를 설정하는 겁니다

 

모든 요소들은 기본의 표시 방식이 있는데

이 방식을 다르게 설정하면 스타일링의 자유도도 높아집니다

 

 

기본 디스플레이 방식 값

디스플레이를 배우기 전에 위에서 말한 요소들의 기본 디스플레이 값을 먼저 볼게요

요소들에 기본으로 설정된 디스플레이 값은 block 또는 inline입니다

 

block값은 요소들이 레고처럼 세로로 나열되는 방식이고

inline값은 요소들이 한 줄에 같이 나열되는 방식입니다

 

block을 기본 값으로 사용하는 요소중 예로는 <p>, <div>가 있고

inline을 기본 값으로 사용하는 요소중 예로는 <a>, <img>가 있습니다

 

 

 

 

 

다른 디스플레이 방식 값

block과 inline 말고도 다른 종류의 디스플레이 값들이 있는데

그중에서도 대표적으로

• inline-block
• none
• flex
• grid

이 있습니다

 

flex와 grid는 이번 편에서 다루기엔 큰 주제여서

이 두 가지는 따로 나눠서 다룰예정입니다

 

 

CSS None

none은 요소를 숨길 때 사용됩니다

이 설정은 요소가 처음부터 없었던 것처럼

그 요소의 자리에 빈 공간이 생기지 않습니다

 

CSS display inline-block

inline과 inline-block 둘 다 같은 줄에 표시됩니다

그럼 이 둘의 차이점은 뭘까요?

 

이 둘의 제일 큰 차이점은 스타일의 적용 방식입니다

inline요소에는 넓이와 높이를 설정할 수 없습니다

하지만, inline-block요소에는 block요소처럼 넓이와 높이를 설정할수 있습니다

 

다른 차이점은 마진과 패딩의 적용 방식입니다

inline요소에는 상, 하 패딩/마진을 존중하지 않습니다

다시 말해서, inline요소의 상, 하 패딩/마진은 주위 내용/요소와 상호작용하지 않고 가릴수 있습니다

하지만, inline-block요소에는 상,하 패딩/마진이 정상적으로 적용돼서 주변 내용/요소와 상호작용 합니다

 

 

 

 

 

 

오늘은 짧게 요소의 디스플레이 설정을 알아봤습니다

앞서 말했듯이 flex와 grid설정은 다룰게 많기 때문에 따로 나눠서 다루겠습니다

 

 

수고하셨습니다

 

 

끝!