inline
과 block
은 display
속성의 프로퍼티들입니다.
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;
}
span
과 div
는 대표적인 inline과 block을 태그들입니다.
span
은 inline 요소이기 때문에 컨텐츠만큼 공간을 차지합니다. 붙어서 옆에 위치하게 됩니다.
반면 div
는 block 요소이기 때문에 페이지의 width만큼 전부 공간을 차지해서 옆에 누가 올 수 없습니다.
-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>
이외에도 수많은 태그가 있으니 더 알아보고 싶다면 검색을 통해알아봐도 좋지만 태그 하나하나에 너무 공들일 필요는 없습니다. 우리의 기억력은 한계가 있기 때문에 전부다 외우는 것보다는 원리를 이해하고 그때그때 필요한 태그를 찾아쓸 수 있는 능력을 기르면 된다. 하지만 자주 쓰는 태그등은 자연스럽게 암기가 되고 외워두면 효율적이게 업무를 처리할 수 있으니 기억해두자.!
사실 우리에겐 개발자도구라는 정말 좋은 기능이 있다. 크롬의 개발자 도구를 이용하면 검색없이 태그가 어떤 속성을 가지고 있는지 한눈에 파악할 수 있다.
span
과 div
의 속성을 확인할 수 있다. 이런 식으로 다른 태그의 기본속성이나 내가 준 속성이 궁금하다면 개발자도구를 적극 활용하자.
여기서 한가지 살펴볼점은 div
의 display 속성의 프로퍼티는 block으로 나오지만 span
의 프로퍼티는 나오지 않는 것을 확인할 수 있다. 그것은 페이지에서 기본적으로 태그는 inline
으로 설정하고 있다는 뜻이다. 그렇기 때문에 별도로 표시되지 않는다.
하지만 알아낼 수 있는 방법이 있다.
최 상단에 style
옆에 computed
를 누르면 상세한 기본 설정을 볼 수 있다.
기본설정이 엄청 다양하다는 것을 알 수 있다. 여기서 맨 아래 display
속성을 보면 inline
으로 설정되어 있는 것을 볼 수 있다. 기본 설정 되어있어 style
에서는 보이지 않던 inline
요소가 불투명 표시되어있다. 개발자 도구는 공부함에 있어 유용한 도구라고 생각한다. 한번 더 강조하지만 적극 활용해보자. 😊(크롬 개발자도구)
지금까지 inline
과 block
에 대해 아주 기본적인 속성을 살펴봤다.
다음은 display
속성을 살펴보자. display 속성을 사용해 inline을 block으로 바꿀 수도 있고 반대도 가능하다.
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 span
이 div
처럼 줄바꿈이 일어났다.
이처럼 기본값으로 설정되있던 요소도 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;
}
이번엔 혼자 가로를 전부 차지하던 div
가 span
처럼 옆에 위치한다.
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;
}
div
를 display: 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
옆으로 위치했음에도 높이와 너비를 조절할 수 있게 되었다.