[CSS] 인라인과 블록

개요

display 속성은 요소가 화면에 어떻게 배치될지를 결정하는 것으로, 여기서는 인라인(inline), 블록(block), 인라인 블록에 대해 정리해보겠다.

 

1. 블록(Block) 요소

-> 전체 너비를 차지해 새로운 줄에서 시작된다.

-> 가로 너비와 세로 높이를 지정할 수 있다.

-> margin과 padding을 자유롭게 설정할 수 있다.

 

요소

: <div>

: <p>

: <h1> ~ <h6>

: <ul>, <ol>, <li>

: <section>, <article>, <header>, <footer>

 

<div style="background-color: lightblue; padding: 10px">블록 요소 예제</div>
<p style="background-color: lightcoral; padding: 10px">
   이것도 블록 요소입니다.
</p>
<p style="background-color: rgb(166, 69, 69); padding: 10px">
   얘도 블록 요소입니다.
</p>

 

-> 위의 코드와 같이 작성하면

 

-> 이렇게 따로 떨어져서 나오게된다.

 

2. 인라인(Inline) 요소

-> 내용의 크기만큼만 차지하며, 새로운 줄에서 시작되지 않는다.

-> width와 height를 지정할 수 없다.

-> margin과 padding 중 좌우는 적용되지만, 위아래의 경우 제한적으로 적용된다.

 

요소

: <span>

: <a>

: <strong>, <em>

: <img>

: <label>

 

 <p>
 이 문장에서 <span style="color: red">이 부분만</span> 빨간색으로 표시됩니다.
 </p>
 <a href="#" style="color: blue">이것은 링크입니다.</a>

 

-> 두 가지를 섞게 된다면 요런 느낌이다.

<span>첫번째</span>
<span>두번째</span>
<div>세번째</div>
<span>네번째</span>
<span>다섯번째</span>
<div>여섯번째</div>

 

3. 인라인 블록(Inline-Block) 요소

-> 인라인 요소처럼 한 줄에 나란히 배치될 수 있다.

-> 블록 요소처럼 width와 height를 지정할 수 있다.

-> margin과 padding을 자유롭게 조정할 수 있다.

 

요소

: <img>

: <button>

 

<div style="display: inline-block; width: 100px; height: 50px; background-color: lightgreen;">인라인 블록</div>
<div style="display: inline-block; width: 100px; height: 50px; background-color: lightblue;">요소</div>

 

-> <div> 요소는 블록 요소이지만, display: inline-block;을 적용해서 인라인 요소처럼 한 줄에 배치되며, 크기를 조정할 수 있도록 했다.

 

4. display 속성

-> CSS에서 display 속성을 사용해 요소의 기본적인 동작을 변경할 수 있다.

 

블록 -> 인라인 요소

div {
    display: inline;
}

 

인라인 -> 블록 요소

span {
    display: block;
}

 

인라인 -> 인라인 블록

span {
    display: inline-block;
    width: 100px;
    height: 50px;
}