텍스트 스타일은 글자의 모양을 지정하는 글꼴 스타일과 텍스트를 지정하는 문단 스타일이 있다.
📄 글꼴과 관련된 스타일을 지정하는 속성들을 정리한 글
글꼴과 관련된 스타일을 지정하는 속성들은 font로 시작되는 속성이다.
글자 크기, 굵기, 글꼴 등을 지정할 수 있다.
웹문서에서 사용할 글꼴을 지정할 때 사용하는 속성이다.
이 속성을 사용할 때 사용자 시스템에 글꼴이 설치 되어있지 않았을 때 의도하지 않은 글꼴이 표시되기 때문에 두 번째, 세 번째 글꼴까지 생각하여 지정해야 한다.body { font-family: "맑은 고딕", 돋움, 굴림; }
글꼴을 지정할 때 두 단어 이상으로 된 이름은 큰따옴표("")를 사용하여 작성한다.
글자 크기를 지정할 때 사용하는 속성이다.
단위는 px(절대 크기), em(상대 크기), %(백분율) 등으로 지정할 수 있다.body { font-size: 16px; }
- 절대 크기 : 브라우저에서 지정한 글자 크기
- 상대 크기 : 부모 요소의 글자 크기를 기준으로 상대적인 글자 크기
- 백분율 크기 : 부모 요소의 글자 크기를 기준으로 계산(부모 요소 크기가 절대 크기로 지정되어 있어야 한다.)
글자 굵기를 지정할 때 사용하는 속성으로 웹 문서를 작성할 때 자주 사용한다.
굵기는 예약어(normal, bold, bolder, lighter)나 100~900 사이의 숫자로 지정할 수 있다.body { font-weight: bold; } .container { font-weight: 200; }
글자를 이탤릭체로 표시할 때 사용하는 속성이다.
속성값은 italic, oblique(단순 기울기)가 있는데 주로 italic을 사용한다.body { font-style: italic; }
font-family 속성을 사용하여 글꼴을 지정할 때 사용자 시스템에 글꼴이 없을 경우를 대비하여 2~3개의 글꼴을 지정했다.
하지만 웹 폰트를 사용하면 사용자 시스템에 없는 글꼴도 사용할 수 있다.
CSS3가 표준으로 채택한 것으로 웹 폰트를 사용하려면 웹 문서를 작성할 때 글꼴 정보를 저장한다.
따라서 사용자가 사이트에 접속하면 웹 폰트가 사용자 시스템에 다운로드 된다.
자신이 가지고 있는 폰트를 사용할 수도 있고, 구글 폰트를 사용하여 글꼴을 지정할 수 있다.
- 자신이 가지고 있는 폰트 사용하기
@font-face { font-family: '글꼴 이름 지정'; /* 이 글꼴을 사용할 때 작성할 이름 */ src: local('글꼴 이름'), /* 사용자 시스템에 글꼴이 있는지 확인 */ url('글꼴 파일 경로') format('글꼴 파일 포맷'), url('글꼴 파일 경로') format('글꼴 파일 포맷'), /* 파일 포맷은 woff, truetype(ttf), svg 등이 있다.*/
- 구글 폰트 사용하기
- [fonts.google.com] 에 접속 -> [Language] 목록에서 [Korean]을 선택(한글 글꼴만 보기)
- 원하는 글꼴 선택 -> [select this style] 클릭
- 상단 아이콘 클릭 -> [@import] 클릭 -> 하단의 코드 각각 복사 -> 웹 문서에 붙여넣기
/* 주로 css파일 최상단에 작성 */ @import url('https://fonts.googleapis.com/css2?family=Gamja+Flower&family=Gentium+Plus:ital@1&display=swap'); body { font-family: 'Gamja Flower', cursive; }