많이 사용하는 텍스트 속성
| 속성 | 설명 | 비고 |
| font-family | 어떤 폰트를 사용 할지 | |
| font-size | 폰트의 크기 정함 | 웹단위 설정 |
| font-style | 폰트의 모양이 normal 또는 italic 또는 oblique인지 | normal, italic, oblique |
| font-weight | 폰트의 두께 | 웹단위 설정 |
| font-variant | 영문 폰트 모양 조절 | normal, small-caps |
| line-height | 텍스트와 텍스트 사이 간격 설정 | 웹 단위 설정 |
| text-transform | 영문자를 대문자, 소문자를 대문자 | capitalize, uppercase, lowercase, none |
| text-decoration | 폰트의 밑줄 등 꾸밈 | 웹 단위 설정 |
| word-spacing | 단어 간의 간격 설정 | 웹 단위 설정 |
| letter-spacing | 글자 간의 간격 설정 | 웹 단위 설정 |
| vertical-align | 세로 정렬 설정 | baseline, sub, super, top, text-top,middle, bottom, text-bottom, inherit |
| text-align | 왼쪽, 중앙, 오른쪽 정렬 설정 | left, right, center, justify |
| text-indent | 들여쓰기 or 내어쓰기 | 음수값 조절 가능 |
font-family
폰트관련 속성은 font-로 시작한다 한국말로는 '글꼴-가족'이라고 할 수 있다
속성을 설정해주는 이유는 우니도우, 맥, 리누스 등에서 컴퓨터의 기본 폰트에서 차이가 나기때문이다
한글 윈도우와 매킨토시(맥) 운영체제엥서 사용하는 기본 폰트는 완전히 다르다
웹페이지를 만들 때 하나의 시스템에서만 사용하는 폰트를 적용하는 것보다 차이를 줄일 수 있는 방법을 찾아야 한다
font-family: "돋움", dotum, AppleGothic, sans-serif기본 폰트로 "돋움"을 사용하고 시스템에 없을경우 "AppleGothic" , 이것도 없으면 시스템에 있는 "sans-serif" 사용한다
"돋움"과 "dotum"을 두 번 써준이유는 한글 위동우 시스템은 "돋움"을 알지만 영문 시스템은 모른다
SERIF 와 SANS-SERIF의 차이는 삐침이 있고 없고의 차이다
font-size
폰트의 크기를 결정하는 것이다 사이즈에는 고정형과 가변형이 있다
고정형은 웹 폰트 사이즈를 지정해 주면 웹 브라우저에서 폰트를 크게 하더라도 폰트 사이즈가 고정된다
가변형은 브라우저에서 폰트를 크게 하거나 작게 하면 폰트 사이즈도 같이 바뀐다
브라우저의 기본 폰트 사이즈는 16px이다
| 단위 | 발음 | 설명 |
| em | 이엠(엠) | 가장 많이 사용되는 단위로 현재 요소와 연관된 폰트 사이즈 . 일반적인 웹 브라우저 크기가 16px이 기본인데 1em은 16px이다. 현재 요소와 연관되어 크기가 상대적으로 변한다 |
| rem | 렘 | 렘은 엠과 같지만 앞의 r은 root를 의미한다 패밀리트리의 root요소와 연관되어 폰트 사이즈가 변한다. 따라서 현재요소와 상관X |
| vw | 브이더블유 | 현재 보이는 윈도우 사이즈의 1% 세로크기 예를들어 현재 윈도우 세로가 700px 이면 1vw == 70px 이다 |
| vh | 브이에이치 | 현재 보이는 윈도우 사이즈의 1% 가로크기 에를들어 현재 윈도우 가로가 700px 이면 1vh == 70px 이다 |
| vmin | 브이민 | 가로 최소 크기를 정하는 것으로 해당 크기 이상 커지지않는다 |
| vmax | 브이맥스 | 가로 최대 크기를 정하는 것으로 해당 크기 이하로 작아지지 않는다 |
| % | 퍼센트 | 일반적으로 사용하는 퍼센트 |
이 중 rem, em ,% 는 가변형이고 나머지는 고정형이다
웹에서 보통 px, %, em, rem 정도 이용한다고 한다
html {
font-size: 20px;
}하게되면 1rem 값은 20xp
line-height
문단과 문단 사이의 간격을 조절한다
주의 할 점은 line-height의 단위를 가변형으로 하는 것이 좋은데
브라우저 크기가 바뀔때 문단의 가변형 글자크기가 커지면서 문단과 문단이 겹칠 수 있기 때문이다
text-indent
들여쓰기 하기 위함이다
p {
text-indent: 1.5em;
}p태그가 적용되는 모든 문장에 들여쓰기가 된다
vertical-align
글자의 위아래 위치를 지정할 수 있다
inline 요소만 가능하다
둘다 각각의 span태그를 사용했다
.x {
vertical-align: sub;
font-size: 20px;
}
.x2{
vertical-align: super;
}
font-weight
글자의 굵기를 나타낸다
.a2{
font-weight: bolder;
}
font-variant, text-transform
한글에서는 필요없다.
문장 첫 글자만 대문자 처리하거나 전체 문장을 작은 대문자로처리, 전체 문장을 대문자처리할 때 쓴다
text-decoration
:hover와 같이 하이퍼링크에 사용해 주면 링크가 걸린 부분에 마우스 포인터 올릴 때 효과를 줄 수있게 처리한다
word-spacing
단어와 단어 사이 간격 조정
letter-spacing
한 글자 사이 간격
text-align
문장 정렬 또는 인라인 태그인 이미지도 정렬 할 수 있다
참고: '백견불여일타HTML5&CSS3'
