01. Display 속성
display의 종류
- inline
- block
- inline-block
- flex
- list-item
- none
inline display
다른 요소들과 같은 줄에 머무르려고 하는 성향
가로 길이는 필요한 만큼만 차지하려는 성향
기본 display 값이 inline인 경우
- span
- a
- b
- i
- img
- button
block display
새로운 줄에 가려고 하는 성향
가로 길이를 최대한 차지하려는 성향
기본 display 값이 block인 경우
- div
- h1, h2, h3, h4, h5, h6
- p
- nav
- ul
- li
02. inline-block
inline 요소처럼 다른 요소들과 같은 줄에 머무르면서 block 요소처럼 가로, 세로 길이도 설정해주고 싶을 때 사용한다.
inline 요소에는 width와 height에 길이를 정해주어도 auto로 작동함.
i {
display : inline-block;
width : 200px;
height : 200px;
}03. img 태그의 비밀
img는 inline display이지만, 길이를 설정할 수 있는 특별한 태그이다.
img {
vertical-align : top; //이미지의 윗부분에 맞춰 정렬
vertical-align : bottom; //이미지의 아랫부분에 맞춰 정렬
vertical-align : middle; //이미지 중앙에 맞춰 정렬
}04. 다양한 링크
글자, 이미지 등 다양한 링크가 있다.
이미지를 누르면 링크로 가고 싶다면
<a href="">
<img src="">
</a>
여러 요소 눌러서 이동하고 싶다면
<a href="">
<img src="">
<h1>구글</h1>
</a>
05. Baseline
inline-block의 경우 마지막 요소 기준으로 baseline
만일 요소가 없는 경우 box가 baseline
<div>
<h1></h1>
<h2></h2>
</div>만일 div 크기를 줄여서 h1에 맞춘다면 그대로 마지막 요소인 h2 기준으로 baseline이지만
여기서 overflow : scroll을 추가로 설정한다면 h1 기준으로 baseline이다.
06. vertical-align
기본적으로는 vertical-align이 baseline에 맞춰져있다.
만일 ben에 vertical-align : top을 설정하면 이 줄에서 가장 높은 요소의 위에 맞춰져 아래의 사진과 같이 된다.
만일 이 줄에서 가장 높은 요소인 alex에 vertical-align : top을 설정하면 ?
vertical-align : top을 받은 box인 alex를 제외하고 가장 높은 요소는 chris이기 때문에 alex위와 chris위가 맞춰진다.
x와 ben에는 baseline을 따로 설정해주지 않았기 때문에, baseline이 다시 맞춰진다.
chris가 올라왔으니까 x와 ben은 chris를 따라 baseline까지 올라와지는 것이다.
💡 경우2처럼 그냥 alex가 내려가면 되지 않는가?
-> ⭐️ baseline은 vertical-align의 조건들을 충족시키면서 줄의 높이를 최소화시키는 곳에 위치 ⭐️하기 때문에, 이 줄의 세로 길이가 늘어나는 경우2는 불가능하다.
ben에 verticle-align : middle 는 부모요소 x의 가운데와 ben 초록 박스의 가운데에 맞춰진다.
만일 alex에 verticle-align : middle을 적용한다면 alex의 중앙에 모든 요소가 맞춰진다.
꿀팁
가로 가운데 정렬
1. inline 요소
=> text-align : center;
2. block 요소
=> margin-left : auto; margin-right: auto;
세로 가운데 정렬
1. 가짜 요소 더하기
<div class="container">
<div class="info">
<h1>Hello!</h1>
<p>My name is young.</p>
</div>
</div>vertical-align : middle; ( 이 속성은 인라인 요소에 적용되기 때문에 .info를 인라인 블록으로 먼저 바꾼다. )
<div class="container">
x
<div class="info">
<h1>Hello!</h1>
<p>My name is young.</p>
</div>
</div>vertical-align : middle;은 요소의 가운데를 부모 요소의 소문자 'x'의 가운데에 맞춘다.
.info 요소를 완전 가운데로 오게 하려면 우선 소문자 'x'가 가운데로 와야한다.
세로 길이가 100%인 요소를 만들고, 그 요소에도 vertical-align : middle;을 한다.
그 다음 소문자 'x'를 지우고, .helper 요소의 가로 길이를 없앤다.
근데, 문제가 있다!
만일 .info의 가로길이가 100%라면?
갑자기 이상한 곳에 위치한다.
사실 .helper와 .info 요소 사이에 띄어쓰기가 한 칸 있어서 가로 길이가 100%인 .info 요소는 자리 부족으로 다음 줄로 가버린다.
이 문제를 해결하기 위해
- 띄어쓰기를 없애는 방법
- 띄어쓰기 공간 만큼의 마이너스 여백을 주는 방법
⭐️ 주의사항 : 어떤 요소에 height : 100%를 설정하기 위해서는 부모의 height가 설정되어 있어야 한다. 위의 경우에는 .helper의 부모인 .container에 height가 설정되어 있었기 때문에 가능했다.
2. line-height로 해결
.info를 인라인 블록으로 설정해주면 line-height 속성을 활용해볼 수도 있다. 부모인 .container에 height와 동일한 line-height를 주면 line-height 속성은 자식들에게 상속되기 때문에 .info에는 line-height : normal;을 꼭 써주어야 한다.
