본문 바로가기

Frontend/CSS

[CSS] 텍스트 꾸미기 속성, 폰트 제어 속성

728x90
반응형

텍스트 꾸미기 속성

들여쓰기 (text-indent)

text-indent : <length> | <percentage>;

 

정렬 (text-align)

text-align : left | right | center | justify;

 

텍스트 꾸미기 (text-decoration)

text-decoration : none | underline | overline | line-through;

 

ex) text-decoration 프로퍼티로 하이퍼링크에 밑줄 제거

<a href="http://www.naver.com" style="text-decoration : none"> 네이버</a>

 

ex) 3글자 들여쓰기

text-indent : 3em;

폰트 제어 속성

폰트 종류 (font-family)

font-family : Arial, "Times New Roman", Serif;

  • 폰트 이름에 공백이 낀 경우 " "로 묶어야 함
  • Arial 폰트가 없는 경우 "Times New Roman" 폰트, 이것도 없는 경우 유사한 Serief 형 중에서 선택

폰트 크기 (font-size)

font-size : 40px;         /* 40px 크기 */
font-size : medium;   /* 중간 크기. 크기는 브라우저마다 다름 */
font-size : 1.6em;      /* 현재 폰트의 1.6배 크기 */

 

폰트 스타일 (font-style)

font-style : italic;       /* 이탤릭 스타일로 지정 */

  • normal, italic, oblique

폰트 굵기 (font-weight)

font-weight : 300;     /* 100~900의 범위에서, 300 정도 굵기 */
font-weight : bold;    /* 굵게. 700 크기 */

단축 프로퍼티, font

font : font-style font-weight font-size font-family

  • font-style, font-weight, font-size, font-family를 순서대로 지정
728x90
반응형

'Frontend > CSS' 카테고리의 다른 글

[CSS] flexbox  (0) 2021.09.23
[CSS] 배치 - display, position, float  (0) 2021.09.22
[CSS] 박스 모델 구성 속성 - padding, border, margin  (0) 2021.09.20
[CSS] 선택자(selector) 정리  (0) 2021.09.20