궁금해요! 너를 알려줘! display

궁금해요! 너를 알려줘! display

안녕하세요. 선우에요.

지난 번 CSS를 배웠으니 그 중 제일 중요한 프로퍼티 display를 배워보려해요.

display는 무엇을 의미할까요? 맞아요! 전시하다 내보이다라는 뜻을 가지고 있어요.

이 뜻만 기억하고 있으면 문제없이 html 진도나갈 수 있어요.

그럼 시작해 볼까요?

display

display는 CSS에서 제일 중요한 프로퍼티에요. 왜 중요하냐구요?

바로 모든 엘리먼트의 속성을 부여해 레이아웃을 제어할 수 있기 때문인데요.

여기서 말하는 엘리먼트란 태그를 의미하기도 합니다. 엘리먼트가 더 큰 단위의 개념이니까요.

엘리먼트에는 display 속성이 디폴트로 블록(block) 또는 인라인(inline)이 들어가 있는데요.

속성에 대해서는 아래에서 배워보도록 할게요.

지금은 모든 엘리먼트에는 display 속성이 있으며 그 속성에 따라 레이아웃이 제어된다.

딱 여기까지만 알고 계시면 됩니다. 쉽죠?

display 속성은 어떤 것들이 있을까요?

display 속성은 아주 많지만 레이아웃을 그리는 block, inline, inline-block, none 4가지만 살펴보도록 할게요.

그 외 중요한 속성은 따로 묶어 추후 소개할 예정입니다.

저는 레이아웃을 그리기에 필요한 요소들만 정리하지만 다른 속성이 궁금하시면 여기를 클릭해 주세요.

- 블록(block)

블록 엘리먼트는 전체 한 줄을 사용하는 속성입니다. 

위의 그림을 보면 노란색 영역이 한 줄을 다 차지하고 있어요.

가장 쉬운 예를 들자면 p태그가 있어요. 

- 인라인(inline)

인라인 엘리먼트는 콘텐츠 영역 만큼 사용하는 속성입니다.

위의 그림을 보면 노란색 영역이 콘텐츠 영역 만큼 차지하고 있어요. 정확한 이해를 돕기위해 세로를 작게 표현했습니다.

가장 쉬운 예를 들자면 span, a 태그가 있어요.

- 인라인 블록(inline-block)

인라인 블록 엘리먼트는 콘텐츠의 가로, 세로 너비만큼을 사용하는 속성입니다.

위의 그림을 보면 노란색 영역이 해당 요소의 가로, 세로 너비만큼 차지하고 있어요.

인라인 블록은 주로 인라인 엘리먼트를 재정의할 때 사용합니다. 블록 요소에는 사용하지 않는 것을 권장해요.

- none

none은 해당 태그나 레이아웃을 사용하지 않는/그리지 않는 것을 말합니다.

위의 그림을 보면 노란색 영역이 없어요!

이미 만들어진 태그나 레이아웃을 숨길 때 사용하죠.

가령 한 가지 예를 들자면 탭을 그릴 때 첫번째 탭만 보여져야하고 나머지 탭은 보이지 않아야겠죠?

이때 나머지 탭들은 이미 그려져 있지만 보여지지 않도록 해야합니다. 맞아요! display:none은 이럴 때 사용합니다.

그렇다면 inline, inline-block의 차이는 뭘까요?

바로 가로, 세로 너비를 사용할 수 있냐 없냐의 차이입니다.

inline은 콘텐츠 영역 외 공간을 사용할 수 없어요.

아직 배우지는 않았지만, background-color나 border의 속성을 준 후,

<br />을 사용해 줄바꿈 처리를 하면 한 눈에 이해하실 수 있어요.

지금은 display에 어떤 속성들이 있는지만 알고 계시면 돼요!

차근차근 더 배우면 되니까요:D