웹 개발의 기초
HTML이란?
HTML은 웹 페이지의 구조를 정의하는 마크업 언어입니다.
HTML의 기본 구조
HTML 문서는 DOCTYPE 선언, html, head, body 태그로 구성됩니다.
DOCTYPE 선언
DOCTYPE 선언은 HTML 문서의 버전을 지정합니다.
CSS란?
CSS는 웹 페이지의 스타일을 정의하는 언어입니다.
CSS의 기본 문법
CSS는 선택자와 선언부로 구성됩니다.
💡 퀵 접속: htm.kr/headings
제목 태그(h1~h6)는 HTML 문서에서 제목과 부제목을 정의하는 태그입니다. h1이 가장 중요한 제목이고, h6가 가장 낮은 수준의 제목입니다. 문서의 구조를 명확하게 하고 검색 엔진 최적화(SEO)에 중요한 역할을 합니다.
<h1>웹사이트의 주요 제목</h1>
<h2>섹션 제목</h2>
<p>섹션 내용...</p>
<h3>하위 섹션 제목</h3>
<p>하위 섹션 내용...</p>
<h4>더 작은 제목</h4>
<p>내용...</p>
<h5>작은 제목</h5>
<p>내용...</p>
<h6>가장 작은 제목</h6>
<p>내용...</p>| 속성 | 설명 | 예시 |
|---|---|---|
| class | CSS 클래스 지정 | <h1 class="main-title"> |
| id | 고유 식별자 | <h2 id="section1"> |
| style | 인라인 스타일 | <h3 style="color: blue;"> |
<article class="blog-post">
<header>
<h1>웹 개발의 기초</h1>
<p class="post-meta">작성자: 홍길동 | 2024년 3월 15일</p>
</header>
<section>
<h2>HTML이란?</h2>
<p>HTML은 웹 페이지의 구조를 정의하는 마크업 언어입니다.</p>
<h3>HTML의 기본 구조</h3>
<p>HTML 문서는 DOCTYPE 선언, html, head, body 태그로 구성됩니다.</p>
<h4>DOCTYPE 선언</h4>
<p>DOCTYPE 선언은 HTML 문서의 버전을 지정합니다.</p>
</section>
<section>
<h2>CSS란?</h2>
<p>CSS는 웹 페이지의 스타일을 정의하는 언어입니다.</p>
<h3>CSS의 기본 문법</h3>
<p>CSS는 선택자와 선언부로 구성됩니다.</p>
</section>
</article>HTML은 웹 페이지의 구조를 정의하는 마크업 언어입니다.
HTML 문서는 DOCTYPE 선언, html, head, body 태그로 구성됩니다.
DOCTYPE 선언은 HTML 문서의 버전을 지정합니다.
CSS는 웹 페이지의 스타일을 정의하는 언어입니다.
CSS는 선택자와 선언부로 구성됩니다.
<style>
/* 기본 제목 스타일 */
h1 {
font-size: 2.5em;
margin-bottom: 1em;
color: #333;
border-bottom: 2px solid #333;
padding-bottom: 0.5em;
}
h2 {
font-size: 2em;
margin: 1.5em 0 1em;
color: #444;
}
h3 {
font-size: 1.5em;
margin: 1.2em 0 0.8em;
color: #555;
}
h4 {
font-size: 1.2em;
margin: 1em 0 0.6em;
color: #666;
}
h5 {
font-size: 1.1em;
margin: 0.8em 0 0.4em;
color: #777;
}
h6 {
font-size: 1em;
margin: 0.6em 0 0.3em;
color: #888;
}
/* 블로그 포스트 제목 스타일 */
.blog-post h1 {
font-family: 'Noto Serif KR', serif;
line-height: 1.2;
}
.post-meta {
color: #666;
font-size: 0.9em;
margin-top: -1em;
margin-bottom: 2em;
}
/* 반응형 스타일 */
@media (max-width: 768px) {
h1 { font-size: 2em; }
h2 { font-size: 1.8em; }
h3 { font-size: 1.4em; }
h4 { font-size: 1.1em; }
h5 { font-size: 1em; }
h6 { font-size: 0.9em; }
}
</style>제목 태그가 올바르게 사용되었는지 확인하는 방법: