[CSS] display 속성 (인라인과 블록)

display 속성

HTML 요소를 화면에 표시하는 디스플레이 방식에는 인라인(inline)과 블록(block)이 있다.

 

1. display: inline

div {
    background-color: #eeeeee
}
span {
    display: inline;
    border: solid 1px black;
}

<div>
    글자1 <span>안녕하세요!</span> 글자2
</div>

 

실행 결과

인라인 방식에서는 HTML 요소를 수평 방향으로 표시하고 줄 바꿈이 일어나지 않는다.

 

2. display: block

div {
    background-color: #eeeeee
}
span {
    display: block;
    border: solid 1px black;
}

<div>
    글자1 <span>안녕하세요!</span> 글자2
</div>

실행 결과

블록 방식에서는 HTML 요소가 브라우저 화면에 표시될 때 전체 행(하나의 행)을 차지하여 앞 뒤로 자동 줄 바꿈이 일어남.

 

3. display: inline-block

div {
    background-color: #eeeeee
}
span {
    display: inline-block;
    border: solid 1px black;
}

<div>
    글자1 <span>안녕하세요!</span> 글자2
</div>

실행 결과

인라인-블록에서는 인라인 방식과 블록 방식의 특성을 모두 갖는다.

현재의 예제에서는 줄바꿈이 일어나지 않고 수평 방향으로만 표시되는 것만 눈에 보이는데

블록 방식의 특성인 박스 크기가 그대로 적용될 것인데 추가 예제를 보면 차이를 느낄 수 있다.

 

4. display: none

div {
    background-color: #eeeeee
}
span {
    display: none;
    border: solid 1px black;
}

<div>
    글자1 <span>안녕하세요!</span> 글자2
</div>

실행 결과

display: none은 HTML 요소를 화면에 감추는데 사용한다.

 

5. display 속성을 지정하지 않으면?

div {
    background-color: #eeeeee
}
span {
    border: solid 1px black;
}

<div>
    글자1 <span>안녕하세요!</span> 글자2
</div>

실행 결과

<span> 태그에 display 속성을 지정하지 않으면

<span> 태그가 가지는 기본 display 속성이 되는데 이때 인라인(inline)을 갖는다.

<span> 태그 외에도 모든 요소들은 기본 display 속성 초기값이 설정되어 있다.

 

inline과 block 추가 예제

1. inline

* { 
    margin:0; 
    padding:0; 
}
span {
    width: 100px;
    height: 100px;
    background-color: yellow;
    border: solid 1px black;
}

<div>
    글자1 <span>안녕하세요!</span> 글자2
</div>

실행 결과

<span> 태그에 display 속성을 지정하지 않아 초기 값인 inline 방식이 적용 되었다.

눈여겨봐야 할 것은 span 태그에 좌우 마진은 적용이 되었는데 상하 마진은 적용이 되지 않았다.

또한 요소의 크기를 바꾸는 width와 height 속성이 적용되지 않았다.

 

+ 인라인 방식의 특성

1. 수평 방향으로 요소가 배치되며 줄 바꿈이 일어나지 않음.
2. 박스의 크기를 설정하는 width와 height 속성이 적용되지 않음.
3. 상하단 마진인 margin-top과 margin-bottom 속성이 적용되지 않음.

 

2. block

inline 추가 예제의 코드에서 <span> 태그의 display 속성값을 block으로만 추가함.

span {
    display: block;

    width: 100px;
    height: 100px;
    margin: 20px;
    background-color: yellow;
    border: solid 1px black;
}

앞서 이야기한 블록 방식의 특성으로 줄바꿈이 일어나고 새로운 줄에 요소가 표시된다.

width와 height, margin 또한 적용이 되어 있다.

 

+ 블록 방식의 특성

1. 해당 요소의 앞 뒤에 줄 바꿈이 일어나고 새로운 줄에 요소가 표시된다. (수직 방향으로 요소가 배치된다.)
2. 박스의 크기를 설정하는 width와 height 속성이 적용된다.
3. 모든 마진 설정이 적용된다.

 

3. inline-block

display 속성 값으로 inline-block을 설정함.

span {
    display: inline-block;

    width: 100px;
    height: 100px;
    margin: 20px;
    background-color: yellow;
    border: solid 1px black;
}

실행 결과

 

드래그를 하여 파란색으로 채워진 곳이 보이는데

inline-block 방식에서 inline과 block의 특성을 모두 갖는다.

inline 방식으로 줄 바꿈이 일어나지 않고 block 방식으로 마진과 width, height이 적용되었다. 

 

+ 인라인-블록 방식의 특성

1. 인라인 방식과 같이 수평 방향으로 배치되고, 줄 바꿈이 일어나지 않는다.
2. 블록 방식과 같이 박스의 크기 설정이 된다.
3. 블록 방식과 같이 모든 마진을 적용할 수 있다.