Salangdung_i의 기록

CSS 텍스트 관련 스타일 본문

WEB FRONT END/HTML5+CSS

CSS 텍스트 관련 스타일

Salangdung_i 2021. 11. 1. 19:15
728x90
  • font-family - 글꼴을 지정하는 속성
  • font-size - 글자 크기를 지정하는 속성
  • font-weight - 글자 굵기를 지정하는 속성
  • color - 글자 색을 지정하는 속성
  • text-align - 텍스트 정렬 방법을 지정하는 속성
  • line-height - 줄 간격을 조절하는 속성

font-family 

font-family:<글꼴 이름>[,<글꼴이름>,<글꼴이름>]
body { font-family:"맑은 고딕", 돋움, 굴림} // 문서전체에 "맑은 고딕" 만약 없다면 돋움, 돋움도 없다면 굴림 적용

@font-face - 웹 폰트 사용

@font-face { font-family:글꼴 이름; src:url(글꼴 파일 경로) format(파일 유형); }


구글 폰트 : https://fonts.google.com/earlyaccess

 

Google Fonts

Making the web more beautiful, fast, and open through great typography

fonts.google.com

1. 구글 폰트 사이트에 접속후 원하는 폰트에서 Select this style을 클릭한다.

2. @import 클릭하고 아래의 코드를 긁어온다.

3. <style>태그안에 삽입한다. 

<!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8"> <title>웹 폰트 사용하기</title> <style> @import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic&display=swap'); .ng-font { font-family: 'Nanum Gothic', sans-serif; /* 웹 폰트 지정 */ } p { font-size:30px; /* 글자 크기 */ } </style> </head> <body> <p>브라우저 기본 글꼴 사용</p> <p class="ng-font">나눔고딕 웹 폰트 사용</p> </body> </html>

 

font-size

font-size: <절대 크기>|<상대 크기>|<크기>|<백분율>
{ font-size: 3em; }
단위 설명
em 해당 글꼴의 대문자 M의 너비를 기준으로 크기를 조절한다. 모바일 기기까지 접속할 경우까지 고려하면 em 단위를 사용하는것이 좋다.
ex x-height(엑스 하이트). 해당 글꼴의 소문자 x 높이를 기준으로 크기를 조절합니다.
px 픽셀, 모니터에 따라 상대적 크기가 된다.
pt 포인트, 일반 문서에서 많이 사용되는 단위. 웹에서 주로 많이 사용하지만 폰트의 크기가 고정되기 떄문에 창크기가 작은 모바일기기로 볼때는 권장하지 않는다.

 

font-weight

속성 값 설명
normal 기본형탱
bold | light | bolder 굵게 | 원래 굵기보다 더 가늘게 | 원래 굵기보다 더 굵게
100 ~ 900 400은 normal, 700은 bold

font-variant - 작은 대문자로 표시

  • normal : 일반적인 형태
  • small-caps : 작은 대문자로 표시
 <style> .textstyle { font-variant: small-caps; font-weight: bold; } </style>

font-sytyle

  • normal : 일반적인 형태
  • italic : 이탤릭체로 표시
  • oblique : 이텔릭체로 표시

text-decoration

  • none : 밑줄을 표시하지 않음
  • underline : 밑줄 표시
  • overline : 영역 위로 선을 그림
  • line-through : 취소선 그림

text-transform 텍스트 대,소문자 변환하기

  • none : 변환하지 않음
  • capitalize : 시작하는 첫번째 글자를 대문자로 변환
  • uppercase : 모든 글자를 대문자로 변환
  • lowercase : 모든 글자를 소문자로 변환
  • full-width : 가능한 모든 문자를 전각 문자로 변환

참고 서적
http://m.yes24.com/Goods/Detail/85112155?pid=157529

 

Do it! HTML5+CSS3 웹 표준의 정석 - YES24

7년 연속 웹 분야 1위시간이 흘러도 흔들리지 않는 웹 기본기를 쌓고 싶다면 역시 정석으로 배워야 한다7년 연속 웹 분야 1위를 굳건히 지키고 있는 『Do it! HTML5+CSS3 웹 표준의

m.yes24.com

(Do it! HTML5+CSS3 웹표준의 정석, 이지스퍼블리징(주), 2017)을 학습하고 개인 학습용으로 정리한 내용입니다.

728x90

'WEB FRONT END > HTML5+CSS' 카테고리의 다른 글

CSS 레이아웃 block, inline, display, position  (0) 2021.11.14
CSS variables  (0) 2021.11.12
CSS 기초  (0) 2021.11.01
HTML 멀티미디어 태그  (0) 2021.10.29
HTML5 시멘틱태그  (0) 2021.10.28
'WEB FRONT END/HTML5+CSS' Related Articles more