안녕하세요, 온라인 코딩 스쿨 코드잇입니다.

​

이번에는 홈페이지의 레이아웃을 구성할 때 사용하는 display 속성을 알아보겠습니다.

HTML은 홈페이지의 구조를 담당하는데, 그 중에서도 태그를 사용합니다. display 속성의 종류에는 inline, block, inline-block 등등 이 있는데요, 모든 태그는 display 속성을 갖고 있으며, 딱 하나의 display 속성만을 갖습니다.

​

예를 들어서

이미지를 넣기 위해 사용하는 <img> 태그의 display 속성은 inline 이고,

heading을 나타낼 때 사용하는 <h1> 태그는 display 속성이 block입니다.

​

먼저 inline 요소를 살펴보면,

​

- width/height 적용 불가

- margin/padding-top/bottom 적용 불가

- line-height 원하는 대로 적용 불가(span에 적용안되고 감싸고 있는 div 전체 크기에만 영향 등)

​

다른 요소들과 같은 줄에 머무르려고 하는 성질이 있고,

가로 길이는 필요한 만큼만 차지하는 성향이 있습니다.

​

실제 코드로 보여드릴게요

이런식으로 간단하게 이미지 태그를 4개 넣어 보겠습니다.

그럼 결과가 어떻게 될까요?

​

<실행 결과>

그러면 잘생긴(?) 사진 4개가 위 사진처럼 배치됩니다!

화면을 보시면 사진 4개가 옆으로 배치된 것을 확인 할 수 있는데요.

display 속성이 inline인 태그는 필요한 만큼 가로 공간을 차지합니다. 즉, 사진 크기가 100px이면 100만큼 차지하는 거죠!

​

만약 새로운 img 태그를 추가한다면 새로 추가된 이미지는 기존의 위치에 옆(아래 사진의 노란색 상자 위치)에 배치됩니다.

​

​

이번에는 display 속성이 block 요소에 대해서 알아보겠습니다.

먼저 heading을 담당하는 <h1> 태그는 display 속성이 block인데요.

​

block 요소는 가로 공간을 최대한 많이 쓰려고 하는 경향이 있습니다.

​

- width/height 적용 가능

- margin/padding-top/bottom 적용 가능

- line-height 적용 가능

​

아래와 같이 코드를 작성해보겠습니다.

​

1.display속성이 block입니다.
2.display속성이 block입니다.
3.display속성이 block입니다.
4.display속성이 block입니다.

​

<실행결과>

​

display 속성이 block 이면 공간을 최대한 사용하기 때문에 위 사진처럼 줄바꿈이 됩니다.

이 말이 무슨 말인지 감이 잘 안 오시죠?

​

자세한 것은 브라우저에 검사 기능을 활용하면 알 수 있는데요.

검사 기능으로 <h1>태그를 살펴보면 파란색으로 차지하고 있는 공간이 나오는데, 위 사진처럼 한 줄을 다 쓰고 있는 것을 알 수 있습니다.

​

이제 display 속성이 inline 과 block인 요소의 차이 이해하셨나요?

​

모든 태그는 1개의 display 속성을 갖는데요. display 속성은 inline과 block 말고도 inline-block이라는 것도 있습니다!

​

inline-block은 어떤 성질을 가지고 있을까요? 그리고 언제 활용하면 좋을까요?

HTML/CSS가 좀 더 궁금하시다면 코드잇 강의를 수강하세요!

​

​