1. 크기 (font-size)
폰트 크기의 단위 - px, em, re,
px - 절대적, 크기가 고정되어있음
em, rem - 상대적, 브라우저 설정에 따라 폰트의 크기가 달라진다. 오늘날에는 rem을 사용하는 추세(폰트 크기를 조정할 수 있는 사용자의 권리)
rem - html을 기준으로 폰트 크기가 정해짐. (html 기본 폰트 크기가 16px이고, 2rem일 경우, 32px로 보여진다.)
<!DOCTYPE html>
<html>
<head>
<style>
#px {
font-size: 16px;
}
#rem {
font-size: 1rem;
}
</style>
</head>
<body>
<div id="px">PX</div>
<div id="rem">REM</div>
</body>
</html>
2. 색상 (color)
단위 - color name, hex, rgb
color name - orange, red, tomato 등 직접 색을 지정하여 적용
rgb - red, greem, blue의 조합. 0~255 중 값을 지정하여 3가지 색의 조합으로 지정
hex - 16진수를 이용한 색의 표현. #0000부터 #FFFFFF까지 값을 지정하여 사용할 수 있다.
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: tomato;
}
h2 {
color: rgb(200, 10, 180);
}
h3 {
color: #00ff00;
}
</style>
</head>
<body>
<h1>Hello World</h1>
<h2>Hello World</h2>
<h3>Hello World</h3>
</body>
</html>
3. 정렬 (text-align)
text-align이라는 속성을 통해 왼쪽, 오른쪽, 가운데 등 위치를 지정할 수 있다.
*justify를 이용하면 왼쪽과 오른쪽이 공평하게 화면을 가진다.
<!DOCTYPE html>
<html>
<head>
<style>
p {
text-align: justify;
/* 왼쪽과 오른쪽이 공평하게 화면을 차지한다. */
}
</style>
</head>
4. 서체
font-size - 폰트의 크기 설정
font-family - 글꼴 설정, 브라우저에 따라 우선순위 글자를 적용
font-weight - 폰트의 두께, 가중
line-height - 자간, 문장과 문장 사이의 간격
<!DOCTYPE html>
<html>
<head>
<style>
p {
font-size: 5rem;
font-family: arial, verdana, "Helvetica Neue", sans-serif;
font-weight: bold;
line-height: 2;
/* 폰트 지정 */
/* family - 비슷한 폰트들끼리 묶어서 우선 순위에 따라 더 선호하는 걸 먼저 보여준다. */
/* serif - 장식 */
/* sans - 반대 */
/* monospace - 고정폭 */
}
</style>
</head>
<body>
<p>Hello World</p>
</body>
</html>
5. 웹폰트
웹폰트 기법 - font-family에서 사용자의 웹브라우저가 해당 폰트를 다운로드해서 폰트를 사용할 수 있도록 하는 방법을 말한다.
'html & css > 개념' 카테고리의 다른 글
| 박스모델 (1) | 2023.11.21 |
|---|---|
| 인라인 VS 블럭레벨 (2) | 2023.11.21 |
| 캐스케이딩이란? (적용 우선순위) 및 실습 (0) | 2023.11.20 |
| 상속 (0) | 2023.11.20 |
| 가상 클래스 선택자 (0) | 2023.11.20 |
