1.1 색상
CSS (Cascading Style Sheets)는 텍스트 스타일링을 위한 다양한 속성을 제공해. 그 중에서도 주요 속성들은
color, font-size, font-weight야. 이 속성들은 각각 텍스트 색상, 크기, 글꼴 두께를 조절할 수 있게 해줘. 각 속성을 자세히 알아보자.
color 속성은 텍스트의 색상을 지정해. 다양한 색상 포맷으로 설정할 수 있는데, 색상 이름, 16진수 값, RGB, RGBA, HSL, HSLA 등을 포함해.
사용 예시
1. 색상 이름:
CSS
p {
color: red;
}
2. 16진수 값:
CSS
p {
color: #ff0000;
}
3. RGB와 RGBA:
CSS
p {
color: rgb(255, 0, 0);
color: rgba(255, 0, 0, 0.5); /* 투명한 빨강 */
}
4. HSL과 HSLA:
CSS
p {
color: hsl(0, 100%, 50%);
color: hsla(0, 100%, 50%, 0.5); /* 투명한 빨강 */
}
HTML에서 사용 예시:
CSS
p {
color: #3498db; /* 파란색 */
}
HTML
<body>
<p>이 텍스트는 파란색이 될 거야.</p>
</body>
1.2 font-size 속성
font-size 속성은 텍스트의 크기를 지정해. 여러 단위로 값을 지정할 수 있어, 예를 들면
픽셀 (px), 상대 단위 (em, rem, %), 픽셀 기반 (mm, cm, pt, pc), vw와 vh
(뷰포트 폭과 높이) 등등이 있지.
사용 예시
1. 픽셀:
CSS
p {
font-size: 16px;
}
2. 상대 단위:
%, em, rem
CSS
p {
font-size: 150%; /* 기본 글꼴 크기의 150% */
font-size: 1.5em; /* 기본 글꼴 크기의 1.5배 */
font-size: 1.5rem; /* <html> 요소의 글꼴 크기에 상대적 */
}
3. "뷰포트" 단위:
CSS
p {
font-size: 2vw; /* 뷰포트 폭의 2% */
font-size: 2vh; /* 뷰포트 높이의 2% */
}
HTML에서 사용 예시:
CSS
p {
font-size: 18px; /* 텍스트 크기 18 픽셀 */
}
HTML
<body>
<p>이 텍스트는 18픽셀 크기가 될 거야.</p>
</body>
1.3 font-weight 속성
font-weight 속성은 텍스트의 두께를 지정해. 키워드 (normal, bold, bolder, lighter)나 숫자 값 100부터 900까지 설정할 수 있어. 400은 normal에, 700은 bold에 해당해.
사용 예시
1. 키워드:
CSS
p {
font-weight: bold;
}
2. 숫자 값:
CSS
p {
font-weight: 300; /* 얇은 텍스트 */
font-weight: 700; /* bold와 동일 */
}
HTML에서 사용 예시:
CSS
p {
font-weight: 700; /* 굵은 텍스트 */
}
HTML
<body>
<p>이 텍스트는 굵게 표시될 거야.</p>
</body>
GO TO FULL VERSION