[CSS] layout - display

나는 그런 고민을 해본적이 있는가?

얘네는 왜 붙어있고 얘네는 왜 안 붙어있는지

 

이것저것 넣어보고 해결되면 그걸 해결하는 과정이라 생각할 수 있는가?

적어도 난 아니다

 

이번엔 안 붙고 안 떨어지는 대표적인 이유인 디스플레이 요소에 대해 알아보자

---

대부분의 html 요소는 inline 또는 block 둘 중의 하나의 요소를 가진다

굳이 따로 지정하지 않더라도 <span>은 인라인 요소 <div>는 블럭요소를 기본적으로 내포하고 있다는 것을 우린 알고 있다

몰랐다하더라도 이제 알면 되니까 괜찮음 ㅋㅋ

 

블록(block)

언제나 새로운 라인(line)에서 시작하며, 요소가의 너비가 해당 라인의 모든 너비를 차지한다

따라서 포지션 속성으로 따로 위치를 지정해주지 않는 한 블록요소끼리는 같은 라인을 공유하지 않는다

display:inline;를 사용해서 인라인 요소로 만들 수도 있다

대표적인 html 태그들은 <div>, <h1>, <p>, <ul>, <ol> 등등이 있다

 

인라인(inline)

새로운 라인에서 시작하지 않고 요소의 너비는 아닌 해당 html 요소의 내용만큼만 차지한다

따라서 내부에 다른 요소들을 

인라인 요소끼리 같은 라인을 공유할 수 있기 때문에 가로로 나열할 수 있다

마찬가지로 display: block; 를 사용해서 블럭 요소로 만들 수 있다

대표적인 html 태그들은 <span>, <a>, <img> 등등이 있다

 

인라인-블록(inline-block)

display 속성값이 인라인-블록으로 설정된 요소는 해당 요소 자체는 인라인 요소처럼 동작하지만

해당 요소 내부에서는 블록 요소처럼 동작한다

 

인라인 요소처럼 요소끼리 라인을 공유하기 때문에 가로로 나열할 수도 있고

블럭요소처럼 컨텐츠의 크기에 관계없이 너비와 높이를 바꿀 수도 있다

 

역시 글로만 보면 모르겠다 코드...코드를 보자

 

See the Pen DISPLAY by jayce_kim (@jayce-kim1123) on CodePen.

 

위쪽에서 설명했듯

 

block이라는 내용이 포함된 영역은 br태그를 붙이지 않았는데도 줄바꿈이 되어있다

이는 블럭 요소가 같은 라인을 공유하지 않기 때문이다

 

모든 div태그에 너비와 높이를 지정해주었지만 인라인요소로 지정한 요소들은 크기가 바뀌지 않은 것을 확인할 수도 있다

div는 기본적으로 블럭요소로 지정되지만 이 경우엔 따로 인라인 요소로 바꿀 수 있는 것을 확인할 수 있다

 

하지만 인라인 블럭요소로 지정한 영역은 배치는 인라인 요소를 따라가고

너비와 높이는 블럭요소처럼 바뀌었다!