CSS 타이포그래피(font-size, color, text-align, font) 정리

이 글은 작성자의 개인 공부를 위해 작성한 글입니다.

실제 이론, 실습과 다른 부분이 있을 수 있습니다.

CSS에서 타이포그래피는 문서의 텍스트를 스타일링하는데 사용되는 속성들의 모음을 의미한다.

글꼴, 글자 크기, 줄 간격, 글자 간격 등과 같은 텍스트의 시각적인 특성을 다루는데 중점을 둔다.

다양한 CSS 속성을 사용하여 웹 페이지의 텍스트를 보다 독특하고 가독성이 좋은 스타일로 꾸밀 수 있다.

1. font-size

값의 종류

- px (절대 크기 단위) : 고정된 크기로, 화면 픽셀을 기준으로 한다.

- em (상대 크기 단위) : 부모 요소의 크기에 상대적인 크기를 나타낸다.

- rem : 루트 요소 (일반적으로 <html>)의 크기에 상대적인 크기를 나타낸다.

- % : 부모 요소의 크기에 상대적인 백분율 크기를 나타낸다.

-> 사용자가 브라우저에 글꼴 크기를 키웠을 때 px은 바뀌지 않고 rem은 바뀐다.

#px{font-size:16px;} // 크기 일정
#rem{font-size:1rem;} // 크기가 바뀜

2. color

색상 값의 종류

- 키워드 값 : red, blue, grenn 등

p {
    color: red;
}

- 헥사코드 : #RRGGBB (빨강, 녹색, 파랑)

h1 {
    color: #336699;
}

- RGB 함수 : rgb(red, green, blue)

div {
    color: rgb(255, 0, 128);
}

- RGBA 함수 : rgba(red, green, blue, alpha) (alpha는 투명도)

span {
    color: rgba(0, 128, 0, 0.5);
}

- HSL 함수 : hsl(hue, saturation, lightness)

a {
    color: hsl(120, 100%, 50%);
}

- HSLA 함수 : hsla(hue, saturation, lightness, alpha) (alpha는 투명도)

p {
    color: hsla(45, 90%, 60%, 0.7);
}

3. text-align

기본 문법

selector {
    text-align: value;
}

주요 값

- left (왼쪽 정렬), right (오른쪽 정렬)

p {
    text-align: left; // 왼쪽 정렬
}

p {
    text-align: right; // 오른쪽 정렬
}

- center (가운데 정렬), justify (양쪽 맞춤)

h1 {
    text-align: center; // 가운데 정렬
}

p {
    text-align: justify; // 양쪽 맞춤
}

4. font

기본 문법

selector {
    font: [font-style] [font-variant] [font-weight] [font-size]/[line-height] [font-family];
}

주요 하위 속성

- font-variant : 글꼴 변형 여부를 지정한다. 대문자를 작은 글자로 표시할지 여부를 결정할 때 사용한다.

normal, small-caps 등의 값이 사용된다.

h1 {
    font-variant: small-caps;
}

- font-weight : 글자 굵기를 지정한다 normal, bold, bolder, lighter, 숫자(100부터 900까지) 등의 값이 사용된다.

h2 {
    font-weight: bold;
}

- line-height : 줄 높이를 지정한다. 픽셀(px), em, rem, 퍼센트(%) 등의 단위로 높이를 지정할 수 있다.

p {
    line-height: 1.5;
}

- font-family : 글꼴 패밀리를 지정한다. 여러 개의 글꼴을 순서대로 나열하고, 해당 시스템에서 사용 가능한 글꼴을 찾아 적용한다.

body {
    font-family: "Arial", sans-serif;
}

font 속성을 사용하여 텍스트의 스타일, 변형, 굵기, 크기, 줄 높이, 그리고 글꼴 패밀리를 한 번에 설정하는 예시

p {
    font: italic small-caps bold 16px/1.5 "Helvetica", sans-serif;
}

CSS 미리어 쿼리 정리 (0)	2024.01.07
CSS 그리드 정리 (0)	2024.01.07
CSS 박스 모델 정리 (0)	2024.01.07
CSS 기본 개념과 tag, id, class, 가상class 선택자 정리 (0)	2023.12.24

코딩 공부 기록