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
배경 이미지를 어떻게 반복할 것인지 설정 가능
repeat: 반복repeat-x: x축만 반복repeat-y: y축만 반복no-repeat: 반복 없음round: 이미지 잘리지 않게 반복하며 비는 부분은 이미지 크기를 늘려서 채움space: 이미지 잘리지 않게 반복하며 비는 부분은 공백 유지cover: 하나로 덮어씌움
4. Text
1️⃣ line-height
글자의 높이 지정
half leading 영역 2개 + 폰트의 기본 높이(normal)
- 고정 값으로 주었을 경우
: 속성이 적용된 부분의 폰트 크기가 달라질 경우 line-height 값은px로 고정되어 있기 때문에 줄 간격이 흐트러짐 em으로 값을 주었을 경우
:em은 부모 요소의 폰트 크기에서 지정한 값만큼 곱해진 크기를 나타내기 때문에 자식 요소에서 더 큰 폰트 크기를 지정했을 경우 UI가 흐트러짐- 1로 주었을 경우
: 제일 적당한 방법 폰트의 위아래로 존재하는 leading 영역을 없애 줌
결론: line-height는 상대값으로 지정할 것
h1을 3개 작성했을 때 글자 줄 사이마다 약간의 여백이 있는 것을 확인할 수 있음
- 여백은 어디서 나왔나요?
- 사용자가 읽기 좋으라고 설정해 둔 leading 영역
line-height: 1;을 줄 경우 사라짐
2️⃣ letter-spacing
자간 넓이를 설정하는 속성
3️⃣ vertical-align
쭉 나열되어 있는 inline 요소들의 높이를 맞추기 위해 사용
Author And Source
이 문제에 관하여(TIL 04.07), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@plutoin/TIL-04.07-haf131ql저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
