TIL 04.07

1. vmin, vmax

1️⃣ vmin

가로 너비를 기준으로 공간을 차지함

• 50vmin: 가로 너비의 절반

2️⃣ vmax

세로 너비를 기준으로 공간을 차지함

• 50vmax: 세로 너비의 절반

---

2. overflow

overflow: hidden;

• 정해진 크기만큼만 보여 주고 넘어가는 부분은 모두 숨김

div {
	overflow: hidden;
	width: 100px;
	height: 100px;
}

overflow: hidden visible;

• x축은 숨기고 y축은 보여 줌
• 정해진 크기만큼의 박스에서 x축은 200px만큼만 표시, 스크롤을 통해 y축 부분 표시

div {
	overflow: hidden visible;
	width: 100px;
	height: 100px;
}

overflow: visible hidden;

• x축은 보여 주고 y축은 숨김
• 정해진 크기만큼의 박스에서 스크롤을 통해 x축 부분 표시, y축은 200px만큼만 표시

div {
	overflow: visible hidden;
	width: 100px;
	height: 100px;
}

---

3. background

background-repeat

배경 이미지를 어떻게 반복할 것인지 설정 가능

1. repeat: 반복
2. repeat-x: x축만 반복
3. repeat-y: y축만 반복
4. no-repeat: 반복 없음
5. round: 이미지 잘리지 않게 반복하며 비는 부분은 이미지 크기를 늘려서 채움
6. space: 이미지 잘리지 않게 반복하며 비는 부분은 공백 유지
7. cover: 하나로 덮어씌움

---

4. Text

1️⃣ line-height

글자의 높이 지정
half leading 영역 2개 + 폰트의 기본 높이(normal)

1. 고정 값으로 주었을 경우
   : 속성이 적용된 부분의 폰트 크기가 달라질 경우 line-height 값은 px로 고정되어 있기 때문에 줄 간격이 흐트러짐
2. em으로 값을 주었을 경우
   : em은 부모 요소의 폰트 크기에서 지정한 값만큼 곱해진 크기를 나타내기 때문에 자식 요소에서 더 큰 폰트 크기를 지정했을 경우 UI가 흐트러짐
3. 1로 주었을 경우
   : 제일 적당한 방법 폰트의 위아래로 존재하는 leading 영역을 없애 줌

결론: line-height는 상대값으로 지정할 것

h1을 3개 작성했을 때 글자 줄 사이마다 약간의 여백이 있는 것을 확인할 수 있음

• 여백은 어디서 나왔나요?
  • 사용자가 읽기 좋으라고 설정해 둔 leading 영역
• line-height: 1;을 줄 경우 사라짐

2️⃣ letter-spacing

자간 넓이를 설정하는 속성

3️⃣ vertical-align

쭉 나열되어 있는 inline 요소들의 높이를 맞추기 위해 사용