어찌 보면 쉬운 주제이긴 한데, 가끔 헷갈려서 정리 해보려 한다.
CSS 는 툭하면 잊어버리기 쉬운 것 같다. 개인적으로 프로그래밍 언어보다 CSS가 더 헷갈리고 어렵다.
1️⃣ display 속성 값의 종류
HTML 에는 여러 태그들이 존재하며, 태그들은 크게 세 가지의 display 속성 값을 기본적으로 가지고 있다.
1. inline
2. block
태그마다 기본적으로 display 속성 값으로 위 두 가지 중 하나를 부여 받는다.
아래는 각 속성 값에 따라 기본적으로 적용되는 태그들을 분류한 것이다.
| inline | <span>, <a>, <strong> ... |
| block | <div>, <p>, <h>, <ul>, <ol> , <li> , <form> ... |
아마 위의 태그들을 보면, 빈번하게 쓰이는 몇몇 태그들이 빠져 있는 것을 알 수 있다.
대표적으로 <img>, <input>, <botton> 태그들이 있다.
그럼 위 태그들은 기본적으로 내재된 display 속성이 없는 것일까 ?
정답은 그렇지 않다.
사실 위의 태그들도 기본적으로 inline 을 가지고 있다.
그러나, 일반적인 inline과 다르게 조금 예외적으로 동작한다.
마치 inline 과 block의 특징이 합쳐진 lnine-block 처럼 동작하는데 이제부터 자세히 알아보자.
2️⃣ inline vs block vs inline-block
먼저, inline과 block 두 display 속성 값을 비교해보자
현재 span 태그(inline)와 p 태그(block)에 border 속성을 추가하여 보기 쉽게 해두었다.
보다시피 lnline인 span은 줄을 넘기지 않고 콘텐츠만큼 영역을 차지한다.
그러나, block인 p 태그는 줄을 넘기며 콘텐츠 크기 그 이상으로 영역을 갖는 것을 볼 수 있다.
그럼 block 은 구체적으로 얼마만큼의 영역을 가질까 ?
결론부터 말하면 block은 기본적으로 width, height 를 지정해주지 않는 이상 부모 요소의 크기 만큼
width를 가지며, 콘텐츠의 크기만큼 height를 갖는다.
예시를 보자
지금 p 태그는 div 안에 있기에 부모 태그가 div가 된다.
따라서 p 태그의 기본 width는 부모의 width와 같게 되며, 기본 height는 글자의 크기(콘텐츠)만큼 된다.
지금처럼 특별히 width와 height를 지정해주지 않은 가장 기본적인 경우일 때 그렇다.
첫 번째 예제에는 부모 태그가 body 이므로 body의 크기인 즉, 우리가 눈에 보이는 브라우저의 width (뷰포트) 만큼
p태그의 width가 결정되는 것이다.
inline과 block의 크기가 어떻게 결정되는지 깨달았다면, 이제 좀 더 세부적인 특징을 확인해보자.
첫 번째 예시로 돌아가서 span 태그와, p 태그에 width, heigth, margin, padding을 주어보겠다.
무언가 달라지긴 했는데 이렇게는 잘 모르겠다. 개발자 도구로 자세히 보자.
span 태그(inline)를 보면, width와 height 가 적용되지 않는다.
또한 margin, padding 이 좌우 적용이 되었다.
그러나 p 태그(block)는 width, height 가 모두 적용 되며,
margin, padding 모두 상하좌우로 적용이 된다.
또한 p 태그는 width를 조절하여 영역의 크기를 줄였음에도 기본적으로 줄바꿈이 된다.
여기까지 정리를 해보자
| inline | block | |
| width | 무시 | 적용 |
| height | 무시 | 적용 |
| padding | 좌우만 적용 | 상하좌우 적용 |
| margin | 좌우만 적용 | 상하좌우 적용 |
그렇다면 display의 또 다른 값인 inline-block은 무엇일까?
위의 예시에서 span 태그의 display 의 값을 inline-block 으로 바꾸어 보겠다.
span의 display 값을 inline-blcok 으로 변경하니 마치 block 처럼
height, width, margin, padding 이 모두 적용되는 것을 확인할 수 있다.
또한 inline처럼 줄바꿈이 반드시 일어나지 않고, 다른 요소들과 같은 줄에 배치될 수 있다.
3️⃣ inline 예외 태그
display의 기본값이 inline이지만 마치 inline-block 처럼 동작하는 태그들이 있다.
대표적으로 <img>, <button>, <input> 태그들이 그렇다.
예시를 확인하자.
inline-block 처럼 동작하는 것을 확인할 수 있다.
그런데, 위의 예시의 모든 속성이 적용되었을 때 사이즈는 324*54 인데, button은 300*30으로 나타난다.
이 이유는 box-sizing 속성과 관련이 있다.
기본적으로 block 은 box-sizing 속성 값이 content-box 이지만,
button은 브라우저마다 다르다. 크롬은 border-box로 되어있다.
만약 box-sizing 속성을 모르면 추가적으로 알아보길 바란다. 이 글에서는 생략하겠다.
중요한 것은 button 의 display 는 기본값으로 inline이지만 예외적으로 inline-block 처럼 작동하는 것이다.
그럼 여기서 궁금증이 들 수 있다.
처음부터 기본값을 inline-block으로 하지 왜 inline으로 하는 것인가 ?
이유는 매우 단순하다.
HTML 초기 버전에서는 inline, block 두 요소만 정의되어 있었다.
inline-block 은 CSS의 발전과 함께 도입된 개념이다.
따라서, display의 기본 값을 갑작스레 inline-block 으로 변경하면 호환성 문제를 야기시킬 수 있다.
