index.html - Examples

  1<!DOCTYPE html>
  2<html lang="ko">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>HTML 기초 예제</title>
  7</head>
  8<body>
  9    <!-- ============================================
 10         HTML 기초 예제
 11         기본적인 HTML 태그와 구조를 학습합니다.
 12    ============================================= -->
 13
 14    <!-- 1. 제목 태그 (h1 ~ h6) -->
 15    <h1>제목 1 - 가장 큰 제목</h1>
 16    <h2>제목 2</h2>
 17    <h3>제목 3</h3>
 18    <h4>제목 4</h4>
 19    <h5>제목 5</h5>
 20    <h6>제목 6 - 가장 작은 제목</h6>
 21
 22    <hr>
 23
 24    <!-- 2. 단락과 텍스트 서식 -->
 25    <h2>단락과 텍스트 서식</h2>
 26    <p>이것은 <strong>단락(paragraph)</strong>입니다. HTML에서 텍스트를 그룹화합니다.</p>
 27    <p>텍스트 서식 태그들:</p>
 28    <ul>
 29        <li><strong>strong</strong> - 중요한 텍스트 (굵게)</li>
 30        <li><em>em</em> - 강조 텍스트 (기울임)</li>
 31        <li><mark>mark</mark> - 하이라이트</li>
 32        <li><del>del</del> - 삭제된 텍스트</li>
 33        <li><ins>ins</ins> - 추가된 텍스트</li>
 34        <li><code>code</code> - 코드</li>
 35        <li>H<sub>2</sub>O - 아래 첨자</li>
 36        <li>x<sup>2</sup> - 위 첨자</li>
 37    </ul>
 38
 39    <hr>
 40
 41    <!-- 3. 목록 -->
 42    <h2>목록</h2>
 43
 44    <h3>순서 없는 목록 (ul)</h3>
 45    <ul>
 46        <li>사과</li>
 47        <li>바나나</li>
 48        <li>오렌지</li>
 49    </ul>
 50
 51    <h3>순서 있는 목록 (ol)</h3>
 52    <ol>
 53        <li>첫 번째 단계</li>
 54        <li>두 번째 단계</li>
 55        <li>세 번째 단계</li>
 56    </ol>
 57
 58    <h3>설명 목록 (dl)</h3>
 59    <dl>
 60        <dt>HTML</dt>
 61        <dd>HyperText Markup Language - 웹 페이지 구조를 정의</dd>
 62        <dt>CSS</dt>
 63        <dd>Cascading Style Sheets - 웹 페이지 스타일을 정의</dd>
 64        <dt>JavaScript</dt>
 65        <dd>웹 페이지에 동적 기능을 추가하는 프로그래밍 언어</dd>
 66    </dl>
 67
 68    <hr>
 69
 70    <!-- 4. 링크와 이미지 -->
 71    <h2>링크와 이미지</h2>
 72
 73    <h3>링크 (a 태그)</h3>
 74    <p>
 75        <a href="https://developer.mozilla.org/ko/" target="_blank">MDN Web Docs</a> -
 76        새 탭에서 열림 (target="_blank")
 77    </p>
 78    <p>
 79        <a href="semantic.html">시맨틱 HTML 예제</a> - 같은 폴더의 다른 파일로 이동
 80    </p>
 81    <p>
 82        <a href="#section-div">페이지 내 이동</a> - 같은 페이지의 특정 위치로 이동
 83    </p>
 84
 85    <h3>이미지 (img 태그)</h3>
 86    <p>
 87        <!-- 이미지가 없을 때 대체 텍스트(alt)가 표시됩니다 -->
 88        <img src="example.jpg" alt="예제 이미지 설명" width="200" height="150">
 89    </p>
 90    <p>
 91        <!-- 외부 이미지 (placeholder) -->
 92        <img src="https://via.placeholder.com/200x150" alt="플레이스홀더 이미지">
 93    </p>
 94
 95    <hr>
 96
 97    <!-- 5. 인용 -->
 98    <h2>인용</h2>
 99
100    <h3>블록 인용 (blockquote)</h3>
101    <blockquote cite="https://example.com">
102        <p>프로그래밍은 생각하는 것을 배우는 것이다.</p>
103        <footer>- Steve Jobs</footer>
104    </blockquote>
105
106    <h3>인라인 인용 (q)</h3>
107    <p>Steve Jobs는 <q>Stay hungry, stay foolish</q>라고 말했습니다.</p>
108
109    <hr>
110
111    <!-- 6. div와 span -->
112    <h2 id="section-div">div와 span</h2>
113
114    <div style="background-color: #f0f0f0; padding: 10px; margin: 10px 0;">
115        <p>div는 <strong>블록 레벨</strong> 컨테이너입니다.</p>
116        <p>여러 요소를 그룹화할 때 사용합니다.</p>
117    </div>
118
119    <p>
120        span은 <span style="color: red;">인라인</span> 컨테이너입니다.
121        텍스트 일부에 <span style="background-color: yellow;">스타일</span>을 적용할 때 사용합니다.
122    </p>
123
124    <hr>
125
126    <!-- 7. 특수 문자 -->
127    <h2>HTML 엔티티 (특수 문자)</h2>
128    <ul>
129        <li>&lt; - 보다 작음 (&amp;lt;)</li>
130        <li>&gt; - 보다 큼 (&amp;gt;)</li>
131        <li>&amp; - 앰퍼샌드 (&amp;amp;)</li>
132        <li>&nbsp; - 공백 (&amp;nbsp;)</li>
133        <li>&copy; - 저작권 (&amp;copy;)</li>
134        <li>&reg; - 등록상표 (&amp;reg;)</li>
135        <li>&euro; - 유로 (&amp;euro;)</li>
136    </ul>
137
138    <hr>
139
140    <!-- 8. 주석 -->
141    <h2>HTML 주석</h2>
142    <p>주석은 브라우저에 표시되지 않습니다.</p>
143    <!-- 이것은 HTML 주석입니다. 개발자만 볼 수 있습니다. -->
144    <p>소스 코드를 확인하면 주석을 볼 수 있습니다.</p>
145
146    <hr>
147
148    <!-- 9. pre와 code -->
149    <h2>코드 표시</h2>
150    <pre><code>function hello() {
151    console.log("Hello, World!");
152}
153
154hello();</code></pre>
155
156    <hr>
157
158    <footer>
159        <p>&copy; 2024 HTML 기초 예제. 학습 목적으로 제작됨.</p>
160    </footer>
161</body>
162</html>