텍스트 꾸미기
텍스트는 웹 페이지의 핵심 요소입니다. HTML로 구조를 만들고 CSS로 폰트와 폰트 스타일을 적용할 수 있습니다. 이번 장에서는 텍스트를 꾸미는 다양한 CSS 속성들을 살펴보겠습니다.
1. color 색상
텍스트의 색상은 color 속성으로 설정합니다. 이 속성은 폰트 색상을 나타내며, font- 접두사가 붙지 않는다는 점에 유의해야 합니다. 색상을 표현하는 방법에는 여러 가지가 있습니다. 키워드(red, blue 등), Hex 코드(#으로 시작하는 16진수), rgb(), rgba(), hsl(), hsla() 함수 등을 사용할 수 있습니다. 실무에서는 주로 Hex 코드를 사용하며, 투명도가 필요한 경우 rgba()를 자주 활용합니다.
예를 들어, 다음과 같이 텍스트 색상을 설정할 수 있습니다.
또한, currentColor 키워드를 사용하면 현재 요소의 색상 값을 상속받아 다른 속성에 적용할 수 있습니다. 이는 일관된 색상을 유지하는 데 유용합니다.
색상 표현 Tip!
- Hex로 color를 표현할 때, 3자리로 줄여서 표현할 수 있습니다. 예를 들어,
#ff0000은#f00으로 줄여서 표현할 수 있습니다. - 좀 더 다양한 색의 이름과 Hex 코드를 확인하려면 W3Schools를 참고하세요. 자주 사용되는 컬러 이름은 기억해두면 유용합니다.
저시력 시각 장애(시력 저하, 색약, 색맹)를 위해 폰트의 색상과 배경의 명도 대비도 중요합니다!
최소한 4.5:1의 비율이 되어야합니다.
2. 글꼴 설정하기
글꼴은 텍스트의 시각적 특성을 결정하는 중요한 요소입니다. font-family 속성을 사용하여 글꼴을 지정할 수 있습니다. 웹 안전 폰트를 사용하거나 웹 폰트를 불러와 사용할 수 있습니다.
웹폰트란?
사용자의 컴퓨터에 설치되어있지 않은 글꼴을 사용자가 웹 사이트에 접속했을 때 다운로드시키는 방법입니다.
폰트를 적용하는 방법에는 3가지 방법이 있습니다.
2.1 link로 삽입
2.2 import로 삽입
2.3 font-face
폰트를 “” 으로 묶은 것도 있고 그렇지 않는 것도 있는데 왜 그런건가요?
- 한글일 경우에는
""를 사용합니다. - 영문이지만 공백이 포함될 경우
""를 사용합니다. - 한글폰트의 한글 이름, 영문이름을 제대로 인식 못하는 경우를 대비해서 한글과 영문명을 같이 작성해 주는 것이 좋습니다.
- generic(sans-serif, serif와 같은 기본 폰트)인 경우
""를 사용하지 않습니다 - 한글은 한글 폰트로, 영문은 영문폰트으로 나오길 원한다면, 영문폰트명, 한글폰트명 순으로 적어줍니다!
3. 글꼴 크기 조정하기
font-size 속성으로 글꼴의 크기를 조절할 수 있습니다. 크기 단위로는 절대 단위인 px와 상대 단위인 em, rem 등이 자주 사용됩니다. em은 현재 요소의 부모 요소에 설정된 글꼴 크기를 기준으로 하는 상대 단위이고, rem은 루트 요소(html)에 설정된 글꼴 크기를 기준으로 합니다.
위 예제에서 em과 rem의 차이점을 확인할 수 있습니다. em은 부모 요소의 글꼴 크기를 기준으로 하기 때문에 중첩된 요소의 글꼴 크기가 계속해서 커지는 현상이 발생할 수 있습니다. 반면 rem은 루트 요소의 글꼴 크기를 기준으로 하기 때문에 이러한 현상이 발생하지 않습니다.
왜 em, rem, vw, vh 같은 단위를 쓰는 건가요?
반응형 웹페이지 개발, 유지보수 등에 용이합니다!
4. 글꼴 굵기 설정하기
font-weight 속성으로 텍스트의 굵기를 조절할 수 있습니다. normal(기본값), bold(굵게), lighter(부모 요소보다 한 단계 가볍게), bolder(부모 요소보다 한 단계 굵게) 등의 키워드나 100부터 900까지의 숫자 값을 사용할 수 있습니다.
5. 텍스트 변형하기
text-transform 속성은 텍스트의 대소문자를 변형하는 데 사용됩니다. 이 속성은 특히 영문 텍스트를 다룰 때 유용합니다. 주요 값으로는 다음과 같은 것들이 있습니다
none: 변형 방지 (기본값)uppercase: 모든 텍스트를 대문자로 변환lowercase: 모든 텍스트를 소문자로 변환capitalize: 모든 단어의 첫 글자를 대문자로 변환
6. 텍스트 장식하기
text-decoration 속성은 텍스트에 장식을 추가하는 단축 속성입니다. 이 속성은 다음과 같은 개별 속성들을 포함합니다.
text-decoration-line: 선의 위치 (underline, overline, line-through)text-decoration-color: 선의 색상text-decoration-style: 선의 스타일 (solid, wavy, dashed 등)text-decoration-thickness: 선의 두께
7. 텍스트에 그림자 효과 주기
text-shadow 속성은 텍스트에 그림자 효과를 추가합니다. 이 속성은 다음과 같은 값들을 사용합니다.
offset-x: 그림자의 수평 오프셋offset-y: 그림자의 수직 오프셋blur-radius: 그림자의 흐림 정도 (선택적)color: 그림자의 색상
여러 그림자를 콤마로 구분하여 나열할 수 있습니다.
box-shadow 속성은 요소의 박스 모델에 그림자를 추가하는 데 사용됩니다. text-shadow와 유사하지만, 텍스트가 아닌 요소 자체에 그림자를 적용합니다.
8. 텍스트 정렬하기
text-align 속성은 텍스트의 가로 정렬을 설정합니다. 이 속성은 블록 레벨 요소 내의 인라인 콘텐츠(텍스트, 인라인 요소)를 정렬하는 데 사용됩니다. 주요 값으로는 다음과 같은 것들이 있습니다.
left: 왼쪽 정렬 (기본값)right: 오른쪽 정렬center: 중앙 정렬justify: 양쪽 정렬 (마지막 줄 제외)justify-all: 양쪽 정렬 (마지막 줄 포함)
양쪽 정렬 적용 시 불규칙한 여백(흰 강 현상- River of white)은 가독성에 있어 좋지 못해 권하지 않습니다.
9. 세로 정렬 다루기
위 이미지에서는 어센더와 디센더가 여백없이 이상적으로 글씨를 감싸고 있지만, 일반적으로는 아래 이미지 처럼 어센더와 폰트, 그리고 디센더 사이에 공간이 조금 남아 있는 편 입니다. 이는 폰트를 디자인하는 디자이너가 제작할때 여유 공간을 주기 때문인데요, 이러한 이유로 폰트의 종류마다 여백의 크기가 모두 다릅니다.
vertical-align 속성은 인라인 요소나 테이블 셀 요소의 수직 정렬을 조정합니다. 이 속성은 블록 레벨 요소에는 적용되지 않는다는 점에 주의해야 합니다. 주요 값으로는 baseline, sub, super, top, middle, bottom 등이 있습니다.
- 인라인, 인라인 블록 및 테이블 셀 요소에만 적용됩니다!
- 블록 레벨에서 수직정렬하고 싶다면 추후 배울 flex를 사용하면 됩니다!
- 간혹 이미지에서 위 아래 여백이 생기는 이유이기도 합니다. 여백 이슈가 생긴다면
vertical-align: bottom을 사용해보세요.
이번에는 이미지에서 불필요한 여백이 생기는 것을 확인해보고 CSS 탭으로 이동하여 vertical-align: bottom을 주석을 풀어 사용해보세요.
10. 행간 조정하기
line-height 속성은 텍스트 줄 사이의 간격, 즉 행간을 설정합니다. 이 속성은 텍스트의 가독성에 큰 영향을 미치므로 적절히 조정하는 것이 중요합니다. line-height는 다음과 같은 값을 사용할 수 있습니다:
- 숫자: 요소의 글꼴 크기에 대한 배수 (예: 1.5)
- 길이: px, em 등의 단위 (예: 20px, 1.5em)
- 백분율: 요소의 글꼴 크기에 대한 백분율 (예: 150%)
- normal: 브라우저의 기본값 (보통 1.2)
일반적으로 본문 텍스트의 경우 1.5~2 사이의 값을 사용하면 좋은 가독성을 얻을 수 있습니다.
11. 자간 조정하기
letter-spacing 속성은 글자 사이의 간격, 즉 자간을 조절합니다. 이 속성을 사용하면 텍스트의 밀도를 조정하거나 특별한 시각적 효과를 줄 수 있습니다. 값은 길이 단위(px, em 등)로 지정하며, 음수 값도 사용할 수 있습니다.
행간이나 자간을 추후에 배울 JavaScript를 활용하여 좀 더 인터렉티브한 효과를 줄 수도 있습니다. 아래는 자간을 조정하여 3D 효과를 준 예시입니다. 행성 주위에 띄가 글자의 자간을 좁혀 만든 것입니다. 마우스를 오버해서 저 띄가 조정되게 할 수 있습니다.
