2018. 3. 15. 00:59 카테고리 없음
CSS(Cascading Stylesheets) font 관련
color - 폰트 색상을 지정
font-family - 글씨체를 지정.
font-style - 이텔릭과 같은 스타일을 지정. // bold같은 체는 font-style이 아닌점
font-weight - 글자의 굵기를 조절 // bold 체를 하고싶은 경우 해당 속성에서 bold 혹은 700
으로 지정
font-variant - 영문자 소문자를 작은 대문자로 변경.
=> 특이한 속성 small-caps 로 지정시 소문자가 작은 대문자가 됨
line-height - 줄 높이를 지정하는 속성
줄 간격을 조절하는 속성입니다. 이 줄 간격을 조절함으로써,
문서의 가독성을 보다 향상 시킬 수 있습니다. px이나 % 등의 단위들이 사용가능 하며,
단위 없이 '1.5'와 같은 숫자만 입력할 경우 em과 동일하게 인식합니다.
예를 들어 만약 글씨 크기(font-size)가 10px이고, line-height 값이 1.5 라고 한다면 줄 간격은 10 * 1.5 = 18px 이 됩니다.
letter-spacing - 글자 사이의 간격 자간을 설정
(단위는 px cm in 등을 사용할수 있지만 px를 권장 normal 지정하면 0px랑 같음)
word-spacing - 단어와 단어 사이의 간격을 지정한다.
(단위는 px cm in 등을 사용할 수 있지만 px를 권장)
Hello World 일시 Hello 와 World의 사이를 지정한다.
font-size - 폰트의 크기를 지정.
12px 14px 16px로 지정할 수 있다.
px 혹은 %등의 단위를 사용이 가능하며 기본 숫자만 입력시는 em으로 지정됩니다.
<div style="font-size:15px"> <p style="font-size:1.5em"></p> <p style="font-size:150%"></p> </div>
<p> 태그에서
em 으로 지정시 1.5의 의미는 부모의 1.5배 즉 15px의 1.5배의 크기를 가집니다.
% 로 지정시 150%의 의미는 부모의 1.5배 즉 15px의 1.5배의 크기를 가집니다.
font - 글자 관련 속성의 축약 버전. font-family, font-style, font-size, font-weight, line-height들의 속성을 한번에 지정할수 있으며 해당 속성의 순서는 매우 중요합니다.