개발 공부/프론트 엔드

HTML 핵심 정리

baby-t 2025. 9. 4. 22:12

백엔드 개발 과정에서도 프론트엔드와 데이터를 주고받거나, 간단한 관리자 페이지를 만드는 등 HTML을 마주할 일이 많습니다. HTML은 프로그래밍 언어가 아닌, 웹 페이지의 구조를 정의하고 콘텐츠를 표시하는 마크업 언어입니다. 즉, 웹 페이지의 '뼈대'를 만드는 역할을 합니다. 📜

## 1. HTML 문서의 기본 구조

모든 HTML 문서는 정해진 기본 구조를 따릅니다. 이 구조는 브라우저에게 문서의 유형과 내용을 어떻게 해석해야 할지 알려주는 역할을 합니다.

HTML
 
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>문서의 제목</title>
</head>
<body>
    <h1>가장 큰 제목</h1>
    <p>이것은 단락입니다.</p>
</body>
</html>
  • <!DOCTYPE html>: 이 문서가 HTML5 표준으로 작성되었음을 브라우저에 알리는 선언문입니다.
  • <html>: HTML 문서의 전체 범위를 감싸는 최상위 요소(root element)입니다. lang="ko" 속성은 이 문서의 주 사용 언어가 한국어임을 나타냅니다.
  • <head>: 문서의 메타데이터를 담는 부분입니다. 페이지 제목, 문자 인코딩 방식, CSS 파일 연결 등 브라우저 화면에 직접적으로 보이지 않는 정보들이 위치합니다.
    • <title>: 브라우저 탭에 표시되는 페이지의 제목입니다.
    • <meta charset="UTF-8">: 문자 깨짐을 방지하기 위해 문서의 문자 인코딩 방식을 UTF-8로 지정합니다.
  • <body>: 브라우저 화면에 실제로 보여지는 모든 콘텐츠가 들어가는 부분입니다. 텍스트, 이미지, 영상, 폼 등이 모두 여기에 작성됩니다.

## 2. 핵심 HTML 태그 (Tags)

HTML은 **태그(Tag)**를 사용하여 콘텐츠의 의미와 구조를 나타냅니다.

### 구조(Layout) 태그

웹 페이지의 전체적인 구조를 의미에 맞게 구분하는 시맨틱(Semantic) 태그들입니다.

  • <header>: 페이지나 특정 구역의 머리말을 나타냅니다. (로고, 제목, 메뉴 등)
  • <nav>: 다른 페이지로 이동하는 링크(메뉴)들을 묶을 때 사용합니다.
  • <main>: 페이지의 핵심적인 내용을 담는 부분입니다. 문서에서 단 한 번만 사용해야 합니다.
  • <footer>: 페이지나 특정 구역의 꼬리말을 나타냅니다. (저작권, 연락처 등)
  • <section>: 연관 있는 내용들을 하나의 구역으로 묶을 때 사용합니다.
  • <div>: 특별한 의미 없이, 콘텐츠를 단순히 묶거나 스타일링을 위해 사용하는 범용 컨테이너입니다.
  • <span>: <div>와 유사한 컨테이너지만, 인라인(inline) 요소라는 점이 다릅니다. 문장 안의 특정 단어처럼, 콘텐츠의 일부 영역을 묶어 스타일을 적용할 때 주로 사용됩니다.
  • <aside>는 문서의 주요 내용(main content)과는 간접적으로 관련된 내용을 담는 구획(section)을 나타내는 시맨틱 태그입니다.

### 텍스트(Text) 태그

  • <h1> ~ <h6>: 제목을 나타내는 태그로, <h1>이 가장 중요한 최상위 제목입니다.
  • <p>: **단락(Paragraph)**을 나타냅니다.
  • <strong>: 중요한 텍스트를 굵게 표시합니다.
  • <em>: 강조하고 싶은 텍스트를 기울여 표시합니다.
  • <a>: 다른 페이지로 이동하는 하이퍼링크를 만듭니다. href 속성에 이동할 주소를 적습니다.
  • <br> (Line Break): 문단 안에서 강제로 줄 바꿈을 할 때 사용합니다.
  • <hr> (Horizontal Rule): 수평선을 그어 주제 변경이나 내용 구분을 나타낼 때 사용합니다.

### 목록(List) 태그

  • <ul> (Unordered List): 순서가 없는 목록을 만듭니다.
  • <ol> (Ordered List): 순서가 있는 목록을 만듭니다.
  • <li> (List Item): <ul>이나 <ol> 안에서 각 항목을 나타냅니다.

### 미디어(Media) 태그

  • <img>: 이미지를 삽입하는 태그입니다.
    • src (source) 속성에 이미지 파일의 경로를, alt (alternative) 속성에는 이미지를 설명하는 대체 텍스트를 작성합니다.
    • ex) <img src="image.jpg" alt="이미지 설명">

## 3. [백엔드 필수] 폼(Form) 태그

폼은 사용자로부터 데이터를 입력받아 서버로 전송하는 역할을 하므로 백엔드 개발자에게 가장 중요한 태그입니다.

  • <form>: 폼 요소 전체를 감싸는 컨테이너입니다.
    • action: 폼 데이터를 처리할 서버의 URL을 지정합니다.
    • method: 데이터를 전송할 HTTP 메소드를 지정합니다. (GET 또는 POST)
  • <label>: 입력 필드의 제목을 나타냅니다.
  • <input>: 가장 중요한 입력 필드 태그입니다. type 속성에 따라 기능이 달라집니다.
    • type="text": 일반 텍스트 입력
    • type="password": 비밀번호 입력
    • type="email": 이메일 형식 입력
    • type="checkbox": 다중 선택 가능한 체크박스
    • type="radio": 하나만 선택 가능한 라디오 버튼
    • type="submit": 폼 데이터를 action에 지정된 주소로 전송하는 버튼
  • <textarea>: 여러 줄의 텍스트를 입력받는 필드입니다.
  • <button>: 클릭 가능한 버튼을 만듭니다.
HTML
 
<form action="/login" method="post">
    <label for="username">아이디:</label>
    <input type="text" id="username" name="username">

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

    <button type="submit">로그인</button>
</form>

위 예제에서 name 속성은 서버에서 username, password라는 키로 데이터를 받기 위해 반드시 필요합니다.

 

## 드롭다운 목록: <select>와 <option> 태그 ☑️

<select>와 <option> 태그는 항상 함께 사용되며, 사용자가 미리 정의된 목록에서 원하는 항목을 선택할 수 있는 드롭다운 메뉴를 만듭니다.

### <select> 태그

드롭다운 목록 전체를 감싸는 컨테이너 역할입니다.

  • name: 백엔드에 가장 중요한 속성입니다. 사용자가 항목을 선택하고 폼을 제출했을 때, 서버로 전송될 데이터의 '키(key)'가 됩니다.
  • id: <label> 태그와 연결하거나 CSS/JavaScript에서 제어하기 위한 고유 ID입니다.
  • multiple: 이 속성을 추가하면, 사용자가 Ctrl 또는 Shift 키를 이용해 여러 항목을 동시에 선택할 수 있습니다. (일반적으로 드롭다운이 아닌 리스트 박스 형태로 표시됩니다.)

### <option> 태그

<select> 태그 내부에 위치하며, 목록에 표시될 각각의 항목을 정의합니다.

  • value: 해당 항목이 선택되었을 때, 서버로 실제로 전송될 값입니다. 이 값을 지정하지 않으면 태그 사이에 있는 텍스트가 대신 전송됩니다.
  •  

## <input> 태그 상세 설명

<input> 태그는 사용자로부터 데이터를 입력받기 위한 대화형 컨트롤을 만드는 데 사용됩니다. 이 태그의 가장 큰 특징은 type 속성에 따라 모양과 동작이 완전히 달라진다는 점입니다. <input>은 단독으로 사용하는 태그로, 닫는 태그가 없습니다.

## 1. <input> 태그의 주요 속성 (Attributes)

다양한 type에서 공통적으로 사용되는 중요한 속성들은 다음과 같습니다.

  • type: <input> 요소의 종류를 결정하는 가장 중요한 속성입니다. (예: text, password, checkbox, submit)
  • name: 백엔드 개발자에게 가장 중요한 속성입니다. 폼이 서버로 제출될 때, 여기에 지정된 값이 **데이터의 '키(key)'**가 됩니다. 예를 들어, <input name="username">에 'baby-t'를 입력하고 제출하면, 서버는 username=baby-t라는 키-값 쌍을 받게 됩니다.
  • value: 입력 필드의 초깃값을 지정합니다. type이 radio나 checkbox인 경우, 해당 항목이 선택되었을 때 서버로 전송될 값을 의미합니다.
  • placeholder: 입력 필드에 사용자가 어떤 값을 입력해야 하는지 알려주는 힌트 텍스트입니다. 값을 입력하기 시작하면 사라집니다.
  • id: 해당 요소를 고유하게 식별하는 ID입니다. <label> 태그의 for 속성과 연결하여 웹 접근성을 높이거나, CSS/JavaScript에서 특정 요소를 선택할 때 사용됩니다.
  • disabled: 해당 입력 필드를 비활성화하여 사용자가 클릭하거나 입력할 수 없도록 만듭니다. 비활성화된 필드의 데이터는 서버로 전송되지 않습니다.
  • readonly: 필드를 읽기 전용으로 만듭니다. 사용자가 수정할 수는 없지만, 데이터는 서버로 전송됩니다.
  • required: 폼 제출 시 해당 필드가 반드시 채워져 있어야 함을 나타냅니다.

## 2. 자주 사용되는 <input> type 종류

### 텍스트 입력 (Text Input)

  • type="text": 한 줄의 텍스트를 입력받는 가장 일반적인 필드입니다.
  • type="password": 입력 내용이 점(•)으로 마스킹되어 보이는 비밀번호 필드입니다.
  • type="email": 이메일 주소 형식인지 간단한 클라이언트 측 유효성 검사를 수행합니다.
  • type="number": 숫자만 입력받는 필드로, 스핀 버튼이 제공되기도 합니다.

### 선택 입력 (Selection Input)

  • type="radio": 여러 항목 중 하나만 선택할 수 있는 라디오 버튼입니다.
    • 같은 name 속성을 가진 라디오 버튼들은 하나의 그룹으로 묶입니다.
    HTML
     
    <input type="radio" id="male" name="gender" value="male">
<label for="male">남성</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">여성</label>
  • type="checkbox": 여러 항목을 중복으로 선택할 수 있는 체크박스입니다.

### 기타 주요 type

  • type="file": 사용자 기기의 파일을 서버로 업로드할 수 있도록 합니다.
  • type="hidden": 화면에는 보이지 않지만, 서버에는 전송해야 하는 숨겨진 데이터를 담을 때 사용합니다. (예: 사용자 ID, CSRF 토큰 등)
  • type="submit": 이 버튼을 클릭하면 <form>의 action 속성에 지정된 주소로 폼 데이터를 제출합니다.
  • type="button": 자체 기능은 없으며, JavaScript와 함께 사용하여 특정 동작을 실행시킬 때 사용하는 일반 버튼입니다.
  • type="reset": 같은 <form> 내의 모든 입력 필드를 초깃값으로 되돌립니다.

 

### 테이블(Table) 태그

<table>은 행과 열로 이루어진 표 형식의 데이터를 나타낼 때 사용합니다.

  • <tr> (Table Row): 표의 행을 정의합니다.
  • <th> (Table Head): 표의 머리말 셀을 정의하며, 주로 제목을 나타냅니다. (굵은 글씨와 중앙 정렬이 기본 스타일)
  • <td> (Table Data): 표의 일반 데이터 셀을 정의합니다.

 

## 종합 예시 

HTML
 
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML 핵심 태그 정리 - baby-t 기술 블로그</title>
</head>
<body>

    <header>
        <h1>baby-t 기술 블로그</h1>
    </header>

    <nav>
        <ul>
            <li><a href="/home">홈</a></li>
            <li><a href="/about">소개</a></li>
            <li><a href="/archives">글 목록</a></li>
        </ul>
    </nav>

    <main>
        <article>
            <h2>HTML 핵심 태그 총정리</h2>
            <p>
                이 글에서는 웹 페이지의 뼈대를 만드는 <strong>HTML의 기본 구조</strong>와 <em>핵심 태그</em>들을 알아봅니다.<br>
                특히 <span style="color:red;">시맨틱 태그</span>의 올바른 사용은 코드의 가독성을 높여줍니다.
            </p>

            <img src="html_logo.png" alt="HTML5 로고 이미지" width="150">

            <h3>주요 태그 비교 테이블</h3>
            <table border="1">
                <tr>
                    <th>태그</th>
                    <th>용도</th>
                    <th>특징</th>
                </tr>
                <tr>
                    <td>&lt;div&gt;</td>
                    <td>블록(block) 컨테이너</td>
                    <td>한 줄 전체를 차지합니다.</td>
                </tr>
                <tr>
                    <td>&lt;span&gt;</td>
                    <td>인라인(inline) 컨테이너</td>
                    <td>콘텐츠 크기만큼만 공간을 차지합니다.</td>
                </tr>
            </table>
        </article>

        <hr>

        <section>
            <h3>댓글 남기기</h3>
            <form action="/comments" method="post">
                <div>
                    <label for="username">작성자:</label>
                    <input type="text" id="username" name="username" placeholder="이름을 입력하세요">
                </div>
                <br>
                <div>
                    <label for="comment-text">내용:</label>
                    <textarea id="comment-text" name="comment" rows="4" cols="50"></textarea>
                </div>
                <br>
                <button type="submit">댓글 등록</button>
            </form>
        </section>
    </main>

    <footer>
        <p>
            &copy; 2025 baby-t. All rights reserved.<br>
        </p>
    </footer>

</body>
</html>

'개발 공부 > 프론트 엔드' 카테고리의 다른 글

JavaScript 정리  (0) 2025.09.11
CSS 핵심 정리  (0) 2025.09.07
UTF-8  (0) 2025.09.05

'개발 공부/프론트 엔드'의 다른글

  • 현재글HTML 핵심 정리

관련글

티스토리툴바