css 타이포그래피
lorem + 탭키 >>>>>>>>>>>>>>>>>>
더미 텍스트 생성
폰트관련 사이즈 종류>>>>>>>>>>>>>
px - 절대단위(고정된 값)
em - 상대단위 (상대적으로 비례한 값 표현 즉, 어떤값을 기준으로하냐에 따라 값이 달라짐)
equal to capitalM 즉, 대문자 M 사이즈의 크기를 기준으로 한다. (실제로 적용된 폰트 사이즈를 1em 으로보시면된다.)
rem - 상대단위 (상대적으로 비례한 값 표현 즉, 어떤값을 기준으로하냐에 따라 값이 달라짐)
root em 즉, 뿌리 뿌리는 html 이다. html 에 지정된 값을 기본으로한다는 말이된다.
line-height>>>>>>>>>>>>>>>>
줄 - 높이 / 줄 간격 조정!! 문장 아래위로 간격 크기 조절
보통 줄간격 사이즈 적을때
px em rem 다쓴다.
px 절대값
em 지금 이 요소한테 적용된 폰트사이즈 비례해서 몇배를 줄것인가?
rem html에 적용된 폰트사이즈에 비례해서 상대값을 줌
보통 em 을 많이쓴다.
em 은 보통 생략을 한다. (관례)
숫자만 달랑 적어논 경우가 많은데,
그거는 em으로 표현할때는 생략이 되기 때문에,
보통 숫자만 쓴다.
우리가 아래한글에 줄간격 150% 이런거 있는데,
그 150% 도 결국에는 해당 폰트사이즈에 비례해서 150% 를 먹이겠다는 겁니다.
즉,
em으로 할떄는
지금 내가 적용된 폰트사이즈 에서, 내가 여기서 몇배정도 띄워주는게 좋을까 그게 바로 em 임.
rem
은
html 에 font-size:20px;
줫다치면
자식인 p태그에 font-size: 1rem;
을 주게되면 html 폰트사이즈랑 똑같이 p태그에도 20px 이 적용됨.
그래서
라인 하이트를 쓰는방법은
p태그에도 라인하이트를 주고싶은데,
line-height:30px; 이렇게 직접적으로 줘도 된다.
근데,
1.5rem 이렇게 줄 수도 있다.
그리고
지금 p태그 폰트사이즈가 20px이니까,
30/20 나누기 를 하면
1.5 잖아.
그러니까
line-height:1.5;
해도 똑같이
30px 로 된걸 볼수있다.
letter-spacing>>>>>>>>>>>>>>>>>>>>>>>>
자간 조정
글자간의 간격을 조정한다.
px 도 있지만,
주로 em 을 자주 사용한다.
em 은 해당 폰트 사이즈에 비례해서 , 몇 퍼센트를 줄여주면 좋겠느냐 이말임.
레터스페이싱은 em은 생략할 순 없고 적어줘야함.
letter-spacing:-.03em;
이런식
즉, 글자에 비례해서 늘리고 줄이고,,,
-1/100 하면 0.01 이니까
letter-spacing: -0.01em;
font-family>>>>>>>>>>>>>>>>>>>>>>>>>>>
폰트 가족, 폰트 서체를 표현할때 쓰는 속성
내가 사용하고자하는 서체를 나열하면된다.
font-family: "poppins"; 팝핀스라는 폰트를 적용해라
font-family: "poppins", sans-serif; 팝핀스 적용하고 안되면 산스 세리프 적용해라
font-family: "poppins", "Robert", sans-serif; 팝핀스 없다면 로버트 것도안되면 아무 산스세리프 ㄱㄱ
앞에있는 서체를 사용하는게 우선으로 적용됨
중요한건 컴퓨터안에 그 폰트가 없으면 적용이 안되니 설치를해야겠쥬,,,,
font-weight>>>>>>>>>>>>>>>>>>>>>>>>
폰트의 굵기
font-weight: 400;
무조건 100단위 150이런건 안먹힌다.
보통 300은 라이트, 400은 레귤러사이즈 , 700 은 볼드사이즈 라고 외워두면편함.
참고로 300 400 700 무조건 백단위로 먹여야됨 즉, 750 이런건 안먹힌다.
color >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
글씨의 색상
컬러를 사용할 때 사용할 수 있는 방식, 3가지 있음
hex
#0066ff
rgb
rgb(0,102,255)
rgba
투명도 설정하는애
rgba(0,102,255,1)
끝에 1 이게 투명도 설정하는 값임 1은 조금 투명함 , 0이면 완전히 100% 투명한것 , 0.5면 50% 투명한것
text-align>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>.
텍스트를 정렬
left | right | center
text-indent>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>..
텍스트 들여쓰기 ,들여쓰기는 그 탭키누르면 쑥들어가는거 그거를 말함
태그 에
text-indent: 100px;
하면 처음 문장 앞글자에 인덴트가 생김
침고로 -값도 사용가능.
text-transform >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>.
텍스트 변형
(영어 알파벳 순서로된 어어에 만 상관있고 한글 중국어 이런건 적용안됨)
여튼
알파벳을 소문자로바꾸고 대문자로바꾸고 하는 속성임
text-transform: none; 말그대로 논
text-transform: capitalize; 앞글자 대문자
text-transform: uppercase; 모든글짜 대문자
text-transform: lowercase; 모든글자 소문자
text-decoration >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>.
텍스트를 꾸미기, 꾸미기라고해서 대단한거아니고 줄긋기 정도임
text-decoration: none; 논 기본값 아무 기본효과도 효과주지않기
text-decoration: underline; 밑줄
text-decoration: line-through; 그 글자중간 줄그어진거,,,
text-decoration: overline; 글자위에 줄생기는거
text-decoration: none;
주로 이걸 많이 쓰는데
이건 언제 많이 쓰냐면,
a태그 치면
a태그 기본속성이 자동언더라인이 생기는건데,
text-decoration: none; 하면 없어짐
이떄쓰는거임.
font-style >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
폰트스타일
normal | italic | oblique
3가지
이탈릭체 즉, 기울어지는,,그거 할떄 쓰는거
이거는 보통
em태그 쓰면 기본 이탈릭체로 기울어져있는데,
font-style:normal;
하면 없앨때 씀.
vertical-align:top;
