개발 공부/HTML

📘2강 - HTML 기본 태그 완벽 정리

squareegg 2025. 6. 5. 13:51

HTML5 기초 완전정복 - 웹페이지 만들기 입문

📚 학습 목표

  • 간단한 웹 페이지를 만드는 HTML 태그들을 안다
  • HTML5 기본 문서를 만들 수 있다
  • 웹 페이지에 이미지, 표, 하이퍼링크를 삽입할 수 있다
  • 인라인 프레임을 사용하여 웹 페이지에 다른 웹 페이지를 내장할 수 있다
  • 오디오 비디오를 웹 페이지에 삽입할 수 있다

1️⃣ HTML5 페이지 기본 구조

HTML5 필수 태그

모든 HTML5 페이지는 다음과 같은 기본 구조를 가져야 합니다:

<!DOCTYPE html>
<!--이 부분은 주석문입니다. 웹 브라우저는 주석을 화면에 출력하지 않습니다.-->
<html>
<head>
    문서제목, 자바스크립트 코드, CSS 스타일 정의, 메타데이터정의
</head>
<body>
    문서의 본문 텍스트, 이미지, 테이블, 자바스크립트 코드, 동영상 등
</body>
</html>

HTML 태그 구성 규칙

  • 시작태그와 종료태그가 모두 있는 경우: <html> ... </html>, <title>문서의 제목입니다</title>
  • 시작 태그만 있는 경우: <br>
  • 태그와 속성은 대소문자 구분 없음
  • 속성 값에 불필요한 공백 문자는 HTML5 표준에 어긋남

2️⃣ 기본 텍스트 태그들

페이지 타이틀 설정

<!DOCTYPE html>
<html>
<head>
    <title>첫타이틀</title>
</head>
<body>
    페이지에 타이틀을 다는 예제입니다. 타이틀은 브라우저의 타이틀바에 보여집니다.
</body>
</html>

문단 제목 달기 (h1~h6)

<h1>1장 홈페이지 만들기</h1>
<h2>1절 HTML 언어</h2>
<h3>1. 웹</h3>
<h4>1.1 인터넷</h4>
<h5>1.1.1 네트워크</h5>
<h6>1.1.1.1. 통신</h6>

툴팁 추가하기

<h1 title="h1태그로 작성하였습니다.">1장 홈페이지</h1>
<h2 title="h2태그로 작성하였습니다.">1절 HTML 언어</h2>

단락 나누기와 줄바꿈

<!-- 단락 나누기 -->
<p>HTML 문서도 본문을 여러 단락으로 나눌 수 있다.</p>
<p>여러 개의 빈 칸은 하나로 취급되며, 엔터 키 역시 하나의 빈 칸으로 처리된다.</p>

<!-- 수평선 -->
<hr>

<!-- 줄바꿈 -->
다음 줄로 넘어갑니다.<br>
2개의 br태그로 두 번 넘어갑니다.<br><br>

3️⃣ 특수 문자와 텍스트 꾸미기

특수 문자 입력

HTML에서는 특수 문자를 엔터티로 표현합니다:

문자 엔터티 코드값
< &lt; &#60;
> &gt; &#62;
© &copy; &#169;
÷ &divide; -
√ &radic; -
공백 &nbsp; -

텍스트 꾸미기 태그

<b>진하게</b>
<strong>중요한</strong>
<em>강조</em>
<i>이탤릭으로 강조</i>
<b><i>진하게 이탤릭으로 강조</i></b>
보통 문자 <small>한단계 작은 문자</small>
<del>삭제</del>
<ins>추가</ins>
보통문자의 <sup>윗첨자</sup>
보통문자의 <sub>아래첨자</sub>
<mark>하이라이팅</mark>

개발자 포맷 그대로 출력

<pre>
그러나 &lt;pre&gt; 태그를 사용하면
    사용자가 입력한 그대로 출력됩니다.
        들여쓰기와 줄바꿈이 그대로 유지됩니다.
</pre>

4️⃣ 블록과 인라인 태그

태그 분류

  • 블록 태그: <p>, <h1>, <div>, <ul> - 항상 새 라인에서 시작하여 한 라인 독점
  • 인라인 태그: <strong>, <a>, <img>, <span> - 블록 속에 삽입되어 블록의 일부로 출력

div와 span 활용

<div style="background-color:skyblue; padding:20px;">
    내가 사람의 방언과 천사의 말을 할지라도 
    <span style="color:red">사랑</span>이 없으면 
    소리 나는 구리와 울리는 꽹과리가 되고
</div>

5️⃣ 메타데이터와 이미지

메타 태그 활용

이미지 삽입

💡 TIP: alt 속성은 이미지가 로드되지 않을 때 대체 텍스트로 표시됩니다.

6️⃣ 리스트 만들기

순서 있는 리스트 (ol)

<ol type="A">
    <li>물을 끓인다.</li>
    <li>라면과 스프를 넣는다.</li>
    <li>파를 썰어 넣는다.</li>
    <li>5분 후 먹는다.</li>
</ol>

순서 없는 리스트 (ul)

<ul>
    <li>감자탕</li>
    <li>스파게티</li>
    <li>올레국수</li>
</ul>

중첩 리스트

<ul>
    <li>내가 좋아하는 음식
        <ul>
            <li>감자탕</li>
            <li>스파게티</li>
        </ul>
    </li>
    <li>라면 먹는 순서
        <ol type="1">
            <li>물을 끓인다.</li>
            <li>라면과 스프를 넣는다.</li>
        </ol>
    </li>
</ul>

정의 리스트 (dl)

<dl>
    <dt><strong>Internet Explorer</strong></dt>
    <dd>마이크로소프트에서 만든 브라우저로 현재 국내 시장에서 가장 많이 사용</dd>
    
    <dt><strong>Firefox</strong></dt>
    <dd>Mozilla 재단에서 오픈 소스로 만든 것으로 W3C의 웹 표준을 선도</dd>
</dl>

7️⃣ 표(Table) 만들기

기본 표 구조

<table border="1">
    <caption>표제목</caption>
    <thead>
        <tr><th>이름</th><th>HTML</th><th>CSS</th></tr>
    </thead>
    <tbody>
        <tr><td>홍길동</td><td>90</td><td>75</td></tr>
        <tr><td>이순신</td><td>80</td><td>88</td></tr>
        <tr><td>강감찬</td><td>100</td><td>90</td></tr>
    </tbody>
    <tfoot>
        <tr><th>합계</th><th>270</th><th>253</th></tr>
    </tfoot>
</table>

표 태그 구성 요소

  • <table>: 표 전체 컨테이너
  • <caption>: 표 제목 (table 첫 번째 요소)
  • <thead>: 헤딩 셀 그룹
  • <tbody>: 데이터 셀 그룹
  • <tfoot>: 바닥 셀 그룹
  • <tr>: 행
  • <th>: 제목(헤딩) 셀
  • <td>: 데이터 셀

8️⃣ 하이퍼링크 만들기

기본 링크


클릭하면 사진페이지로 이동합니다.


네이버

target 속성 활용

W3C(새 윈도우)
전자신문(현재윈도우)
네이버(부모윈도우)
매일경제신문(브라우저 윈도우)

앵커 링크 (페이지 내 이동)

<!-- 앵커 생성 -->
<h3 id="love">Love me tender</h3>
<h3 id="can">Can't help falling in love</h3>

<!-- 앵커로 이동하는 링크 -->
<a href="#love">Love me tender</a>
<a href="#can">Can't help falling in love</a>

파일 다운로드 링크

<a href="media/Elvis.png" download>엘비스 이미지 다운로드</a>
<a href="media/chapter9.pdf" download>chapter9.pdf 다운로드</a>
<a href="media/EmbraceableYou.mp3" download>mp3 다운로드</a>

9️⃣ 인라인 프레임 (iframe)

기본 iframe

<iframe src="iframe1.html" width="200" height="150">
    브라우저가 iframe 태그를 지원하지 않습니다.
</iframe>

srcdoc 속성 활용

<iframe src="iframe1.html" width="200" height="80"
        srcdoc="<html><head></head><body>hello</body></html>">
</iframe>

target과 iframe 연동


   W3C

🔟 미디어 삽입

비디오 삽입

<!-- 기본 비디오 -->
<video src="bear.mp4" width="320" height="240" controls autoplay></video>

<!-- 다중 소스 비디오 -->
<video width="320" height="240" controls autoplay>
    <source src="bear.mp4" type="video/mp4">
    <source src="bear.ogg" type="video/ogg">
    브라우저가 video 태그를 지원하지 않습니다.
</video>

오디오 삽입

<!-- 기본 오디오 -->
<audio src="mymusic.mp3" controls autoplay loop></audio>

<!-- 다중 소스 오디오 -->
<audio controls autoplay>
    <source src="mymusic.mp3" type="audio/mpeg">
    <source src="mymusic.ogg" type="audio/ogg">
    브라우저가 audio 태그를 지원하지 않습니다.
</audio>

미디어 태그 속성

  • controls: 재생 컨트롤 버튼 표시
  • autoplay: 자동 재생
  • loop: 반복 재생
  • muted: 음소거 상태로 시작
  • preload: 페이지 로드 시 미디어 로드 방식

📋 정리

이번 포스팅에서는 HTML5의 기본 구조부터 다양한 태그들의 사용법까지 살펴보았습니다. 웹 페이지 제작의 기초가 되는 내용들이니 실습을 통해 익숙해지시기 바랍니다.

참고: 일부 외부 사이트들은 보안상의 이유로 iframe 삽입을 제한할 수 있습니다.

728x90
반응형