[HTML/CSS] 폰트 관련 속성/단위와 값

CH3. 폰트 관련 속성

1) font

font-size

• 폰트 크기
• 기본값은 16px

font-style

• 폰트 모양 바꿈
• 기본적으로 italic 사용

font-weight

• 폰트의 굵기 (100-900)
• 기본값은 normal (400)

.text {
	font-size:80rem;
	font-style:italic; /*강조하기 위해 사용*/
	font-weight: bold;
	
}

font-family

• 글꼴 자체를 변경하기 위해 사용
• 여러 개를 나열해 앞에 위치한 폰트가 없다면, 다음 폰트가 있는지 확인함
• 중간에 공백이 있다면 ""로 감싸줌

.text {
	font-family: Arial, sans-serif;
	
}

line-height

• 행간. line-height를 설정해주지 않으면 폰트에 따라 달라짐

.text {
	line-height: 24px;
	/*단위 표현으로도 가능*/
}

2) font와 단축 속성(shorthand)

• font 종류를 하나하나 작성하지 않고 한 번에 작성하는 방법
• 순서 지켜서 작성하기 font-style font-weight/line-height font-size font-family 순서대로 작성
  

.text {
	font: [font-size], [font-family], [그 외는 선택];
}

⚠ shorthand 사용 시 주의사항
아래처럼 작성하면 기본 값으로 돌아감
shorthand의 작성 순서를 지켜서 작성
(두 속성의 순서가 바뀌면 괜찮음🙆‍♀️)

.text {
	font-size: 20px;
	font: ~~[font-size],~~ [font-family], [그 외는 선택];
}

3) spacing

letter-spacing

• 자간, 글자간의 간격
• 기본값은 normal

word-spacing

• 단어간의 간격
• 기본값은 normal

.text {
	letter-spacing: -1px;
	word-spacing: 2px;
/*음수도 사용 가능*/
}

3) text

text-align

• text 정렬
• block 요소일 때만 적용 가능
• inline에 정렬하고 싶다면, 부모 block 요소에 추가해줘야함

.text {
	text-align: center;
}

text-indent

• 들여쓰기 여백
• block 요소일 때만 적용 가능

.text {
	text-indent: 20px;
}

text-decoration (shorthand)

• text-decoration-line, color, style, thickness를 합쳐놓은 요소 (순서는 상관없음)
  
• line : none, underline, overline, line-through
  • 중복 사용 시, 순서 붙여서 사용
• color : line color
• style : solid, double, dotted, dashed, wavy
• thickness : size

.text {
	text-decoration: line-through red 1px dotted;
}

4) word-break

• 단어가 범위를 넘어갔을 때의 처리
• break-all : 단어 하나하나마다 자름
• keep-all : 처음부터 끝까지 이어짐 (한 단어 취급)

5) text-transform

• 문자를 대문자로 바꾸거나 소문자로 바꾸는 등의 속성
• 한국어는 지원되지 않음

CH4. 단위와 값

1) 숫자, 길이 및 백분율 - 절대길이

• 브라우저에서 글꼴 크기를 조절해도 설정한 값이 유지됨 (접근성에 문제가 있을 수 있음) ex) px
  

2)숫자, 길이 및 백분율 - 상대길이

• 확대 등에 따라 크기가 달라짐
• 1em = 부모의 font size 부모의 font size가 없다면 웹의 기본 크기가 적용됨(16px)
  
• 1rem = root의 font size 무조건 웹의 기본 크기가 기준
  
• vw = viewport weight 100vw이 max
  
• vh = viewport height 100vh이 max
  
• vmin, vmax
  • 가로 모드, 세로 모드에 따라 viewport의 크기가 달라지는 경우
  • 각각 가로와 세로 중 작은 것, 큰 것으로 골라짐

✔ 브라우저 여백
기본적으로 body에 margin이 들어있기 때문에 body{margin: 0} 해줘야 여백 없어짐

3) 퍼센트

• 부모 객체와의 상대적 크기 (부모 크기가 100%)

4) 함수 표기법

calc()

• 상대길이와 절대길이 단위가 달라질 때 calc()로 계산할 수 있음
• ⚠ 연산자 좌우에는 공백을 넣어주어야 함

width: calc(100% - 80px);

min()

• 두 크기 중 작은 값을 선택

width: min(100%, 80px);

max()

• 두 크기 중 큰 값을 선택

width: max(100%, 80px);