HTML 핵심 속성, 리스트, 테이블 및 폼 요소 완벽 가이드

1. 식별자(ID)와 클래스(Class) 속성

ID 속성

특정 요소를 문서 내에서 유일하게 식별하기 위해 사용됩니다. 전체 HTML 문서에서 중복되지 않는 고유한 값을 가져야 하며, CSS 스타일링이나 JavaScript DOM 조작 시 정확한 타겟팅을 위해 활용됩니다.

<nav>
    <a href="#section-intro" id="nav-intro">소개</a>
    <a href="#section-features" id="nav-features">기능</a>
    <a href="#section-pricing" id="nav-pricing">가격</a>
</nav>

<section id="section-intro">서비스 소개 영역</section>
<section id="section-features">주요 기능 영역</section>

Class 속성

여러 요소에 공통된 스타일이나 동작을 적용할 때 사용합니다. 하나의 요소에 여러 클래스를 공백으로 구분하여 지정할 수 있으며, 코드 재사용성을 높여줍니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>클래스 활용 예시</title>
    <style>
        .highlight { background-color: yellow; font-weight: bold; }
        .text-center { text-align: center; }
    </style>
</head>
<body>
    <p class="highlight">중요한 공지 사항입니다.</p>
    <p class="highlight text-center">이 텍스트는 강조되면서 중앙 정렬됩니다.</p>
</body>
</html>

2. 리스트 요소

순서가 있는 리스트 (Ordered List)

<ol>과 <li> 태그를 사용하여 순서가 중요한 항목을 나열합니다.

<ol>
    <li>개발 환경 설정</li>
    <li>의존성 패키지 설치</li>
    <li>서버 실행 및 테스트</li>
</ol>

순서가 없는 리스트 (Unordered List)

<ul>과 <li> 태그를 사용하여 순서와 무관한 항목을 그룹화합니다.

정의 리스트 (Definition List)

<dl> 태그 내에 용어(<dt>)와 설명(<dd>)을 쌍으로 작성합니다.

<dl>
    <dt>HTML</dt>
    <dd>웹 페이지의 구조를 정의하는 마크업 언어</dd>
    <dt>CSS</dt>
    <dd>HTML 요소의 시각적 표현과 레이아웃을 담당하는 스타일 시트</dd>
    <dt>JavaScript</dt>
    <dd>웹 페이지에 동적인 기능과 상호작용을 추가하는 프로그래밍 언어</dd>
</dl>

3. 테이블 구조

기본 구성

테이블은 <table>을 최상위 컨테이너로 하며, 머리글(<thead>)과 본문(<tbody>)으로 논리적 구분을 합니다. 행은 <tr>, 머리글 셀은 <th>(기본 굵게 표시), 데이터 셀은 <td>로 정의합니다.

기본 테이블 예시

<table>
    <thead>
        <tr>
            <th>사원 번호</th>
            <th>이름</th>
            <th>부서</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>EMP-001</td>
            <td>김철수</td>
            <td>개발팀</td>
        </tr>
        <tr>
            <td>EMP-002</td>
            <td>이영희</td>
            <td>디자인팀</td>
        </tr>
    </tbody>
</table>

셀 병합 및 테이블 속성

colspan은 가로로 셀을 병합하고, rowspan은 세로로 셀을 병합합니다. (참고: border, cellpadding, cellspacing은 레거시 속성이며, 현대 웹 개발에서는 CSS를 사용하는 것이 권장됩니다.)

<table border="1">
    <thead>
        <tr>
            <th>항목</th>
            <th colspan="2">상세 정보</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td rowspan="2">프로젝트 A</td>
            <td>담당자</td>
            <td>박지성</td>
        </tr>
        <tr>
            <td>상태</td>
            <td>진행 중</td>
        </tr>
    </tbody>
</table>

4. 폼(Form)과 데이터 전송

폼의 개념과 구성 요소

폼은 사용자로부터 데이터를 수집하여 서버로 전송하는 인터페이스입니다. 텍스트 입력, 선택, 파일 업로드 등 다양한 인터랙션을 제공합니다. 주요 구성 요소로는 데이터를 입력받는 폼 필드, 전송을 위한 제출 버튼, 초기화 버튼, 접근성을 높이는 레이블, 그리고 데이터 무결성을 위한 유효성 검사 메커니즘이 있습니다.

폼 기본 문법과 Action 속성

action 속성은 데이터가 전송될 서버의 엔드포인트(URL)를 지정합니다. 비워두면 현재 페이지 URL로 전송되며, 상대 경로나 절대 경로를 명시할 수 있습니다.

<form action="/api/v1/users/register" method="POST">
    <!-- 폼 필드들 -->
</form>

Input 태그와 타입

<input> 요소는 type 속성에 따라 다양한 형태로 렌더링됩니다.

  • text / password: 단일 텍스트 및 마스킹된 비밀번호 입력.
  • radio / checkbox: 단일 선택 및 다중 선택. (라디오 버튼은 동일한 name 속성을 가져야 그룹화됩니다.)
  • file: 파일 업로드. multiple 속성으로 다중 선택 가능.
  • submit / reset / button: 폼 제출, 초기화, 일반 버튼.
  • date / email: 날짜 선택 및 이메일 형식 검증 입력.

주요 Input 속성

name은 서버로 전송될 키(Key) 역할을 하며, value는 실제 전송될 값(Value)입니다. 이 외에도 placeholder(힌트), required(필수 입력), readonly(읽기 전용), disabled(비활성화 및 전송 제외), maxlength(최대 길이), autocomplete(자동 완성 제어) 등이 있습니다.

<form action="/auth/login" method="POST">
    <p>
        <label>아이디: <input type="text" name="user_id" placeholder="아이디 입력" required></label>
    </p>
    <p>
        <label>비밀번호: <input type="password" name="user_pw" maxlength="20" required></label>
    </p>
    <p>
        등급: 
        <label><input type="radio" name="grade" value="normal" checked> 일반</label>
        <label><input type="radio" name="grade" value="premium"> 프리미엄</label>
    </p>
    <p>
        구독 서비스:
        <label><input type="checkbox" name="services" value="news"> 뉴스</label>
        <label><input type="checkbox" name="services" value="sports"> 스포츠</label>
    </p>
    <p>프로필 사진: <input type="file" name="profile_img"></p>
    <p>
        <input type="submit" value="로그인">
        <input type="reset" value="초기화">
    </p>
</form>

Select와 Textarea

<select>는 드롭다운 목록을 만들며, multiple 속성을 추가하면 다중 선택이 가능합니다. <textarea>는 여러 줄의 텍스트를 입력받을 때 사용하며, cols와 rows로 초기 크기를 지정합니다.

<form action="/survey" method="POST">
    <p>
        선호하는 프레임워크:
        <select name="framework">
            <option value="react">React</option>
            <option value="vue">Vue.js</option>
            <option value="angular">Angular</option>
        </select>
    </p>
    <p>
        피드백:
        <textarea name="feedback" cols="40" rows="5" maxlength="500"></textarea>
    </p>
    <input type="submit" value="제출">
</form>

Label 태그 활용

레이블은 입력 필드에 대한 설명을 제공하며, 클릭 시 해당 필드에 포커스를 줍니다. 입력 요소를 감싸거나, for 속성과 입력 요소의 id를 연결하여 사용합니다.

<!-- 감싸는 방식 -->
<label>
    이메일 수신 동의
    <input type="checkbox" name="agree_email">
</label>

<!-- for 속성 연결 방식 -->
<label for="phone-number">연락처:</label>
<input type="tel" id="phone-number" name="phone">

HTTP 요청 방식 (GET vs POST)

GET: 데이터를 URL의 쿼리 스트링(Query String)에 포함하여 전송합니다. (?key=value 형태). 데이터 크기에 제한(약 2KB)이 있으며, 주로 리소스 조회나 중요하지 않은 데이터 전달에 사용됩니다.

POST: 데이터를 HTTP 요청 본문(Body)에 담아 전송합니다. 대용량 데이터나 민감한 정보, 파일 업로드 등에 적합하며 URL에 데이터가 노출되지 않습니다.

폼의 method 속성으로 요청 방식을 결정하며, 기본값은 GET입니다. 파일 업로드가 포함된 POST 요청의 경우 반드시 enctype="multipart/form-data" 속성을 추가해야 바이너리 데이터가 정상적으로 처리됩니다.

<form action="/upload" method="POST" enctype="multipart/form-data">
    <input type="file" name="document">
    <button type="submit">업로드</button>
</form>

태그: HTML HTMLForms DOMElements HTTPMethods WebStandards

7월 5일 21:52에 게시됨

인기 태그

©2026 괴물 클럽