CSS] display 속성 / block, inline, inline-block, none

Display 속성

display는 컨텐츠(element)의 가로 길이를 정하는 속성이다. 

block, inline, inline-block, none 4가지 벨류에 대해 알아보자. 

 

 

 

display의 밸류 4가지 

 

1 Block

 

가로 길이(width)가 화면 전체를 차지한다. 

기본 설정이 block으로 지정되어 있는  태그

 

 

html에서 h1을 입력해보면

html

 

글자는 몇 개없는데 가로 길이는 화면 끝까지 차지하는 것을 볼 수 있다. 

html에서 h1은 가로 화면 꽉차게 차지하라고 기본 설정 되어있다. 

가로길이가 화면 끝까지 차지하면 그 옆에 다른 컨텐츠가 올 수 없다.

 

 

h1은 가로 길이가 화면 끝까지 차지하기에 다른 element를 h1 옆으로 나란히 놓을 수 없다.

다른 element는 다음 줄로 내려간다. 

 

Hello World!를 2개 써보면 

옆으로 올 수 없기 때문에

아래로 가는 것을 볼 수 있다. 

 

 

block element는 가로 길이를 줄일 수 있긴하지만,

길이를 줄였어도 같은 선상에 다른 컨텐츠를 놓지 못한다. 

 

 

 

자주 쓰이는 block Elements

<p> paragraphs

<h1>~<h6> Headers

<div> divisions

<ol>, <ul>, <li> Lists and list items

<form> Forms

 

 

 

 

 

2 Inline

 

html에 이미지를 넣었을 때

세로 길이는 정해진 이미지 크기만큼만 차지하고,

가로 길이도 이미지 크기 만큼을 차지한다. 

 

가로길이가 화면에서 조금만 차지하면

그 옆으로 다른 컨텐츠도 나란히 놓을 수 있다. 

이런 성격을 가진 element를 inline이라고 한다.

이미지 나란히 놓기 가능 

 

<span>를 살펴보면 

만약 <p>a programmer.</p> 에서 pro에만 밑줄을 긋고 싶다면 

이렇게-->  a programmer.

 

html에서 <p>태그로 글자를 3파트로 나누고

css에서 밑줄 효과 넣으면 된다고 생각하겠지만 

결과는 각각 3줄 따로 분리되서 나온다. 

html

css

결과물

 

이런 경우 inline property를 가진 <span> 태그를 이용한다. 

<span>은 글자 범위만큼만 가로 길이를 차지해서 뒤에 바로 다른 글자가 올 수 있다.

고로 같은 줄에 다른 element가 올 수 있다. 

span에 class를 형성하고 효과를 준다. 

html

css

결과물

섹션 분리 

 

inline element의 단점은

딱 컨텐츠가 가지고 있는 사이즈 만큼만 차지할 뿐 

가로 길이를 조절할 수가 없다는 단점이 있다.

 

 

 

자주 쓰이는 inline Elements

<span> spans

<img>   images

<a>       anchors

 

 

 

 

 

3 Inline-Block

 

inline은 컨텐츠가 가지고 있는 사이즈 만큼만 차지할 뿐

가로 길이를 조절할 수가 없다는 단점. 

 

block은 길이를 줄일 수 있지만, 길이를 줄였어도

같은 선상에 다른 컨텐츠를 놓지 못한다는 단점. 

 

이 두 단점을 보안해서 가로 길이를 조절할 수 있고,

같은 선상에 컨텐츠를 놓을 수도 있는 것이 inline-block이다.

 

inline-block으로 고치고 싶으면 css에서 설정해 주면 된다.

 

 

html에서 <p>로 3줄을 쓰면 3줄이 나와야하지만 inline-block을 설정해 주면 나란히 3 단어가 놓인다.

html

css

결과물

<p> 태그를 옆으로 나란히 놓을 수 없지만

inline-block을 사용해서 나란히 놓았다. 

 

 

 

 

4 None

 

None은 해당 내용 자리 자체가 없어져 버린다.

 

<p> 2번째 줄에 none을 주었다.

html

css

결과물

World 글자와 자리가 아예 사라져 버렸다. 

퀴즈의 대답이나, 페이지를 숨길 때 등에 사용한다. 

 

 

---

 

숨기기 기능

 

숨기는 기능은 2가지가 있다.

 

1 display: none;  

위에 설명이 되었듯이 자리도 없어진다. 

 

2. visibility: hidden; 

자리는 비워둔다. 

html

css

결과물