기본적인 텍스트 및 글꼴 스타일링
CSS에서 텍스트 스타일링과 관련이 있는 것은?
•
글꼴 스타일: 텍스트에 적용되는 글꼴에 영향을 주고, 적용되는 글꼴, 크기, 굵기, 이탤릭체 등에 영향을 주는 속성입니다.
•
텍스트 레이아웃 스타일: 텍스트의 간격 및 기타 레이아웃 기능에 영향을 주는 속성으로, 예를 들어 선 과 문자 사이의 간격 및 내용 박스 내에서 텍스트가 정렬되는 방식을 조작할 수 있습니다.
글꼴
[색상]
[글꼴 종류]
[웹 안전 글꼴]
이름 | 일반 유형 | 참고 |
Arial | sans-serif | It's often considered best practice to also add Helvetica as a preferred alternative to Arial as, although their font faces are almost identical, Helvetica is considered to have a nicer shape, even if Arial is more broadly available. |
Courier New | monospace | Some OSes have an alternative (possibly older) version of the Courier New font called Courier. It's considered best practice to use both with Courier New as the preferred alternative. |
Georgia | serif | |
Times New Roman | serif | Some OSes have an alternative (possibly older) version of the Times New Roman font called Times. It's considered best practice to use both with Times New Roman as the preferred alternative. |
Trebuchet MS | sans-serif | You should be careful with using this font — it isn't widely available on mobile OSes. |
Verdana | sans-serif |
다양한 리소스 중에서 cssfontstack.com 웹 사이트는 Windows 및 macOS 운영 체제에서 사용할 수 있는 웹 안전 글꼴 목록을 유지하며, 이를 통해 사용하기에 안전하다고 생각하는 글꼴을 결정하는 데 도움이 될 수 있습니다.
[기본 글꼴]
용어 | 정의 | 예제 |
serif
명조체
| serifs 가 있는 글꼴 (일부 서체에서 획 끝에 표시되는 번창 및 기타 작은 세부 사항) | My big red elephant |
sans-serif
고딕 | serifs 가 없는 글꼴. | My big red elephant |
monospace
| 모든 문자의 너비가 같은 글꼴로, 일반적으로 코드 목록에 사용됩니다. | My big red elephant |
cursive | 흐르고 연결된 획을 사용하여 손글씨를 에뮬레이션하기 위한 글꼴입니다. | My big red elephant |
fantasy | 장식용 글꼴. | My big red elephant |
브라우저 기본 지원 글꼴 5가지
[글꼴 스택]
Trebuchet MS 와 같이 둘 이상의 단어가 있는 글꼴 이름은 따옴표로 묶어야합니다, 예를 들면 "Trebuchet MS".
[글꼴 크기]
•
px (픽셀): 원하는 텍스트 높이의 픽셀 수입니다. 이것은 절대 단위입니다. 거의 모든 상황에서 페이지의 글꼴에 대해 동일한 최종 계산 값을 생성합니다.
•
ems: 1em은 우리가 스타일링하고 있는 현재 요소의 부모 요소에 설정된 글꼴 크기와 같습니다(더 구체적으로는 부모 요소 안에 포함된 대문자 M의 너비). 서로 다른 글꼴 크기가 설정된 많은 중첩 요소가 있지만 아래에서 볼 수 있듯이 실행 가능합니다. 왜 귀찮게 할까요? 익숙해지면 매우 자연스럽고 ems를 사용하여 텍스트뿐만 아니라 모든 크기를 조정할 수 있습니다. ems를 사용하여 전체 웹 사이트 크기를 조정할 수 있으므로 유지 관리가 쉽습니다.
•
rems: 1rem이 부모 요소가 아닌 문서의 루트 요소(예: <html>)에 설정된 글꼴 크기와 같다는 점을 제외하면 ems와 동일하게 작동합니다. 이렇게 하면 수학 계산을 통해 글꼴 크기를 훨씬 쉽게 계산할 수 있지만 불행하게도 Internet Explorer 8 이하에서는 rem이 지원되지 않습니다. 프로젝트에서 이전 브라우저를 지원해야 하는 경우 ems 또는 px를 계속 사용하거나 REM-unit-polyfill과 같은 polyfill을 사용할 수 있습니다.
[글꼴 스타일, 글꼴 두께, 텍스트 변형 및 텍스트 장식]
•
font-style (en-US): 이탤릭체 텍스트를 켜고 끄는 데 사용됩니다. 가능한 값은 다음과 같습니다(어떤 이유로 이탤릭체 스타일을 끄고 싶지 않는 한 이것을 거의 사용하지 않을 것입니다).
◦
normal: 텍스트를 일반 글꼴로 설정합니다(기존 이탤릭체를 끕니다.)
◦
italic: 사용 가능한 경우 글꼴의 기울임꼴 버전을 사용하도록 텍스트를 설정합니다. 사용할 수 없는 경우 기울임꼴 대신 기울임꼴을 시뮬레이트합니다.
◦
oblique: 일반 버전을 기울여 만든 이탤릭체 글꼴의 시뮬레이션 버전을 사용하도록 텍스트를 설정합니다.
•
font-weight: 텍스트의 굵기를 설정합니다. 사용 가능한 글꼴 변형이 많은 경우(예: -light, -normal, -bold, -extrabold, -black 등) 많은 값을 사용할 수 있지만 현실적으로 normal 및 bold를 제외하고는 거의 사용하지 않습니다.
◦
normal, bold: 일반 및 굵은 글꼴 두께
◦
lighter, bolder: 현재 요소의 굵기를 부모 요소의 굵기보다 한 단계 더 가볍거나 무겁게 설정합니다.
◦
100–900: 필요한 경우 위의 키워드보다 더 세분화된 제어를 제공하는 숫자 굵기 값입니다.
•
◦
none: 변형을 방지합니다.
◦
uppercase: 모든 텍스트를 대문자로 변환합니다.
◦
lowercase: 모든 텍스트를 소문자로 변환합니다.
◦
capitalize: 첫 글자를 대문자로 모든 단어를 변환합니다.
◦
full-width: 모노스페이스 글꼴과 유사한 고정 너비 사각형 안에 작성되도록 모든 글리프를 변환하여 예를 들어 정렬할 수 있습니다. 라틴 문자와 아시아 언어 글리프(예: 중국어, 일본어, 한국어)
•
text-decoration: 글꼴에 대한 텍스트 장식을 설정/해제합니다.(주로 링크 스타일을 지정할 때 링크의 기본 밑줄을 설정 해제하는 데 사용합니다.) 사용 가능한 값은 다음과 같습니다.예를 들어 text-decoration: underline overline과 같이 여러 장식을 동시에 추가하려는 경우 text-decoration은 한 번에 여러 값을 허용할 수 있습니다. 또한 text-decoration은 text-decoration-line (en-US), text-decoration-style (en-US) 및 text-decoration-color (en-US)의 속기 속성입니다. 이러한 속성 값의 조합을 사용하여 재미있는 효과를 만들 수 있습니다(예: text-decoration: line-through red wavy).
◦
none: 이미 존재하는 모든 텍스트 장식을 해제합니다.
◦
underline: 텍스트에 밑줄을 긋습니다.
◦
overline: 텍스트에 오버라인을 제공합니다.
◦
line-through: 텍스트 위에 취소선을 그립니다.
[그림자] - text-shadow
1.
2.
원본 텍스트에서 그림자의 수직 오프셋. 그림자를 왼쪽/오른쪽이 아닌 위/아래로 이동한다는 점을 제외하면 기본적으로 수평 오프셋과 동일하게 동작합니다. 이 값이 포함되어야 합니다.
3.
흐림 반경 - 값이 높을수록 그림자가 더 넓게 분산됩니다. 이 값이 포함되지 않은 경우 기본값은 0이며 이는 흐림이 없음을 의미합니다. 사용 가능한 대부분의 CSS 길이 및 크기 단위를 사용할 수 있습니다.
4.
[여러 그림자]
text-shadow:
-1px -1px 1px #aaa,
0px 4px 1px rgba(0, 0, 0, 0.5),
4px 4px 5px rgba(0, 0, 0, 0.7),
0px 0px 7px rgba(0, 0, 0, 0.4);
JavaScript
복사
텍스트 레이아웃
[텍스트 정렬]
[문자 및 단어 간격]
letter-spacing 및 word-spacing 속성을 사용하면 텍스트에서 문자와 단어 사이의 간격을 설정할 수 있습니다. 자주 사용하지는 않지만 특정 모양을 얻거나 특히 조밀한 글꼴의 가독성을 향상시키는 용도를 찾을 수 있습니다. 대부분의 길이 및 크기 단위를 사용할 수 있습니다.
[볼 가치 있는 다른 속성들]
글꼴 스타일:
◦
◦
◦
◦
◦
◦
◦
◦
◦
◦
◦
◦
◦
텍스트 레이아웃 스타일
◦
◦
◦
white-space: 요소 내부의 공백 및 관련 줄 바꿈을 처리하는 방법을 정의합니다.
◦
word-break: 단어 내에서 줄 바꿈 여부를 지정합니다.
◦
hyphens: 지원되는 언어에 대해 하이픈 연결을 켜거나 끕니다.
◦
line-break: 아시아 언어의 경우 줄 바꿈을 완화하거나 강화합니다.
◦
◦
◦
글꼴 양식(shorthand)
단축 속성 font을 통해 설정할 수도 있습니다. 이들은 다음 순서로 작성됩니다: font-style (en-US), font-variant (en-US), font-weight, font-stretch (en-US), font-size, line-height (en-US)) 및 font-family (en-US)입니다.
font:
italic normal bold normal 3em/1.5 Helvetica,
Arial,
sans-serif;
JavaScript
복사
목록 스타일링
목록별 스타일
◦
list-style-type (en-US): 목록에 사용할 글머리 기호 유형을 설정합니다. 예를 들어 정렬되지 않은 목록의 경우 사각형 또는 원형 글머리 기호, 순서가 지정된 목록의 경우 숫자, 문자 또는 로마 숫자입니다.
◦
◦
[글머리 기호 위치]
기본값은 outside이며, 위에 표시된 것처럼 글머리 기호가 목록 항목 외부에 위치합니다.
목록 계산 제어
<ol start="4">
<li>Toast pita, leave to cool, then slice down the edge.</li>
<li>
Fry the halloumi in a shallow, non-stick pan, until browned on both sides.
</li>
<li>Wash and chop the salad.</li>
<li>Fill pita with salad, hummus, and fried halloumi.</li>
</ol>
JavaScript
복사
[reversed]
<ol start="4" reversed>
<li>Toast pita, leave to cool, then slice down the edge.</li>
<li>
Fry the halloumi in a shallow, non-stick pan, until browned on both sides.
</li>
<li>Wash and chop the salad.</li>
<li>Fill pita with salad, hummus, and fried halloumi.</li>
</ol>
JavaScript
복사
start reversed일 때 항목이 start보다 많으면 음수가 될 수 있다.
[value]
<ol>
<li value="2">Toast pita, leave to cool, then slice down the edge.</li>
<li value="4">
Fry the halloumi in a shallow, non-stick pan, until browned on both sides.
</li>
<li value="6">Wash and chop the salad.</li>
<li value="8">Fill pita with salad, hummus, and fried halloumi.</li>
</ol>
JavaScript
복사
스타일링 링크
[링크 상태]
◦
◦
◦
◦
포커스: 초점이 맞춰진 링크(예: 키보드 사용자가 키 또는 이와 유사한 키를 사용하여 이동하거나 HTMLElement.focus() (en-US)를 사용하여 프로그래밍 방식으로 초점이 맞춰진 링크) :focus 의사 클래스를 사용하여 스타일이 지정됩니다.
Tab
◦
[기본 스타일]
◦
링크는 밑줄이 그어져 있습니다.
◦
방문하지 않은 링크는 파란색입니다.
◦
방문한 링크는 자주색입니다.
◦
링크를 가리키면 마우스 포인터가 작은 손 아이콘으로 바뀝니다.
◦
초점이 맞춰진 링크에는 주위에 윤곽선이 표시되므로 탭 키를 눌러 키보드로 이 페이지의 링크에 초점을 맞출 수 있습니다. Mac의 경우 option + tab을 사용하거나 전체 키보드 액세스: 모든 컨트롤 옵션을 활성화해야 합니다(Mac에서는 Ctrl + F7을 눌러 활성화해야 합니다.
◦
활성 링크는 빨간색입니다. 링크를 클릭할 때 마우스 버튼을 길게 눌러 보세요.
최소한 아래와 같도록 해야 합니다.
◦
링크에는 밑줄을 사용하되 다른 항목에는 밑줄을 사용하지 마세요. 링크에 밑줄을 긋고 싶지 않다면 다른 방법으로 강조 표시하세요.
◦
마우스를 가져가거나 초점을 맞추면 어떤 방식으로 반응하고, 활성화하면 약간 다른 방식으로 반응하도록 설정하세요.
웹 폰트
font families 요약하기
기존에는 웹 개발자가 선택할 수 있는 폰트가 제한적이었습니다. 모든 일반적인 시스템에서 사용 가능하다고 보장할 수 있는 폰트는 웹 안전 폰트 라고 불리는 소수의 폰트뿐입니다. 폰트 스택을 사용하여 선호하는 폰트, 웹 안전 대체 폰트, 기본 시스템 폰트 순서로 지정할 수 있습니다. 그러나 이렇게 하면 당신의 디자인이 각 폰트에서 작동하는지 확인하는 데 필요한 테스트가 필요하므로 작업량이 증가합니다.
웹 폰트
@font-face {
font-family: "myFont";
src: url("myFont.woff2");
}
JavaScript
복사
몇 가지 중요한 내용들이 있습니다.
1.
폰트는 일반적으로 무료로 사용할 수 없습니다. 폰트에 대한 비용을 지불하거나 코드(또는 사이트)에서 폰트 제작자에게 크레딧을 부여하는 등 다른 라이센스 조건을 따라야 합니다. 적절한 크레딧을 제공하지 않고 폰트를 훔쳐서 사용하면 안 됩니다.
2.
모든 주요 브라우저는 WOFF/WOFF2 (Web Open Font Format versions 1 and 2)를 지원합니다. 심지어 IE9(2011년 출시)와 같은 구형 브라우저에서도 WOFF 형식을 지원합니다.
3.
WOFF2는 가변 폰트, 크로마틱 폰트 및 폰트 컬렉션을 포함한 TrueType 및 OpenType의 모든 사양을 지원합니다.
4.
폰트 파일을 나열하는 순서가 중요합니다. 다운로드할 여러 폰트 파일 목록을 브라우저에 제공하면, 브라우저는 사용할 수 있는 첫 번째 폰트 파일을 선택합니다. 따라서 가장 먼저 나열하는 형식은 가장 선호하는 형식, 즉 WOFF2여야 하고 이전 형식은 그 뒤에 나열해야 합니다. 브라우저가 한 형식을 이해하지 못하면 그 뒤에 있는 다음 형식으로 넘어갑니다.
5.
레거시 브라우저에서 작업해야 하는 경우, 다운로드 할 수 있는 EOT (Embedded Open Type), TTF (TrueType Font) 및 SVG 웹 폰트를 제공해야 합니다. 이 기사에서는 필요한 파일을 생성할 수 있는 Fontsquirrel 웹폰트 생성기를 사용합니다.
