em과 rem 단위
CSS는 길이(length)를 표현할 때 픽셀 단위(px)를 사용한다. 하지만 픽셀 단위는 '몇 글자 정도의 길이'와 같은 텍스트의 표시 길이를 표현해야 할 때는 그리 적합하지 않다. 예로 '60픽셀'보다는 '문자 20개 정도의 길이'로 표현하는 것이 더 자연스럽다.
따라서 CSS는 영문자 'M'의 발음 '엠'을 의미하는 em과 'root M'을 의미하는 rem이라는 단위를 제공한다. 이 단위들은 화면 크기에 따라 반응형 디자인을 구현할 때 유용하다.
em 단위
em 단위는 현재 요소의 폰트 크기에 상대적인 크기를 나타낸다. 예를 들어, 부모 요소의 폰트 크기가 16px이라면, 자식 요소에서 1em은 16px을 의미한다.
- 상대적인 단위: 요소의 폰트 크기를 기준으로 크기를 계산한다.
- 중첩 효과: 요소가 중첩될 경우, em 단위는 부모 요소의 폰트 크기를 기준으로 계산되므로, 크기가 의도치 않게 커질 수 있다.
rem 단위
rem 단위는 최상위 요소(root element, 일반적으로 <html>)의 폰트 크기에 상대적인 크기를 나타낸다. 이는 em과 달리 중첩된 요소의 영향을 받지 않는다.
- 고정된 기준: 최상위 요소의 폰트 크기를 기준으로 계산한다.
- 일관된 크기: 중첩된 요소에서도 항상 최상위 요소의 폰트 크기를 기준으로 하므로 예측 가능한 크기를 유지할 수 있다.
| 특징 | em | rem |
| 기준 | 부모 요소의 폰트 크기 | 최상위 요소의 폰트 크기 |
| 중첩 요소의 영향 | 부모 요소의 폰트 크기에 따라 크기가 변경됨 | 중첩 요소의 영향을 받지 않음 |
| 사용 시기와 이점 | 특정 요소의 상대적인 크기를 설정해야 할 때 유용 특정 요소 내에서만 크기를 조절하고 싶을 때 사용 |
전체 레이아웃의 일관된 크기를 유지하고 싶을 때 사용 반응형 디자인에서 전체적인 폰트 크기와 요소 크기를 쉽게 조절할 수 있음 |
| 사용 시 주의사항 | 중첩된 경우 크기가 의도치 않게 커질 수 있음 | 일관된 크기를 유지할 수 있음 |
글자 크기 설정
CSS는 텍스트의 글자 크기를 설정할 수 있도록 font-size와 line-height라는 속성을 제공한다. font-size는 글꼴의 크기, 즉 글자의 높이를 의미한다. line-height는 글자의 높이(즉, font-size)에 여분의 높이를 더한 값을 설정한다.
즉, 여러 줄의 텍스트는 줄마다 line-height만큼의 높이를 가지고, 각 줄의 텍스트는 line-height보다 조금 작은 font-size값을 가져 행간이 조금씩 떨어져 보이게 해 준다. 두 속성은 픽셀, 퍼센트, em, rem단위로 설정할 수 있다.
테일윈드 CSS 글자 크기 클래스
브라우저마다 텍스트 표시를 담당하는 h1~h6, p 요소에 기본 설정값이 조금씩 다르다는 문제가 있다. 때문에 테일윈드 CSS는 h1~h6, p 요소에 기본으로 설정된 글자 크기를 모두 초기화하고 글자 크기를 설정하는 클래스를 제공하여 태그와 상관없이 글자 크기를 조절할 수 있게 해 준다.
| 클래스 이름 | font-size | line-height |
| text-xs | 0.75rem | 1rem |
| text-sm | 0.875rem | 1.25rem |
| text-base | 1rem | 1.5rem |
| text-lg | 1.125rem | 1.75rem |
| text-xl | 1.25rem | 1.75rem |
| text-2xl | 1.5rem | 2rem |
| text-3xl | 1.875rem | 2.25rem |
| text-4xl | 2.25rem | 2.5rem |
| text-5xl | 3rem | 1 |
| text-6xl | 3.75rem | 1 |
| text-7xl | 4.5rem | 1 |
| text-8xl | 6rem | 1 |
| text-9xl | 8rem | 1 |
글자 굵기 설정
font-weight 속성은 글자의 굵기를 설정하는 속성이다.
테일윈드 CSS 글자 굵기 클래스
font-normal 클래스는 font-weight 속성값을 400으로 설정하며 보통은 이 값이 각 글자의 굵기이다.
보통 헤드라인 텍스트는 font-bold나 font-black으로 설정하여 텍스트가 강조되게 한다.
| 기울임 꼴 | |
설정
font-style 속성은 글자가 기울임 꼴로 보이도록 해준다.
테일윈드 CSS 기울임꼴 클래스
| 줄 바꿈 | |
문자 설정
줄 바꿈 문자 \n은 HTML에서는 화이트 스페이스로 간주되어 무시된다. 하지만 CSS에서는 white-space 스타일 속성값으로 웹 브라우저가 \n과 같은 화이트 스페이스를 어떻게 해석할지를 설정할 수 있다.
- normal: 연속된 공백(스페이스, 탭 등)을 하나의 공백으로 합친다. 줄 바꿈 문자(\n)는 개행 처리된다.
- nowrap: 텍스트가 줄 바꿈 없이 한 줄에 모두 표시된다. 필요한 경우 텍스트는 요소의 경계를 넘어가게 된다.
- pre: 텍스트는 HTML 코드 그대로 표시되며, 연속된 공백과 줄 바꿈이 그대로 유지된다.
- pre-line: 연속된 공백은 하나의 공백으로 합쳐지고, 줄 바꿈 문자(\n)는 개행 처리된다.
- pre-wrap: 연속된 공백은 하나의 공백으로 합쳐지고, 줄 바꿈 문자(\n)는 개행 처리된다. 필요한 경우 텍스트는 요소의 경계를 넘어가게 된다.
테일윈드 CSS 줄 바꿈 클래스
\n이 줄바꿈으로 동작하려면 whitespace-pre-line을 사용하면 된다.
| 클래스 이름 | 의미 |
| whitespace-normal | white-space: normal; |
| whitespace-nowrap | white-space: nowrap; |
| whitespace-pre | white-space: pre; |
| whitespace-pre-line | white-space: pre-line; |
| whitespace-pre-wrap | white-space: pre-wrap; |
텍스트 정렬
text-align 속성은 텍스트를 정렬하는 속성이다.
테일윈드 CSS 텍스트 정렬 클래스
| 클래스 이름 | 의미 |
| text-left | text-align: left; |
| text-center | text-align: center; |
| text-right | text-align: right; |
| text-justify | text-align: justify; |
테일윈드 커스터마이징
Tailwind CSS는 설정 파일(tailwind.config.js)을 통해 커스터마이징 할 수 있다. 새로운 클래스를 추가하거나 기존 클래스를 수정할 수 있다.
module.exports = {
theme: {
extend: {
fontSize: {
// 글자 크기 설정
'tiny': '0.625rem', // 10px
'huge': '4rem', // 64px
},
fontWeight: {
// 글자 굵기 설정
'extra-light': 200,
'medium': 500,
'extra-bold': 800,
},
fontStyle: {
// 기울임꼴 설정
'italic': 'italic',
'normal': 'normal',
},
wordBreak: {
// 줄바꿈 문자 설정
'break-all': 'break-all',
'break-word': 'break-word',
},
textAlign: {
// 텍스트 정렬 설정
'justify': 'justify',
'center': 'center',
},
}
},
variants: {},
plugins: [],
}'CSS' 카테고리의 다른 글
| CSS flex 레이아웃 이해하기 (0) | 2024.06.29 |
|---|---|
| CSS 캐스케이딩 (0) | 2024.06.24 |
| CSS 상자 모델 이해하기 (0) | 2024.06.19 |
| CSS 색상 표현 방법 (0) | 2024.06.16 |
| Tailwind CSS (2) | 2024.06.15 |