둔필승총

display의 종류

모든 요소는 딱 한 개의 display 값을 갖고 있다. 

1. inline
2. block
3. inline-block -> 같은줄에 있으면서 크기 설정하고 싶을때
4. flex
5. list-item
6. none

대부분의 요소들은 inline과 block 중 한 가지이다.

inline display

ex)<span>, <b>, <i>, <img>, <button>

다른 요소들과 같은 줄에 머무르려고 함

가로 길이는 필요한 만큼만 차지하는 성향

block display

ex) <div>, <h1>, <p>, <nav>, <ul>, <li>

새로운 줄로 가려고 함

가로 길이를 최대한 많이 차지하려고 하는 성향

display 바꾸기

만약 inline display 속성을 썼는데 block으로 바꾸려고 하려면 CSS에서 바꾸어주면 된다.

ex)

i{
 display:block;
}

img 태그

<img>태그는 사실 대체 요소(replaced element)라고 하는 특별한 요소이다. inline-block은 아니지만 가로, 세로 길이를 설정할 수 있는 inline요소.

예를 들어 vertical-align도 사용할 수 있다. text-align:center;를 하면 가운데 정렬도 된다.

그러나 이미지와 텍스트를 같이 쓰는 경우가 아니면 margin-left:auto;와 margin-right:auto;를 사용해서 가운데 정렬하는 것이 좋다.

vertical - align

vertical-align 속성을 따로 쓰지 않으면 baseline으로 되어있다.

vertical-align:top을 쓴다면 가장 높은 요소에 맞춰진다.

vertical-align:bottom을 쓴다면 가장 낮은 요소에 맞춰진다.

baseline은 가만히 있지 않고 계속 움직인다. 

baseline은 vertical-align의 조건들을 충족시키면서 줄의 높이를 최소화시키는 곳에 위치한다.

어디로 맞춰질지 궁금하면 부모태그에 x를 입력해서 확인하자.

세로 가운데 정렬 꿀팁

가로 가운데 정렬

inline 요소

inline 또는 inline-block 요소면 부모 태그에 text-align:center;를 써주면 된다.

block 요소

margin-left:auto;, margin-right: auto;를 써주면 된다.

세로 가운데 정렬

가짜 요소 더하기

vertical-align 속성은 인라인 또는 인라인 블록 요소에 적용된다. vertical-align: middle; 은 요소의 가운데를 부모 요소의 가운데와 맞춘다.

세로 길이가 100%인 div 요소를 만들고, 그 요소에도 vertical-align: middle;을 하면 된다.

그렇게 하고 그 요소의 가로 길이를 없애면 된다.

글자를 감싸는 박스의 높이와 같은 크기로 line-height속성을 지정해주면 글자가 수직 중앙 정렬된다.

line-height는 div 부모 태그에 설정해주면 되고 자식태그에는 line-height를 상속받지 않으려면

line-height:normal;을 써주면 된다.