블록 레벨 요소와 인라인 레벨 요소에 대해 알아보자.

html

<span class="inline1">hello</span>
<span class="inline2">world</span>

<p class="block1">hello</p>
<p class="block2">world</p>

css

.inline1 {
  background-color: pink;
}
.inline2 {
  background-color: cornflowerblue;
}

.block1 {
  background-color: pink;
}
.block2 {
  background-color: cornflowerblue;
}

가장 단순하게 그냥 인라인 요소와 블록 요소를 사용해 실습예제를 만들어보았다.

inline level element

inline요소는 자신의 컨텐츠 크기만큼 차지하며, 길을 막지 않는다. 위 예시 처럼 자리가 남으면 다음 inline요소가 옆 자리를 차지한다.
선처럼 옆으로 죽 흐르면서 자리를 차지한다. 그래서 요소들을 가로배치 할 때 사용하기도 한다.
inline요소는 margin, padding, borderd의 top, bottom값을 가질 수 없다.
만약 inline요소에 padding top을 줬다고 가정해보자

이게 만약 제대로 먹은거라면, 뒤에 텍스트들을 밀어내야하는데 무시하고 텍스트는 그대로 흐르고 padding top부분이 다른 텍스트를 가리고 있다. margin top이나 border top을 넣으면 아무변화가 없다,,
대신 margin, padding, borderd의 right, left값은 먹는다.

padding-right 값을 줬는데 잘 먹은것을 볼 수 있다!
inline요소는 간단하게,, line 글을 쓴다고 생각하면 좋을 것 같다. 글을 쓰다가 자리가 모자라면 흘러내리듯이,, 인라인요소도 배치하다가 자리가 모자라면 흘러내리고,, 글자에 형광펜 아무리 두껍게 칠해봤자 위에 글자까지 칠해지고,, 그건 잘못된거고.. 이렇게 이해해보면 쉽지 않을까?

block level element

각 블록요소에 따로 width 값을 설정해주지 않았다.
이 경우에 블록요소는 부모 요소 content box width의 100%를 차지한다. 블록요소에 width값을 지정해주면 남는 공간은 자동으로 margin으로 채워버린다.

hello box에 width값을 300px을 줬다. 그리고 남는 공간은 margin으로 자동 채워진다.

이렇게! margin을 자동으로 채워서 다음 요소가 올라올 수 없도록 block하고 있다.

world box에 width값 400px을 줬다. 위와 마찬가지로 남는 자리에는 margin이 자동으로 채워진다.
block 요소는 margin, padding, border 값의 모든 속성을 사용할 수 있다.

inline block

inline요소의 장점과 block요소의 장점을 모두 가진 display 값이다.
inline처럼 요소들이 주르륵 배치되면서 block요소처럼 margin, padding, border 값을 이용해 영역을 잡을 수 있는 요소이다.
위 inline요소의 실습 예시에서, 배경색이 blue인 인라인 요소의 display값을 inline-block으로 바꿔주고 padding값을 10px 넣어보겠다.

우선 display값을 inline-block으로 바꾸기 전이다.

display값을 inline-block으로 바꿔 준 후 먹였던 padding값이 잘 들어간 먹힌 것을 볼 수 있다.
block요소의 성질대로 영역을 잡으면서 inline요소 처럼 요소들이 줄지어 배치되는 것을 확인해볼 수 있다.!

block, inline, inline-block 중 어느 하나 값이 좋다 라기 보다는 쓰임새에따라, 디자인에 따라 각각 달리 쓰인다.

클래스 선택자가 우선 순위가 높으니 a클래스를 가진 li가 빨간배경을 가지게 될 것 같고,,
li 형제 요소로 묶은 것들은 첫 번째 li 뒤에 두 개의 li 글자 크기가 변경될 것 같은데,, ??

빨간 배경은 맞췄는데, 글자 크기는 틀렸다.
형제 선택자,, 첫 번째 요소 뒤 요소들을 선택하는 건 줄 알았는데 생각대로 안나왔다 뭘까,,? 동기님의 도움으로 이해되었다.!!! li + li + li가 뜻하는 말이,, li 형제의 형제 즉 li태그 다음 두 형제를 뛰어넘은다음 부터 font-size가 적용된다. 이것을 각 li태그에 적용해주면 세 번째 Banana 부터 Strawberry까지 font-size가 적용되는 것이었다.!!