아마 css display 치면 이런거 많이 보셨을것이다
CSS Position 뽀개기 2
또 돌아왔다!! Position 뽀개기!!!
이번 포스트에서는 inline, block, inline-block을 뽀개보도록 할 것이다 👊👊
inline
가장 대표적으로 inline 특징을 가지는 태그에는 span,a 태그가 있다.
span 태그에 background-color 속성을 주게되면, span태그의 영역 크기만큼 background-color가 적용된다.
이처럼 "컨텐츠 영역의 넓이와 높이만큼 가지는 속성"이 display: inline 이다.
inline property를 가지는 요소는 padding top, margin top&bottom 값을 사용할 수 없고, width값을 지정해줄 수 없다.
block
block태그는 inline 태그와는 반대로, 요소가 가질 수 있는 최대의 넓이를 default width로 가지고 있는다. 가장 대표적으로는 div 태그를 떠올리면 된다.
div 태그에 width값을 따로 지정해주지 않으면 부모 요소 넓이 100% 값이 곧 div의 넓이 값이 된다.
block 태그는 padding, margin값 모두 사용 가능하고, width값 또한 설정이 가능하다.
inline-block
그래, inline과 block은 알겠는데 그럼 inline-block은 무엇일까?
말 그대로 inline이면서 block 요소의 특징까지 함께 가지는 display의 property value이다.
inline과는 다르게 넓이 값을 가질수도 있고, margin padding 모두 적용 가능하다.
inline-block 의 default width값은 컨텐츠의 넓이 만큼이고(inline의 특징), width값을 조절하고 padding top, margin top&bottom 값도 줄 수 있다(block의 특징).
차례로 동일한 컨테이너에 들어가있는 inline, block, inline-block 요소에 각각 padding 과 margin을 준 상황이다.
inline 요소에서는 padding top, margin top-bottom 이 적용되지 않았고, block과 inline-block요소에서는 padding과 margin이 모두 잘 적용되고 있다.
넓이 면에서 보면, inline과 inline-block은 요소의 넓이만큼 넓이를 가져갔지만, block은 부모(붉은색 테두리)크기 만큼 넓이를 가지고 간 것을 확인할 수 있다.
위 사진은 윗 코드에서 width: 100px; 만 더 추가시킨 모습이다.
block과 inline-block의 경우 넓이를 잘 적용시켜주었지만, inline의 경우 넓이가 적용이 안 되고 있다는 것을 알 수 있다.
결론
각 태그가 가지는 기본 display 속성이 어떤 것이고, 그 display 속성이 어떤 특징을 가지고 있는지 잘 알고 있어야, 내가 원하는 디자인대로 CSS를 적용 시킬 수 있다.
다소 복잡할 수 있긴 하지만, simentic하게 html을 마크업 하기 위해서는 다짜고짜 모든 요소를 div나 section등으로 묶을수도 없기 때문에 더욱 더 잘 이해하고 넘어가는것이 가장 기초 중의 기초라고 생각된다 :)
