텍스트 타이포그래피 스타일링을 위한 6가지 예제를 아래에서 설명하고, 각 예제에 대한 CSS와 HTML 코드를 제공하겠습니다. 텍스트 타이포그래피를 조절하여 웹 페이지의 텍스트를 더 매력적으로 디자인할 수 있습니다.
예제 1: 폰트 스타일 변경
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* 기본 스타일 */
body {
font-family: Arial, sans-serif;
text-align: center;
}
/* 폰트 스타일 변경 */
.custom-font {
font-family: 'Courier New', monospace;
}
</style>
<title>폰트 스타일 변경</title>
</head>
<body>
<h1>기본 텍스트</h1>
<h1 class="custom-font">커스텀 폰트 스타일</h1>
</body>
</html>
이 예제에서는 폰트 스타일을 변경하는 방법을 보여줍니다. .custom-font 클래스를 사용하여 특정 텍스트에 다른 폰트 스타일을 적용합니다.
예제 2: 텍스트 크기 조절
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* 기본 스타일 */
body {
font-family: Arial, sans-serif;
text-align: center;
}
/* 텍스트 크기 조절 */
.custom-size {
font-size: 24px;
}
</style>
<title>텍스트 크기 조절</title>
</head>
<body>
<h1>기본 텍스트</h1>
<h1 class="custom-size">크기 조절된 텍스트</h1>
</body>
</html>
이 예제에서는 텍스트의 크기를 조절하는 방법을 보여줍니다. .custom-size 클래스를 사용하여 특정 텍스트의 글꼴 크기를 변경합니다.
예제 3: 텍스트 색상 변경
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* 기본 스타일 */
body {
font-family: Arial, sans-serif;
text-align: center;
}
/* 텍스트 색상 변경 */
.custom-color {
color: #FF5733;
}
</style>
<title>텍스트 색상 변경</title>
</head>
<body>
<h1>기본 텍스트</h1>
<h1 class="custom-color">색상 변경된 텍스트</h1>
</body>
</html>
이 예제에서는 텍스트의 색상을 변경하는 방법을 보여줍니다. .custom-color 클래스를 사용하여 특정 텍스트의 색상을 설정합니다.
예제 4: 텍스트 굵기 조절
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* 기본 스타일 */
body {
font-family: Arial, sans-serif;
text-align: center;
}
/* 텍스트 굵기 조절 */
.custom-bold {
font-weight: bold;
}
</style>
<title>텍스트 굵기 조절</title>
</head>
<body>
<h1>기본 텍스트</h1>
<h1 class="custom-bold">굵기 조절된 텍스트</h1>
</body>
</html>
이 예제에서는 텍스트의 굵기를 조절하는 방법을 보여줍니다. .custom-bold 클래스를 사용하여 특정 텍스트의 굵기를 설정합니다.
예제 5: 텍스트 여백 조절
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* 기본 스타일 */
body {
font-family: Arial, sans-serif;
text-align: center;
}
/* 텍스트 여백 조절 */
.custom-spacing {
letter-spacing: 2px;
}
</style>
<title>텍스트 여백 조절</title>
</head>
<body>
<h1>기본 텍스트</h1>
<h1 class="custom-spacing">여백 조절된 텍스트</h1>
</body>
</html>
이 예제에서는 텍스트의 여백을 조절하는 방법을 보여줍니다. .custom-spacing 클래스를 사용하여 특정 텍스트의 글자 사이 여백을 설정합니다.
예제 6: 텍스트 스타일 조합
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* 기본 스타일 */
body {
font-family: Arial, sans-serif;
text-align: center;
}
/* 텍스트 스타일 조합 */
.custom-text {
font-size: 24px;
font-weight: bold;
color: #FF5733;
text-decoration: underline;
font-family: 'Courier New', monospace;
}
</style>
<title>텍스트 스타일 조합</title>
</head>
<body>
<h1>기본 텍스트</h1>
<h1 class="custom-text">다양한 스타일 조합된 텍스트</h1>
</body>
</html>
이 예제에서는 다양한 텍스트 스타일을 조합하는 방법을 보여줍니다. .custom-text 클래스를 사용하여 특정 텍스트에 여러 스타일을 동시에 적용합니다.
'CSS' 카테고리의 다른 글
| 투명 버튼: 투명한 배경을 가진 버튼 디자인. (0) | 2023.12.23 |
|---|---|
| 다중 열 텍스트: 다중 열 텍스트 레이아웃 구현. (0) | 2023.12.23 |
| 비디오 배경: 비디오 배경 설정. (0) | 2023.12.23 |
| 텍스트 음영: 텍스트 음영(글자 그림자) 설정. (0) | 2023.12.23 |
| 레이지 로딩: 이미지 레이지 로딩 구현. (0) | 2023.12.23 |
