타이포그래피
웹에서 사람들이 읽는 대부분의 것은 텍스트이며, 페이지가 주는 느낌의 대부분은 그 텍스트가 어떻게 설정되어 있는지에서 나옵니다. 서체를 바꾸고, 줄 간격을 조정하고, 줄 길이를 제한하면, 같은 단락이 답답하고 불쾌한 것에서 차분하고 읽기 좋은 것으로 변합니다. 이것은 장식이 아닙니다. 이것은 타이포그래피이며, 당신의 말이 얼마나 편하게 읽히는지를 결정하는 몇 가지 CSS 속성이고, 이 장은 매일 사용하는 속성들의 투어입니다.
서체 선택하기
서체를 선택하는 속성은 font-family이며, 여기에 하나의 서체가 아니라 목록을 제공합니다. 이 목록은 **폰트 스택**입니다: 브라우저는 첫 번째 서체를 시도하고, 사용할 수 없으면 다음 서체로 대체되며, 계속 아래로 진행됩니다.
body {
font-family: "Helvetica Neue", Arial, sans-serif; /* Helvetica를 시도하고, 없으면 Arial, 그 다음 sans-serif */
}마지막 이름은 항상 sans-serif 또는 serif와 같은 일반 패밀리여야 합니다. 이것이 당신의 안전망입니다: 명명된 서체가 읽는 사람의 기기에 없으면, 브라우저는 여전히 합리적인 것을 표시하는 대신 당신이 선택하지 않은 기본값을 표시합니다. 공백이 있는 글꼴 이름은 따옴표로 묶으십시오. 한 단어 이름은 따옴표가 필요하지 않습니다.
font-family는 하나의 서체가 아니라 목록을 가지며, 브라우저는 찾을 수 있는 첫 번째 것을 사용합니다. 항상 sans-serif와 같은 일반 패밀리로 목록을 끝내어 안전한 폴백이 있도록 합니다. 공백이 있는 글꼴 이름은 따옴표로 묶으십시오. 텍스트 크기 조정하기
font-size로 텍스트 크기를 설정합니다. 픽셀 단위로 값을 지정할 수 있지만, 도달해야 할 크기는 **rem**이며, 이는 페이지의 기본 글꼴 크기에 연결된 단위입니다. 하나의 rem은 브라우저의 기본 텍스트 크기와 같으며, 일반적으로 16px이므로 1rem은 정상적인 읽기 크기이고 1.25rem은 약간 더 큽니다.
body {
font-size: 1rem; /* 기본 읽기 크기, 일반적으로 16px */
}
h1 {
font-size: 2rem; /* 기본 크기의 2배 */
}font-size는 텍스트의 크기를 설정하며, rem은 도달해야 할 단위입니다. 하나의 rem은 브라우저의 정상 텍스트 크기이므로 1rem은 정상이고 2rem은 2배 더 큽니다. 다음 단계에서 파고드는 본문 텍스트를 px에서 크기 조정하는 것을 피하십시오. 굵기와 스타일
두 가지 속성은 문자의 모양을 변경합니다. font-weight는 텍스트가 얼마나 굵은지를 제어하고, font-style은 **이탤릭**을 켭니다.
strong {
font-weight: bold; /* 더 무거운, 더 두꺼운 획 */
}
em {
font-style: italic; /* 기울어짐 */
}bold와 normal은 일상적인 굵기 키워드입니다. 이탤릭의 경우 italic은 텍스트를 기울이고 normal은 직립 상태를 유지합니다.
font-weight는 텍스트를 더 굵거나 더 가볍게 만들고, font-style: italic은 기울입니다. 키워드 bold와 normal은 매일 필요한 대부분을 다룹니다. 강조를 위해 이탤릭을 사용하되, 읽기가 어려워지는 전체 단락은 사용하지 않습니다. 텍스트를 읽기 쉽게 만드는 간격
편안한 텍스트는 대부분 공간에 관한 것입니다. line-height는 줄 사이의 간격을 제어하며, 약간의 여유 공간을 제공하면 단락을 훨씬 더 읽기 쉽게 만듭니다.
p {
line-height: 1.5; /* 글꼴 크기의 1.5배 */
}단위가 없는 1.5와 같은 일반 숫자를 사용합니다. 이는 "글꼴 크기의 1.5배"를 의미하므로 간격이 텍스트와 함께 증가합니다. 답답한 줄은 페이지가 읽기 어렵게 느껴지는 가장 흔한 이유 중 하나이며, 이 하나의 값이 대부분을 해결합니다.
line-height는 줄 사이의 공간을 설정하며, 1.5 정도의 값은 텍스트를 훨씬 더 읽기 쉽게 만듭니다. 단위가 없는 일반 숫자로 작성하여 간격이 텍스트와 함께 증가하도록 합니다. 답답한 줄은 페이지가 읽기 어렵게 느껴지는 주요 이유 중 하나이며, 이는 대부분을 해결합니다. 정렬 및 장식
세 가지 속성은 정렬 및 마무리 터치를 처리합니다. text-align은 텍스트를 왼쪽, 오른쪽 또는 중앙으로 이동합니다. text-transform은 모든 대문자 만들기와 같은 경우를 변경합니다. 그리고 text-decoration은 밑줄과 같은 줄을 추가하거나 제거합니다.
h1 {
text-align: center; /* 제목 가운데 정렬 */
}
.button {
text-transform: uppercase; /* 모든 대문자로 표시 */
text-decoration: none; /* 링크 밑줄 제거 */
}text-transform: uppercase는 다시 입력하지 않고도 텍스트를 대문자로 표시하므로 원본 내용은 정상적인 단어로 유지됩니다. 밑줄은 text-decoration으로 추가하거나 제거됩니다.
text-align은 텍스트를 왼쪽, 오른쪽 또는 중앙으로 이동하고, text-transform: uppercase는 대문자로 표시하며, text-decoration은 밑줄과 같은 줄을 추가하거나 제거합니다. CSS에서 대문자를 만드는 것이 실제 텍스트를 정상적인 단어로 유지하므로 다시 입력하지 않습니다. 링크의 밑줄을 떨어뜨리려면 text-decoration: none에 도달합니다. 글꼴 약칭 및 상속
글꼴 속성에는 편리한 특성이 있습니다: 아래로 흐릅니다. font-family를 <body>에서 설정하면 내부의 모든 단락, 제목 및 링크가 이를 상속하므로 거의 자신을 반복하지 않습니다.
body {
font-family: system-ui, sans-serif; /* 이것을 상속하는 내부의 모든 것 */
line-height: 1.5;
}이 때문에 대부분의 타이포그래피는 스타일시트의 맨 위 근처에 한 곳에 있으며, 개별 요소는 다른 내용만 재정의합니다.
font-family를 body에서 한 번 설정하면 모든 것이 상속합니다. 이것은 스타일시트의 맨 위 근처에 타이포그래피를 한 곳에 유지합니다. 개별 요소는 변경해야 할 비트만 재정의합니다.