본문 바로가기

HTML5 기본 템플릿 코드 <body>

codeConnection 2025. 3. 4.

아래에는 <body> 태그 내에 작성하는 태그들에 대해서 설명하겠다.

 

기본 구조 관련 태그

  • <header> : 페이지 또는 섹션의 머릿말 (로고, 내비게이션 등)
  • <nav> : 내비게이션(메뉴) 영역
  • <main> : 페이지의 메인 컨텐츠
  • <section> : 논리적으로 그룹화된 콘텐츠 블록
  • <article> : 독립적인 컨텐츠 (뉴스, 기사, 블로그 글 등)
  • <aside> : 보조 정보 (광고, 사이드바 등)
  • <footer> : 페이지 또는 섹션의 바닥글 (저작권, 연락처 등)
    • 위 까지는 시멘틱 태그(Sementic Tag)라고 말한다.
    • 시멘틱 태그란 별다른 기능을 하는 것은 아니지만 "이 안에는 이런 내용이 있다"라는 것을 검색 엔진 봇에게 알려주는 것으로, html 문서를 봇이 더 쉽게 파악할 수 있게 도와주는 기능을 한다.
    • 비슷한 태그로 <div>가 있는데, 구획을 나누는 태그로 기능을 하진 않지만 코드 내에서 영역을 구분 짓는 역할을 한다. 다만 하나의 웹 페이지에 보통 여러 개의 구획이 있다 보니 <div>를 수십, 수백 개를 남발하는 경우가 많고 이러면 오히려 가독성을 해치다 보니, 최대한 위의 시멘틱 태그로 구분해준 뒤에 그 내부에서 <div>로 나눠주는 것이 좋다.
  • <div> : 특정 요소를 그룹화하는 컨테이너 

텍스트 및 서식 관련 태그

  • <h1> ~ <h6> : heading 태그. 제목 태그. 1~6까지 계층을 나타냄.
  • <p> : paragraph 태그. 문단 태그. <div>와 비슷해 보이지만, 차이가 있음.
    • <div>
      • 이 내부에 있는 태그의 역할, 의미와 상관 없이 레이아웃을 그룹화 하는 역할만 하는 블록 컨테이너.
      • <div> 태그 내부에는 다른 모든 태그를 사용할 수 있음.
    • <p>
      • 글, 즉 텍스트의 문단을 나누는 역할.
      • <p> 태그는 레이아웃을 나누기 위한 태그가 아니므로, 이 안에는 <a>, <span>, <strong> 태그와 같이 글자의 서식과 관련한 태그만 사용 가능.
      • 예를 들어 <p> 이렇게 사용하면 <div> 에러가 발생함 </div> </p>
  • <span> : 인라인 텍스트 컨테이너. <p> 태그와 같이 구획을 나누는 것은 맞지만 문단을 바꾸는 것이 아니라 한 줄로 된 텍스트에서 구분만 하는 기능을 한다.
    • 예를 들어 이렇게 작성하다 <span> 이렇게 구분하여 </span> span 태그 내의 글자만 묶어서 컬러 등 다른 속성이나 스크립트를 적용시킬 수 있다.
  • <strong> : 굵은 텍스트.
  • <em> : 기울인 텍스트.
  • <br> : 줄바꿈
  • <hr> : 가로줄, 구분선
  • <blockquote> : 인용문
  • <pre> : 공백과 줄바꿈이 유지되는 텍스트

 

리스트 관련

  • <ul> : unordered list, 순서가 없는 리스트. 구분점
  • <ol> : ordered list, 순서가 있는 리스트. 숫자, 로마자
  • <li> : 리스트 항목. <ul> 이나 <ol> 등으로 감싸고 그 안에 이 태그를 쓰면 ul이나 ol에 맞게 글머리 기호가 들어간다.
  • <dl> : definition list, 설명 리스트
  • <dt> : definition term, 설명 리스트의 제목
  • <dd> : definition definition, 설명 리스트의 내용
<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language의 약자로, 웹페이지의 구조를 정의하는 언어입니다.</dd>

  <dt>CSS</dt>
  <dd>웹페이지의 스타일을 지정하는 언어입니다.</dd>

  <dt>JavaScript</dt>
  <dd>웹페이지에 동적인 기능을 추가하는 프로그래밍 언어입니다.</dd>
</dl>

<dl>, <dd>, <dt> 출력 결과

definition 관련 태그는 <ol>, <ul> 처럼 글머리기호를 추가하지 않기 때문에 별도로 CSS를 정의하여 사용하는 것이 일반적이다.

 

위 태그에 아래처럼 CSS를 적용하면, 그 아래와 같은 결과가 출력된다.

 

dl {
  width: 300px;
  padding: 10px;
  border: 1px solid #ddd;
  background-color: #f9f9f9;
}

dt {
  font-weight: bold;
  color: #333;
  margin-top: 10px;
}

dd {
  margin-left: 20px;
  color: #666;
}

CSS 적용 결과

QnA, 제품-설명 등 여러가지로 응용할 수 있을 것 같다.

 

링크 및 미디어 관련 태그

  • <a> : anchor 태그, 하이퍼링크 태그. 주요 속성은 아래와 같음.
    • href : 이동할 url 또는 파일 경로 / <a href="https://example.com">링크</a>
    • target : 이동할 방법 / _self(기본값, 현재 페이지에서 열기), _black(새 탭에서 열기)
    • rel : 링크와 현재 문서와의 관계 / nofllow 등...
    • download : 클릭 시 파일 다운로드 / <a href="file.pdf">다운로드</a>
    • title : 링크에 마우스를 올리면 보이는 설명 / <a href="https://example.com" title="개발자의 샘플 페이지입니다.">클릭</a>
  • <img> : image 태그.
    • src : 이미지의 경로. / <img src="image.png"/>
    • alt : 이미지가 로드되지 않을 경우의 대체 텍스트 / <img src="icon.png" alt="회사 로고 이미지"/>
    • width : 이미지 너비 지정 / <img src="icon.png" width="200"/>
    • height : 이미지 높이 지정 / <img src="icon.png" height="400"/>
    • loading : 이미지 로딩 방식 / lazy 스크롤 시 로드, eagar 즉시 로드
<img src="photo.jpg" alt="산의 풍경" width="400" height="300" loading="lazy">

 

아래  태그는 분명 필요한 순간이 있겠지만 그 때가 오면 찾아보도록 하고, 요즘은 youtube 등의 플랫폼을 이용하는 경우가 많아 본인은 사용한 적이 없었으니 이번 포스트에서는 생략하겠다.

  • <video> : 비디오 삽입 태그.
  • <audio> : 오디오 삽입 태그.
  • <source> : 비디오, 오디오 소스 정의

 

  • <iframe> : 외부 컨텐츠 삽입 (구글맵, 유튜브 등)
    • 웹 페이지 내에 웹 페이지를 포함시킬 때 사용하는 태그.
    • 그런데 일반적으로 유튜브, 구글맵 등의 서비스를 이용할 때 사용하고 진짜로 웹 페이지를 삽입하려는 경우에는 보통 해당 사이트에서 막아놨기 때문에 위 경우 아니고서는 쓸 일이 거의 없다.
    • 유튜브 등에서 태그를 통째로 제공하니 속성은 생략하겠다.

 

테이블 관련 태그

  • <table> : 테이블 생성. 가장 크게 감싼다.
  • <tr> : 테이블 행(row)
  • <td> : 테이블 데이터 셀
  • <th> : 테이블 헤더 셀(굵게)
  • <thead> : 테이블 머리글 그룹화
  • <tbody> : 테이블 본문 그룹화
  • <tfoot> : 테이블 바닥글 그룹화
  • <colgroup> : 열 그룹 지정
  • <col> : 특정 열 스타일 지정

테이블 관련 태그는 다소 복잡하게 느껴진다.

그리고 테이블은 엑셀 스프레드 시트  스타일의 데이터를 다뤄야 할 때는 여전히 사용되지만,

간단하게 데이터를 정리할 때는 모던 웹 페이지에서는 잘 사용되지 않는다. 테이블은 반응형으로 제작하기 어렵기 때문이다.

필수적인 태그만 익혀두고 나머지는 필요할 때 찾아보는 게 좋겠다.

 

아래는 같은 데이터지만, 테이블 형태와 <div>와 CSS 만으로 반응형 형태의 테이블을 제작한 예시이다. 둘 다 같은 결과를 보인다.

차라리 <table> 태그를 익힐 시간에 CSS의 flex 또는 grid를 공부하는 것이 더 효율적이다.

<table>
  <thead>
    <tr>
      <th>이름</th>
      <th>나이</th>
      <th>직업</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>홍길동</td>
      <td>25</td>
      <td>개발자</td>
    </tr>
  </tbody>
</table>
 <div class="table">
    <div class="header">이름</div>
    <div class="header">나이</div>
    <div class="header">직업</div>

    <div class="row">
      <div data-label="이름">홍길동</div>
      <div data-label="이름">김철수</div> 
    </div>

    <div class="row">
      <div data-label="나이">25</div>
      <div data-label="나이">30</div>
    </div>
   
   <div class="row">
     <div data-label="직업">디자이너</div>
     <div data-label="직업">개발자</div>
   </div>
  </div>
.table {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
      width: 100%;
      max-width: 600px;
      margin: auto;
      text-align: center;
      border: 1px solid #ddd;
    }
    .table div {
      padding: 10px;
      border-bottom: 1px solid #ddd;
    }
    .header {
      font-weight: bold;
      background: #f4f4f4;
    }

    /* 모바일에서는 한 줄씩 표시 */
    @media (max-width: 600px) {
      .table {
        display: flex;
        flex-direction: column;
      }
      .row {
        display: flex;
        flex-direction: column;
        border-bottom: 1px solid #ddd;
        padding: 8px;
      }
      .row div {
        padding: 5px 0;
      }
      .header {
        display: none; /* 모바일에서는 헤더 숨기고 개별 라벨 추가 */
      }
      .row div::before {
        content: attr(data-label);
        font-weight: bold;
        display: block;
        color: #666;
      }
    }

 

폼 관련 태그

  • <form> : 사용자 입력 폼
  • <input> : 속성에 따라 다양한 입력 필드
  • <label> : 입력 필드의 라벨
  • <textarea> : 여러 줄을 입력할 수 있는 입력 필드
  • <select> : 드롭다운 목록
  • <option> : 드롭다운 목록 항목
  • <button> : 버튼 생성
  • <fieldset> : 폼 요소 그룹화
  • <legend> : <fieldset> 의 제목

form 태그 주요 속성

form 관련 태그들도 속성들이 많다. 사용자에게 데이터를 입력 받아 서버로 전송하는 역할을 하기 때문에 복잡한 편이다. 하나씩 짚어보겠다.

  • name
    • 적용 대상 : <input>, <textarea>, <select>
    • 의미 : 서버로 전송될 데이터의 이름
    • 예시 : <input type="text" name="username">
  • value
    • 적용 대상 : <input>, <option>
    • 의미 : 입력 필드의 기본 값
    • 예시 : <input type="text" value="기본값">
  • placeholder
    • 적용 대상 : <input>, <textarea>
    • 의미 : 입력 필드의 힌트
    • 예시 : <input type="text" value="이름을 입력하세요">
  • required
    • 적용 대상 : <input>, <textarea>
    • 의미 : 필수 입력 필드 설정
    • 예시 : <input type="email" required>
  • disabled
    • 적용 대상 : <input>, <textarea>, <select>
    • 의미 : 입력 필드 비활성화
    • 예시 : <input type="text" disabled>
  • readonly
    • 적용 대상 : <input>, <textarea>
    • 의미 : 읽기 전용 (값 수정 불가)
    • 예시 : <input type="text" readonly>
  • maxlength
    • 적용 대상 : <input>, <textarea>
    • 의미 : 최대 입력 글자 수 제한

 

인터렉티브 요소

  • <details> : 확장/축소 가능한 컨텐츠
  • <summary> : <details>의 요약 (제목)
  • <dialog> : 모달(dialog) 창
  • <progress> : 진행 상태 표시 (프로그레스 바)
  • <meter> : 측정 값 표시 (게이지)

 

스크립트 및 스타일 관련 태그

  • <script> : JavaScript 코드를 포함하는 태그
  • <noscript> : 스크립트 미지원 시 대체 컨텐츠
  • <style> : CSS 스타일 정의
저작자표시 비영리 변경금지

'Programing > HTML' 카테고리의 다른 글

HTML5 기본 템플릿 코드 <head>  (0) 2025.02.06
모던 HTML의 이해  (0) 2025.01.20
HTML이란?  (0) 2025.01.15
버튼에 새로고침 기능 넣기  (0) 2024.02.29
여러 개의 div 한 열로 정렬하기  (1) 2024.02.28

관련글

댓글

티스토리툴바