[HTML, CSS] - CSS 텍스트 / 글꼴
CSS 텍스트
color
텍스트의 색상을 설정
웹 페이지에서 텍스트의 기본 색상은 검정색
<body>태그에 명시된 color 속성값은 웹 페이지 내의 모든 텍스트 요소에 적용
만약 각 요소별로 따로 명시된 color 속성값이 있다면, 해당 속성값이 <body>태그에 명시된 속성값보다 우선 적용
direction
텍스트가 써지는 방향을 설정
웹 페이지에서 텍스트는 기본적으로 왼쪽에서 오른쪽 방향
left-to-right(ltr)일 때는 기본 설정처럼 텍스트가 왼쪽에서 오른쪽 방향
right-to-left(rtl)일 때는 텍스트가 반대 방향인 오른쪽에서 왼쪽 방향
letter-spacing
텍스트 내에서 글자 사이의 간격을 설정
word-spacing
텍스트 내에서 단어 사이의 간격을 설정
문자 간의 간격이 아닌 단어 간의 간격을 기준으로 설정
text-indent
단락의 첫 줄에 들여쓰기할지 안 할지를 설정
웹 페이지에서 단락은 기본적으로 들여쓰기가 설정되어 있지 않음
text-align
텍스트의 수평 방향 정렬을 설정
text-direction 속성과는 상관없이 우선적으로 적용
text-align-last : 텍스트의 마지막 줄의 정렬 방법을 설정함.
text-decoration
텍스트에 여러 가지 효과를 설정하거나 제거하는데 사용
text-decoration 속성값을 none으로 설정하여 링크(link)가 설정된 텍스트의 밑줄을 제거하는데 자주 사용
text-transform
텍스트에 포함된 영문자에 대한 대소문자를 설정
텍스트에 포함된 모든 영문자를 대문자나 소문자로 변경
단어의 첫 문자만을 대문자로 변경
한글에는 영향을 주지 않으며, 오직 영문자에만 적용
line-height
텍스트의 줄 간격을 설정
text-shadow
텍스트에 간단한 그림자 효과를 설정
unicode-bidi
direction 속성과 같이 사용하여 텍스트의 기본 출력 방향을 설정
vertical-align
HTML 요소 내의 수직 방향 정렬을 설정
white-space
HTML 요소 내의 여백을 설정
text-overflow
콘텐츠(content) 영역을 벗어난 텍스트를 어떻게 표현할지를 설정
영역을 벗어난 텍스트 부분을 자를 수도 있으며, 생략 부호(…)를 사용하여 표현 가능
속성값 visible
사용자에게 콘텐츠 영역을 벗어나 생략된 텍스트까지 보여줄 수 있음
word-wrap
콘텐츠 영역을 벗어난 길이가 긴 단어를 다음 줄에 나누어 표현
영문자로 구성된 단어에만 적용되며, 한글에는 적용되지 않음
word-break
길이가 긴 단어를 나누어 표현해야 할 때 단어가 나뉘는 기준
단어를 문자별로 나눌 수도 있으며, 하이픈(-)을 기준으로 나눌 수도 있음
영문자로 구성된 단어에만 적용되며, 한글은 자동으로 속성값이 break-all로 적용
text-emphasis
사용자가 강조 표현을 설정
text-justify
텍스트의 정렬이 양끝 맞춤으로 되어 있을 때 그 정렬 방법을 설정
CSS 글꼴
글꼴 집합
- generic family : 비슷한 모양을 가지는 글꼴 집합 ("Serif", "Monospace" 등)
- font family : 특정 글꼴 집합 ("Times", "Courier" 등)
font-family
하나의 글꼴만을 설정할 수도 있고, 여러 개의 글꼴을 같이 설정 가능
글꼴의 이름이 한 단어 이상으로 이루어지면 반드시 따옴표를 사용
속성값이 여러 개의 글꼴로 설정되어 있으면, 웹 브라우저는 위에서부터 순서대로
font-style
normal : 텍스트에 어떠한 스타일도 적용하지 않음
italic : 텍스트를 이탤릭체로
font-variant
속성값이 small-caps로 설정되면, 텍스트에 포함된 영문자 중 모든 소문자를 작은 대문자(small-caps) 글꼴로 변경
영문자 중 대문자는 기존 크기 그대로 출력
작은 대문자 : 텍스트의 기존 대문자보다는 약간 작은 크기의 대문자
한글에는 적용되지 않으며, 영문자에만 적용
font-weight
텍스트를 얼마나 두껍게 표현할지를 설정
lighter, normal, bold, bolder
100~900
font-size
텍스트의 크기를 설정
제목에는 HTML 요소인 <h1>태그부터 <h6>태그만 사용
백분율 단위(%) :기본 크기를 100%로 놓고, 그에 대한 상대적인 크기를 설정
배수 단위(em) : 해당 글꼴(font)의 기본 크기를 1em으로 놓고, 그에 대한 상대적인 크기를 설정
픽셀 단위(px) : 스크린의 픽셀(pixel)을 기준으로 하는 절대적인 크기를 설정
웹 글꼴
트루 타입 글꼴(TrueType Fonts, TTF)
Apple과 Microsoft가 공동으로 개발한 외곽선 글꼴 표준
이 글꼴은 맥(MAC)과 윈도우(Window) 운영체제에서 가장 오랫동안 사용되어 온 대표적인 글꼴
트루 타입 글꼴은 해당 글꼴이 다양한 글꼴 크기에서 어떻게 표현될지에 대한 수준 높은 제어 가능
오픈 타입 글꼴(OpenType Fonts, OTF)
사용자가 자신의 컴퓨터에서 크기를 조절할 수 있는 글꼴 표준
Microsoft에서 개발하였으며, 현재는 거의 모든 컴퓨터에서 사용
유니코드를 기반으로 다양한 스크립트를 지원하며, 한 번에 여러 스크립트를 함께 지원할 수 있음
웹 오픈 글꼴(The Web Open Font Format, WOFF)
웹 페이지에서 사용할 수 있는 글꼴 표준
현재 W3C에서 사용을 권장하고 있는 글꼴 표준
이 글꼴은 추가 메타데이터(metadata)를 넣어 압축한 트루 타입 또는 오픈 타입 글꼴
웹 오픈 글꼴 2.0(The Web Open Font Format 2.0, WOFF 2.0)
1.0 버전보다 더 나은 압축률을 제공하는 트루 타입 또는 오픈 타입 글꼴
SVG 글꼴(SVG Fonts/Shapes)
SVG 요소로 텍스트를 그릴 때 그 표본으로 사용되는 글꼴 표준
SVG 문서에 CSS를 적용할 수 있도록 해줄 뿐만 아니라, @font-face 규칙도 적용 도움
임베디드 오픈 타입 글꼴(Embedded OpenType Fonts, EOT)
Microsoft가 웹 페이지에서 사용하기 위해 개발한 내장형 글꼴로, 오픈 타입 글꼴
@font-face 규칙
웹 폰트(web font)를 정의할 때 사용하는 규칙
웹 폰트(web font)는 사용자의 컴퓨터에 설치되어 있지 않은 글꼴(font)을 웹 브라우저가 사용할 수 있음
우선 font-family 속성을 이용하여 새로운 웹 글꼴을 위한 이름을 정의하고 해당 웹 글꼴이 사용할 글꼴 파일의 주소 지정
1. 웹 폰트를 서버에 올림
2. CSS 파일에 @font-face 규칙을 사용하여 웹 폰트를 정의하고 추가
3. 해당 웹 페이지에 접속하는 모든 웹 브라우저는 자동으로 서버에서 웹 폰트를 내려받아 해당 글꼴을 표시
속성값 font-family
필수, 글꼴의 이름
속성값 src
필수, 글꼴 파일의 주소
속성값 font-weight
선택, 글꼴의 굵기. 기본값은 "normal"
속성값 font-stretch
선택적이며, 글꼴의 크기가 늘어나는 방법, 기본값은 "normal"
속성값 font-style
선택, 글꼴의 스타일,기본값은 "normal"
속성값 unicode-range
선택, 글꼴이 지원하는 유니코드 문자의 범위를 설정함, 기본값은 "U+0-10FFFF"
https://www.tcpschool.com/css/css3_module_webfonts