HTML5 웹 개발의 기초 구성 요소와 태그 활용법

웹 개발의 가장 기본이 되는 기술은 HTML, CSS, JavaScript입니다. HTML은 웹 페이지의 구조와 내용을 담당하고, CSS는 시각적인 스타일을 입히며, JavaScript는 동적인 상호작용을 구현합니다. 이 중 웹의 뼈대 역할을 하는 HTML5의 핵심 요소들을 정리합니다.

1. HTML 문서의 기본 구조

모든 HTML 문서는 특정한 계층 구조를 가집니다.

<!DOCTYPE html>
<html>
    <head>
        <!-- 문서의 메타데이터 및 설정 정보 -->
    </head>
    <body>
        <!-- 실제 사용자에게 보이는 콘텐츠 -->
    </body>
</html>

<html>: 모든 태그를 감싸는 최상위 루트 요소입니다.
<head>: 문서의 제목, 인코딩 설정, 외부 파일 링크 등 브라우저가 읽어야 할 정보를 담습니다.
<body>: 텍스트, 이미지, 버튼 등 실제 화면에 출력되는 모든 내용을 작성합니다.

2. 문서 정보(Head) 섹션

헤드 영역에는 웹 페이지의 특성을 정의하는 다양한 태그가 들어갑니다.

<head>
    <title>나의 첫 웹사이트</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
</head>

<title>: 브라우저 탭에 표시될 제목을 설정합니다.
<meta>: 인코딩 방식이나 검색 엔진을 위한 정보를 제공합니다.
<link>: 외부 CSS 파일을 연결할 때 사용합니다.

3. 텍스트 관련 핵심 태그

웹 페이지 내에서 텍스트의 의미를 구분하기 위해 다양한 태그를 사용합니다.

<h1>가장 중요한 제목</h1>
<h2>부제목</h2>
<p>일반적인 문단을 작성할 때 사용합니다.</p>
<em>기울임꼴로 강조</em>
<strong>굵은 글씨로 중요도 표시</strong>
<span style="color:red;">특정 부분만 스타일 적용</span>

4. 인용 및 줄바꿈

텍스트의 흐름을 조절하거나 외부 글을 인용할 때 유용합니다.

<q>: 짧은 문장 인용 (자동으로 따옴표 삽입).
<blockquote>: 긴 문단 인용 (들여쓰기 적용).
<br />: 줄바꿈 처리를 수행합니다.
 : HTML 소스상에서 여러 개의 공백을 넣고 싶을 때 사용합니다.

5. 리스트와 레이아웃 컨테이너

정보를 나열하거나 구역을 나눌 때 사용합니다.

<!-- 순서 없는 목록 -->
<ul>
    <li>사과</li>
    <li>바나나</li>
</ul>

<!-- 순서 있는 목록 -->
<ol>
    <li>로그인</li>
    <li>정보입력</li>
</ol>

<!-- 논리적 구역 나누기 -->
<div id="main-content">
    <h2>메인 섹션</h2>
    <p>여기에 콘텐츠가 들어갑니다.</p>
</div>

6. 표(Table) 작성

데이터를 행과 열로 구조화하여 보여줄 때 사용합니다.

<table border="1" summary="제품별 가격표">
    <caption>상품 가격 정보</caption>
    <thead>
        <tr>
            <th>품목</th>
            <th>가격</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>노트북</td>
            <td>1,500,000원</td>
        </tr>
    </tbody>
</table>

7. 하이퍼링크와 이미지

페이지 이동과 시각적 요소 추가를 담당합니다.

<!-- 하이퍼링크 -->
<a href="https://example.com" target="_blank" title="사이트로 이동">방문하기</a>

<!-- 이미지 삽입 -->
<img src="image.jpg" alt="설명 텍스트" title="이미지 툴팁" />

8. 사용자 입력을 위한 폼(Form)

서버로 데이터를 전송하기 위한 필수적인 구성 요소입니다.

<form action="/submit-data" method="POST">
    <label for="userName">이름:</label>
    <input type="text" id="userName" name="userName" placeholder="이름을 입력하세요" />

    <label>비밀번호:</label>
    <input type="password" name="userPw" />

    <p>성별:</p>
    <input type="radio" name="gender" value="m" checked> 남
    <input type="radio" name="gender" value="f"> 여

    <p>관심분야:</p>
    <select name="interest">
        <option value="tech" selected>IT/기술</option>
        <option value="design">디자인</option>
    </select>

    <button type="submit">제출</button>
    <button type="reset">초기화</button>
</form>

<label>: 입력창과 텍스트를 연결하여 접근성을 높입니다. for 속성과 id가 일치해야 합니다.
<textarea>: 여러 줄의 텍스트를 입력받을 때 사용합니다.

9. 시맨틱 태그와 기타 기능

HTML5에서는 의미론적(Semantic) 구조를 위해 <nav>, <header>, <footer> 등의 태그를 제공합니다. 또한 웹 폰트 기반의 아이콘을 활용하면 해상도에 상관없이 깔끔한 그래픽을 구현할 수 있습니다.

<nav>
    <ul>
        <li><a href="/">홈</a></li>
        <li><a href="/about">소개</a></li>
    </ul>
</nav>

태그: html5 Web Development frontend HTML Tags Semantic Web

7월 20일 18:16에 게시됨

괴물 클럽