CSS에서 display는 html안에서 요소들이 어떻게 보여지고 배치되는지를 결정한다. 여러가지 속성값들이 있는데, 가장 기본이라고 할수있는 inline, block, inline-block 에 대해서 알아보고 이 속성들이 어떤식으로 상호배치 되어지는 속성인지를 알아볼것이다!
display: inline
dispaly: inline 으로 지정된 요소들은 줄을 바꾸지않고 다른 요소들과 나란히 배치된다.다음과 같은 속성으로 찾아낼수있다.
-
상,하단 외부 여백(margin-top,margin-bottom)속성을 정의해도 적용되지 않는다.
인라인 요소의 상,하 여백은 margin이 아닌 line-height 속성에 의해 발생한다. -
너비(width)와 높이(height) 속성이 적용되지 않는다. 인라인 요소의 너비와 높이는 태그가 품고 있는 내부 요소의 부피에 맞춰진다.
-
인라인 속성을 가진 태그끼리 연속으로 사용되는 경우에는 최소한의 간격을 유지하기 위해서 좌, 우에 약 5px 가량의 외부 여백(margin)이 자동으로 발생한다.
display: block
display: block으로 지정된 요소들은 자체로 한줄을 완전히 차지한다. 이점이 display: inline과 가장 큰 차이점이라고 할수있겠다. header, footer, p, li, table, div, h1등이 block요소를 가진 태그들이다.
-
보시다시피 블록 속성을 가지고있는 태그는 기본적으로 width:100% 속성을 가지고있다. 다음요소가 양옆으로 붙을 공간이없어서 자연히 줄넘김이된다.
-
inline 요소와 다른 또다른점은 block 요소들은 margin, width, height 속성을 부여하면 모두 적용된다는 점이다. 이때문에 block 속성을 가진 태그들은 화면 구성이나 레이아웃에 많이 사용된다.
-
background-color 를 사용하면 block 인지 inline인지를 파악하기 쉽다.
display: inline-block
display: inline-block은 이름에서 알수있듯, 둘의 특징들을 선택적으로 가지고있는 친구라고 할수있다.
-
display: inline-block을 부여하면 height,width,margin,padding같은 속성을 부여할수있다 (inline과 다른점)
-
display: inline-block을 부여하면 줄바꿈이되지않고 나란히 놓여진다는 특성이있다부여하면 block과 가장 다른점이라고 할수있겠다.
-
대표적인 inline-block 엘리먼트로 <button>이나 <input>, <select> 태그 등이 있다.
-
inline-block 엘리먼트는 위와 같이 해당요소의 CSS를 display: inline-block로 지정해줘야 합니다. inline-block을 이용하면 여러 개의 엘리먼트를 한 줄에 정확히 원하는 너비만큼 배치할 수 있기 때문에 레이아웃에 활용할 수 있다.
소감
어떤상황에서 어떤코드를 써야할지 아직까지는 감이 안오지만 쓰다보면 많이 익숙해질것같다. 레이아웃 설정하는거에 많이 익숙해져야하는만큼 오늘 블로그를쓰면서 이런 속성들에 대해서 이해할수있어서 좋았다.
references
