📌 font 관련 속성
🧃 text-align
block요소에 적용 가능
🧃 text-indent
- 첫번째 줄 앞부분 들여쓰기
- 자식에게 상속됨
block요소에만 적용
text-indent: 20px; or 50%; (전체 가로의 절반)🧃 text-decoration
-
css 단축속성
shorthand -
underline,color,style,thickness순서는 상관없음 -
underline
overline 글씨 위 줄
line-through 글씨 중간, 취소선 -
thickness
solid 실선
double 두줄
dotted 점선
dashed 긴 점선
wavy 물결
text-decoration: line-through red 2px dotted;🧃 word-break
break-all: 영어, 자동 줄바꿈keep-all: 한중일, 스페이싱없으면 부모 뚫고 나옴
🧃 text-transform
- 한글에는 적용X
- 몇가지 언어에만 한정적으로 적용
- 눈에 보이는 스타일만 변경
uppercase대문자화
lowercase소문자화
capitalize단어의 앞글자 대문자
📌 상대길이, 절대길이
-
상대길이
a. 글꼴 상대길이 -em,rem
b. 뷰포트 백분율길이 -vw,vh -
절대길이 -
px..
px절대길이 단위
font-size를 설정할 땐 접근성 문제 때문에 상대길이를 사용 (확대시 브라우저 설정을 먹지 않고 계속 절대길이로 고정되어 있음)
🧃 상대길이 단위 em
- 1em = 부모의 font-size
- % 퍼센트랑 같음
🧃 상대길이 단위 rem
- 1rem = root의 font-size
- root는
<html>의<body>를 이야기함
=브라우저에 설정된 폰트 사이즈
🧃 상대길이 단위 vw
- viewport width
- 뷰포트의 길이를 100으로 두고 50vw -> 너비의 절반
- 디바이스에 따라서 반응형으로 웹사이트를 만들떄 유용
🧃 상대길이 단위 vh
- viewport height
뷰포트?
브라우저에서 웹사이트를 볼 수 있는 크기
🧃 상대길이 vmin
- 가로 세로 중에 더 짧은 쪽
🧃 상대길이 vmax
- 가로 세로 중에 더 긴 쪽
- 화면이 세로모드, 가로모드일 때 마다 다르게 정해짐
- 반응형 웹사이트 중에서 가로, 세로모드를 대응해야하는 일이 있을 때 사용
🧃 퍼센트
- 100%에 해당하는 기준 = 부모의 해당 값
📌 함수 표기법
🧃 calc()
- 여러개의 단위를 섞어서 계산가능
- 나누기, 곱하기는 숫자로만
calc(100% - 80px)🧃 min()
min(100%, 500px)- 두개 값중에 작은 값 선택됨
- 화면이 작을 땐 100%가 더 작은 값으로 선택되지만 화면을 늘리면 500px이 작은 값이 되고 이 이상 안늘어남
🧃 max()
min(100%, 500px)- 두개 값중에 큰 값 선택됨
- 화면이 클 땐 100%가 더 큰 값으로 선택되지만 화면을 줄이면 500px이 더 큰 값이 되고 화면을 더 줄여도 500px보다 안작아짐
- 익스플로러는 지원X
