💻 text
1. font-family
1) 자주 쓰는 폰트
VsCode에서 추천해주는 폰트를 사용
순서대로 이용가능한 폰트를 사용
font-family: Arial, Helvetica, sans-serif'
2) google font
3) font-face
@font-face {
font-family: font;
src: url(./font.ttf);
}2. font 단축 속성 (shorthand)
폰트 관련 속성들을 한 줄에 작성할 수 있다.
필수요소: font-size, font-family
선택 요소: font-style, font-weight, font-varient,line-height
작성 방법 (순서 꼭 지키기)
font: 스타일, 두께, 사이즈/행간, 서체;
3. text-indent
문단이 시작할 때 tab 의 수치를 정할 수 있다.
단위로 %를 사용할 경우 가로 넓이에 비례한다.
단, block 요소에만 적용 됨.
4. word-break
단어가 띄어쓰기 없이 쭉 이어져 있을 때
한중일 언어일 경우: 주어진 넓이에 최대한 맞춘 후 단어가 중간에 잘리더라도 다음 줄로 넘어 감.
외의 언어일 경우: 단어가 중간에 끊기지 않고 아예 여백을 둔 채 다음 줄로 넘어 감. 해당 줄의 시작 단어일 경우 넓이를 무시하고 끝까지 이어짐.
따라서 그 설정을 반대로 바꾸기 위해서는 아래의 태그를 사용
한중일 언어: word-break: keep-all
외의 언어: word-break: break-all
5. text-underline-offset
text-underline-offset 속성은
text-decoration: underline; 의 오프셋을 설정합니다. 이 속성으로 밑줄 높이를 조절할 수 있습니다.
text-underline-offset: auto; /*기본 값*/
text-underline-offset: 10px;
text-decoration: underline;💻 마진 상쇄(Margin-collapsing)
블록의 top 및 bottom 마진은 때로는 (결합되는 마진 중 크기가) 가장 큰 한 마진으로 결합(combine, 상쇄(collapsed))됩니다, 마진 상쇄(margin collapsing)로 알려진 행동
-MDN
여러 블록 (block) 요소들의 위/아래 마진이 경우에 따라 더 큰 마진을 가진 값만 적용하고 나머지 값은 버리는 현상
1. 인접 형제 간 상하 마진이 겹침
겹쳐진 두 마진 값 중 큰 값으로 상쇄 후 렌더링, 동일할 경우 하나만 렌더링
2. 빈 요소의 상하 마진이 겹침
- border, padding, content, height 가 존재하지 않으면, 자신의 상하 마진 중 큰 값을 선택하여 상쇄한다.
- 만약 빈 요소 위/아래 요소에도 마진 값이 있을 경우 그 값과도 비교하여 마진이 상쇄된다.
3. 부모와 자식의 마진이 겹침
- 부모 블록에 border, padding, inline content가 없어서 부모와 자식의 margin-top이 만나는 경우
- 부모 블록에 border, padding, inline content가 없고, 부모-자식을 분리할 height 값이 지정되지 않아 부모와 자식의 margin-bottom이 만나는 경우
❕ 마진 상쇄 규칙 예외
1) 좌우 마진은 상쇄되지 않는다.
2) 두 박스가 display: block일 때만 일어난다.(inline-block, flex, gird일 때 x)
3) position: absolute일 때 상쇄되지 않는다.
🔗 참고: 마진 상쇄 원리 완벽 이해
💻 a 태그
기본 주소 외에도, 메일이나 전화 형식을 취할 수 있다.
<a href="mailto:@.com">Send Mail</a>
<a href="tel:8210-1234-7583">(+82) 12345678 4</a>❗ target
_self: 현재 위치에서 이동_blank: 새 탭에서 이동_parent/_top
💻 box max, min
.container {
width: 50%;
height: 60%;
min-width: 300px;
max-height: 800px;
}max-width min-width max-height min-height
💻 vmin, vmax
디바이스가 세로 모드 -> 짧은 면인 가로가 100vmin, 긴 면인 세로가 100vmax
가로 모드인 경우 세로가 100vmax, 가로가 100vmin
화면에 정사각형을 노출하고 싶을 때,
.container {
width: 100vw;
height: 100vw;
}일 경우 가로 길이가 늘어남에 따라 화면의 비율이 바뀌어 스크롤이 생기게 된다.
하지만 아래와 같은 방법으로 구성하면
.container {
width: 100vmin;
height: 100vmin;
}무조건 짧은 면을 100으로 보고 그걸 기준으로 하기 때문에 세로가 길 땐 가로 넓이만큼, 가로가 길어지면 세로 높이만큼만 크기를 차지하게 되어 정사각형이 화면에 항상 보이게 된다.
- 근데 한 번 화면에 구현해보는 게 이해가 빠를 듯.
💻 padding, margin %
padding과 margin의 값을 %으로 지정할 경우, 무조건 부모의 width 값을 기준으로 한다.
만약 padding-top 등을 %으로 표시할 경우에도 부모의 height 값이 아닌, width를 기준으로 하는 것을 알아두기!
💻 calc(), min(), max()
1. calc()
만약 100%의 넓이에서 50px만 빼고 싶을 경우, 절대 값과 상대 값이 겹쳐 정확한 넓이를 계산하기가 어렵다.
이럴 경우 calc() 함수로 산술연산(+-/*) 을 하면 계산식을 만들 수 있다.
예시) width: calc(100% / 30px);
이때, 연산자 좌우에는 공백이 있어야 한다!
2. min(), max()
width: min(a,b);
height: max(c,d);min - a와 b 중 작은 값을 선택하여 적용
max - c와 d 중 큰 값을 선택하여 적용
예시) width: min (30%, 70px);
