CSS - Inline,Block

한성봉·2021년 5월 12일
0

inline, block

inlineblockdisplay 속성의 프로퍼티들입니다.

  • inline : 요소의 공간을 컨텐츠만큼만 차지하는 프로퍼티입니다.
  • block : 요소의 공간을 페이지의 width만큼 전부 차지하는 프로퍼티입니다.

inline과 block은 그림으로 보면 훨씬 이해하기 쉽습니다. 예시를 한번 살펴보겠습니다.

<span>span</span>
<span>span</span>
<span>span</span>
<div>div</div>
<span>span</span>
body {
  height: 500vh;
  padding: 100px;
}

span {
  border: 1px solid blue;
  background: gray;
}

div {
  border: 1px solid tomato;
  background: wheat;
}

spandiv는 대표적인 inline과 block을 태그들입니다.

span은 inline 요소이기 때문에 컨텐츠만큼 공간을 차지합니다. 붙어서 옆에 위치하게 됩니다.
반면 div는 block 요소이기 때문에 페이지의 width만큼 전부 공간을 차지해서 옆에 누가 올 수 없습니다.

inline, block 종류

-inline : <a>, <i>, <span>, <abbr>, <img>, <strong>, <b>, <input>, <sub>, <br>, <code>, <em>, <small>, <tt>, <map>, <textarea>, <label>, <sup>, <q>, <button>, <cite>

-block : <address>, <article>, <aside>, <blockgquote>, <canvas>, <dd>, <div>, <dl>, <hr>, <header>, <form>,<h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <table>, <pre>, <ul>, <p>, <ol>, <video>

이외에도 수많은 태그가 있으니 더 알아보고 싶다면 검색을 통해알아봐도 좋지만 태그 하나하나에 너무 공들일 필요는 없습니다. 우리의 기억력은 한계가 있기 때문에 전부다 외우는 것보다는 원리를 이해하고 그때그때 필요한 태그를 찾아쓸 수 있는 능력을 기르면 된다. 하지만 자주 쓰는 태그등은 자연스럽게 암기가 되고 외워두면 효율적이게 업무를 처리할 수 있으니 기억해두자.!

사실 우리에겐 개발자도구라는 정말 좋은 기능이 있다. 크롬의 개발자 도구를 이용하면 검색없이 태그가 어떤 속성을 가지고 있는지 한눈에 파악할 수 있다.


spandiv의 속성을 확인할 수 있다. 이런 식으로 다른 태그의 기본속성이나 내가 준 속성이 궁금하다면 개발자도구를 적극 활용하자.
여기서 한가지 살펴볼점은 div의 display 속성의 프로퍼티는 block으로 나오지만 span의 프로퍼티는 나오지 않는 것을 확인할 수 있다. 그것은 페이지에서 기본적으로 태그는 inline 으로 설정하고 있다는 뜻이다. 그렇기 때문에 별도로 표시되지 않는다.

하지만 알아낼 수 있는 방법이 있다.

최 상단에 style 옆에 computed 를 누르면 상세한 기본 설정을 볼 수 있다.

기본설정이 엄청 다양하다는 것을 알 수 있다. 여기서 맨 아래 display속성을 보면 inline으로 설정되어 있는 것을 볼 수 있다. 기본 설정 되어있어 style에서는 보이지 않던 inline 요소가 불투명 표시되어있다. 개발자 도구는 공부함에 있어 유용한 도구라고 생각한다. 한번 더 강조하지만 적극 활용해보자. 😊(크롬 개발자도구)

지금까지 inlineblock에 대해 아주 기본적인 속성을 살펴봤다.
다음은 display 속성을 살펴보자. display 속성을 사용해 inline을 block으로 바꿀 수도 있고 반대도 가능하다.

display

display 속성은 inline, block 중 어느 요소로 처리할지와 flow, grid, flex 처럼 다양한 레이아웃 배치를 위해 사용되는 속성이다.

display: block;

  • display: block; : 요소를 block처럼 표시하고 앞뒤로 줄바꿈이 일어난다.

위의 예시에서 span은 inline인데 display를 이용해 block으로 바꿔보자.

body {
  height: 500vh;
  padding: 100px;
}

span {
  border: 1px solid blue;
  background: gray;
  display: block;
}

div {
  border: 1px solid tomato;
  background: wheat;
}

재밌는 결과가 일어났다. 옆으로 배치되던 inline spandiv처럼 줄바꿈이 일어났다.
이처럼 기본값으로 설정되있던 요소도 display속성을 통해 변경가능하다는 얘기다. 웹페이지를 개발할 때 적재적소에 사용한다면 효율적인 기능이 될 것 같다.

display: inline;

  • display: inline; : 요소를 inline처럼 표시하고 앞위로 줄바꿈이 일어나지 않는다.

block요소를 가진 div를 inline으로 바꿔보자.

body {
  height: 500vh;
  padding: 100px;
}

span {
  border: 1px solid blue;
  background: gray;
}

div {
  border: 1px solid tomato;
  background: wheat;
  display: inline;
}

이번엔 혼자 가로를 전부 차지하던 divspan 처럼 옆에 위치한다.

display: none;

  • display: none; : 공간을 차지하는 박스가 생성되지 않습니다.

이 부분은 처음에는 의아했다. 왜 이런 기능을 사용하지??하고 말이다. 필요없다면 주석처리하거나 아예 코드를 삭제하면 되지 않을까 하는 생각을 했다.
하지만 그런생각이 무색할 정도로 엄청난 기능에 사용된다.
우리가 검색엔진을 사용할 때 검색창에 마우스를 올려놓으면 자동검색창이 보인다. 여기에 사용된다. 미리만들어 놓은 자동검색창을 display:none; 으로 설정해놓았다 hover기능이랑 활용해 마우스를 올려두면 창이 보이게 만든 것이다. 엄청 신기했다.
여기서 hover란 마우스를 올렸을 때를 말한다.

그냥 사용하기만 했던 기능이 내가 배우는 기능에으로 만들 수 있었다니..👍

body {
  height: 500vh;
  padding: 100px;
}

span {
  border: 1px solid blue;
  background: gray;
}

div {
  border: 1px solid tomato;
  background: wheat;
  display: none;
}

divdisplay: none;으로 설정하니 화면에서 사라졌다. 아예 삭제된것이 아니다.

display: inline-block;

  • display: inline-block; : 요소는 inline인데 내부는 block처럼 표시. 그렇기 때문에 박스는 옆으로 배치.

이 말의 의미는 span은 기본적으로 컨텐츠만큼만 공간을 차기하기 때문에 높이와 너비를 조절할 수 없다.

span {
  border: 1px solid blue;
  background: gray;
  width: 50px;
  height: 50px;
}

이렇게 span에 높이와 너비를 준다고 해도 아무 변화가 없다. 반면 div block요소에는 높이와 너비를 줄 수 있어서 span과 달리 변화가 일어난다.

여기서 inline을 사용해 div를 일단 inline요소로 만들어 span 옆에 위치시키면 inline이 되어 높이와 너비를 조절할 수 없는 상태가된다. 하지만 inline-block을 활용하면 div를 inline으로 활용하고 높이와 너비를 조절할 수 있는 block상태가 된다는 뜻이다.

body {
  height: 500vh;
  padding: 100px;
}

span {
  border: 1px solid blue;
  background: gray;
  width: 50px;
  height: 50px;
}

div {
  border: 1px solid tomato;
  background: wheat;
  display: inline-block;
  width: 50px;
  height: 50px;
}

다음 사진을 확인하면 div가 inline 처럼 span옆으로 위치했음에도 높이와 너비를 조절할 수 있게 되었다.

0개의 댓글