1. CSS 코드를 활용한 HTML 코드를 포함한 예제
아래는 제가 제공한 CSS 코드를 활용한 제목의 샘플 화면을 만들기 위한 HTML 코드를 포함한 예제입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>제목 디자인 샘플</title>
<style>
/* 제목 공통 스타일 */
h1, h2, h3, h4, h5, h6 {
font-family: 'Arial', sans-serif;
font-weight: 700;
color: #333333;
margin-bottom: 1rem;
line-height: 1.4;
text-align: left;
}
/* 각 제목별 크기 조정 */
h1 {
font-size: 2.5rem;
border-bottom: 3px solid #ff6f61;
padding-bottom: 0.3rem;
}
h2 {
font-size: 2rem;
border-left: 5px solid #ff6f61;
padding-left: 0.5rem;
}
h3 {
font-size: 1.75rem;
color: #444444;
}
h4 {
font-size: 1.5rem;
}
h5 {
font-size: 1.25rem;
text-transform: uppercase;
letter-spacing: 0.05rem;
}
h6 {
font-size: 1rem;
font-style: italic;
}
/* 반응형 디자인 */
@media (max-width: 768px) {
h1 {
font-size: 2rem;
}
h2 {
font-size: 1.75rem;
}
h3 {
font-size: 1.5rem;
}
}
</style>
</head>
<body>
<h1>제목 1: 메인 제목</h1>
<h2>제목 2: 섹션 제목</h2>
<h3>제목 3: 소제목</h3>
<h4>제목 4: 하위 소제목</h4>
<h5>제목 5: 강조된 제목</h5>
<h6>제목 6: 보조 텍스트</h6>
</body>
</html>
2. 샘플 화면 보는 방법
- 위 코드를 복사합니다.
- 텍스트 편집기(예: 메모장, Visual Studio Code 등)를 열어 HTML 파일로 저장합니다. (예: sample.html)
- 저장한 파일을 웹 브라우저에서 열어보세요.
3. 실행 결과
