CSS: display : Spike!

display 속성의 외부 디스플레이 유형은 레이아웃의 흐름에 요소가 어떤식으로 참여하는지를 나타냅니다. 이에 해당하는 값으로 block, inline, inline-block이 있습니다.

1. inline

: 인라인 요소 박스를 만듭니다. 새로운 줄을 만들지 않으며, 필요한 너비만 차지합니다. 공간이 있다면 다음 요소도 같은 라인에 위치합니다.

<span><a><img>등이 대표적인 인라인 요소입니다.

inline 요소를 알아보기 위한 간단한 예제가 있습니다

1 2	<div> 다음의 span은 <span class="inlinecl">인라인 요소</span>입니다. inline의 시작과 끝을 알기 위해 배경색을 지정합니다 </div>

1
2
3

.inlinecl {
  background-color: blue;
}

블록 요소인 div 안에 inline 요소인 span 이 존재합니다. inline의 성향을 살려 문단이 끊어지지 않고 이어지는 모습을 확인할 수 있습니다.

2. block

: 블록 요소 박스를 만듭니다. 줄바꿈을 하여 시작하며, 좌우로 최대한으로 늘어납니다.

앞서 예제의 span을 <p>태그로 바꾸어 보았습니다

1 2	<div> 다음의 p는 <p class="blockcl">블록 요소</p>입니다. block의 시작과 끝을 알기 위해 배경색을 지정합니다 </div>

앞서 css의 클래스명을 .blockcl로 바꾸어주면, 차이를 확인할 수 있습니다.

p요소는 p 이전과, 자기 자신, p 이후의 세 부분으로 레이아웃을 바꿔 놓았습니다.

줄바꿈을 강제하는 블록요소의 특성이 드러나는 부분입니다.

만약 inline 요소 안에 block을 넣는다면 줄바꿈이 일어나지 않을까요? css를 그대로 두고 html을 변경해 보았습니다.

1 2	<span> 과연 block을? <p class="blockcl">block</p>과연? </span>

block요소인 p가 줄바꿈을 강제하여 세줄로 나눠지는 것을 확인할 수 있습니다.

3. inline-block

: inline 요소와 비슷하지만, 높이와 너비를 지정할 수 있습니다. 줄바꿈이 일어나지 않습니다. 지정하지 않을 시 inline과 같이 컨텐츠 영역이 잡힙니다.

브라우저 너비를 채우며, 알맞게 줄바꿈되는 박스 그리드가 생성됩니다.

display 프로퍼티에 inline-block값을 설정합니다.

    <div class="container">
      <nav>
        <li>밥1</li>
        <li>밥2</li>
        <li>밥3</li>
        <li>밥4</li>
      </nav>
      <div class="column2">
        <section>안녕안녕나는지수야</section>
        <section>헬륨가스먹었더니이렇게됐지헬륨가스먹었더니이렇게됐지헬륨가스먹었더니이렇게됐지헬륨가스먹었더니이렇게됐지헬륨가스먹었더니이렇게됐지헬륨가스먹었더니이렇게됐지헬륨가스먹었더니이렇게됐지헬륨가스먹었더니이렇게됐지헬륨가스먹었더니이렇게됐지</section>
      </div>
    </div>

nav {
  display: inline-block;
  vertical-align: middle;  #inline-block은 vertical-align의 영향을 받음
  width: 20%;
  background-color: rebeccapurple;
}
.column2 {
  display: inline-block;
  vertical-align: middle;
  width: 70%;
  background-color: yellowgreen;
}

inline-block을 이해하기 위해 예제를 설정했습니다.

<nav>의 vertical-align을 변경하게 되면 보라색 란의 위치가 변경되는 것을 확인할 수 있습니다. 또한, 각 요소의 width와 height값을 바꿔줌으로써 보라색과 연두색 란의 크기를 조절할 수 있습니다. 이처럼 inline-block은 width와 height를 가진 inline요소를 생성합니다.

nav와 .column2의 width를 각각 26%, 75%로 지정하면 줄바꿈이 되어 보라색 란 밑에 연두색 란이 오는 것을 확인할 수 있습니다. 이처럼 inline-block은 너비를 채우고 나면 자연스럽게 줄바꿈 됩니다.