[HTML] HTML의 기초 구성 - 기본 구조 및 내용 입력 태그

HTML, CSS, JavaScript

[HTML] HTML의 기초 구성 - 기본 구조 및 내용 입력 태그

BGK97 2025. 1. 7. 22:19

HTML문서의 기본 구조

HTML문서는 정해진 형식에 맞추어 내용을 입력해야함

1. <!DOCTYPE html>

현재 작성한 문서의 버전을 나타내는 문구
자동입력시 HTML5언어

2. <html>

웹 문서의 시작과 끝을 나타내는 태그
웹 브라우저는 html 태그 내의 소스를 읽어 화면에 표시

3. <head>

웹 브라우저가 웹 문서를 해석하는데 필요한 정보
<title> 태그로 웹 제목(티스토리, Naver, Nexon 등)을 결정
<meta charset="UTF-8"> 과 같이 데이터에 관련한 데이터 표현
<script> 태그로 js 파일 호출

4. <body>

웹 브라우저에 표시할 내용 입력

자주 사용하는 시맨틱 태그

이름만 봐도 의미를 알 수 있는 태그, 유지보수가 쉽게 되도록 함

1. <header>

사이트에서 맨 위쪽 혹은 왼쪽을 담당
검색 창이나 사이트 메뉴 삽입

2. <nav>

웹 문서안에서 다른 위치로 연결하거나, 다른 웹 문서로 연결하는 링크 생성
header, footer등에 포함시키거나 독립해서 사용 가능

3. <main>

핵심 메인 컨텐츠가 담겨있는 부분
문서마다 다르게 보여주는 부분에서 사용
웹 문서에서 단 한번만 사용이 가능

4. <article>

웹에서 실제로 보여주고 싶은 독립적인 컨텐츠를 담는 부분
블로그의 포스트나, 뉴스 기사 등
여러 개의 태그 가능하며, 내부에 section 태그 삽입 가능

5. <section>

컨텐츠 영역을 나타내는 부분
몇 개의 컨텐츠를 묶는 용도로 사용

6. <aside>

사이드 바를 만드는데 주로 사용
필수 요소는 아님

7. <footer>

웹 문서 아래에서 푸터영역을 만드는데 사용
사이트 제작 정보나 저작권 정보 등을 넣음
다른 시맨틱 태그를 사용할 수 있음

8. <div>

가장 일반적으로 사용하는 태그
편리하지만, 많이 사용하면 유지보수성이 떨어짐

내용 입력시 자주 사용되는 태그

1. 제목 태그 <h1> ~ <h6>

다른 글자보다 크고 진하게 표시
제목을 나타낼 때 주로 사용

2. <p> 태그와 <br> 태그

<p> 태그는 텍스트 앞 뒤 빈 줄을 생성하며 텍스트 단락을 생성
<br> 태그는 빈 줄이 생성되긴하나, 실제 단락이 아니기 때문에 CSS 적용시 문제 발생 (때문에 <br>은 권장하지 않는다..)
<p>는 닫는 태그 필요, <br>은 단독 사용

3. <ol>, <li> 태그

순서가 있는 목록을 나열할 때 사용
사이에 <li> 태그를 입력하면 자동으로 숫자를 부여
ol 태그에 type 속성을 통해 시작 언어(1, a, A 등...)를, start 속성을 통해 시작 번호를 정할 수 있음

4. <ul>, <li> 태그

순서가 없는 목록을 나열할 때 사용
점(불릿) 표시로 구분

5. <table> 태그

표의 시작과 끝을 알려주는 태그

6. <tr>, <td>, <th> 태그

테이블의 행을 생성하는데 사용하는 <tr>
행 내부의 셀을 만드는 <td>
제목 행에 셀을 만들 때 사용하는 <th>
행을 병합하는 rowspan 속성, 열을 병합하는 colspan 속성을 통해 셀 병합 가능+

7. <thead>, <tbody>, <tfoot> 태그

표의 구조를 나누어 사용할 때 (예약확인서, 결제확인서 등) 사용
JavaScript를 이용하여 어느 한쪽 부분만 스크롤이 가능하도록 지정 가능

8. <img> 태그

웹 문서에 이미지를 삽입할 때 사용하는 가장 기본적인 태그
이미지 파일의 경로를 지정하는 src 속성이 반드시 필요
잘못된 경로는 alt 속성을 이용해 텍스트로 대신 설명
width, height 속성으로 크기 조절, px 또는 %단위로 설정 가능

9. <object>, <embed> 태그

멀티미디어 파일을 삽입할 때 사용하는 태그
<object>는 data 속성을 통해, <embed>는 src 속성 통해 파일 경로 지정
웹 브라우저에서 <object> 태그를 지원하지 않는 곳이 있을 수도 있음

10. <audio>, <video> 태그

오디오, 비디오 등을 나타낼 때 사용하는 태그
사용되는 속성들은 다음과 같음

종류	설명
controls	플레이어 화면에 컨트롤 바 표시
autoplay	오디오, 비디오 자동 실행
loop	오디오, 비디오 반복 재생
muted	오디오, 비디오 소리 제거
preload	페이지를 불러올 때, 오디오나 비디오를 어떻게 로딩할 것인지 지정, 기본값은 auto
width, height	비디오 플레이어의 너비와 높이 지정 (하나만 지정하면 자동 비율 계산하여 나머지 표시)
poster="파일 이름"	비디오 태그에서 사용하고, 재생 전까지 표시될 이미지 설정(썸네일 같은 것)

11. <a> 태그

링크를 삽입할 때 사용
href 속성을 이용하여 링크 삽입
target="_blank" 속성을 이용하여 링크를 새탭에서 열게 함

이외 가끔가다 사용되는 태그들

1. <blockquote>

인용문을 표시하고자 할 때 사용하는 태그
약간 들여써서 표시

2. <strong>, <b>

텍스트를 강조할 때 사용
<strong> 태그는 화면 낭독기에서 강조하여 읽어준단다.

3. <em>, <i>

텍스트를 기울여 표시할 때 사용
<em> 태그는 특정 부분을 강조하고 싶을 때 사용
<i> 태그는 생각, 관용구 등에 사용

4. <abbr>

줄임말 표시에 사용
전체 문장은 title 속성에 넣음
<abbr title="Front End">FE</abbr>

5. <cite>

출처 내용을 표시할 때 사용
<cite>'기생충'</cite>

6. <code>

컴퓨터 인식을 위한 소스코드
<code>function ...()</code>

7. <small>

부가 정보 등 작게 표시해도 되는 곳에 사용

8. <sup>, <sub>

<sup>는 윗 첨자 표시¹
<sub>는 아랫 첨자 표시₂

9. <s>

취소선 표시에 사용

10. <u>

밑줄 표시에 사용

11. <ins>, <del>

<ins>는 공동 작업 문서 등에서새로 내용 삽입할 때 사용
<del>은 삭제할 때 사용

12. <dl>, <dt>, <dd>

설명 목록을 만드는 데 사용
<dl>내에 한 쌍의 <dt> 이름 태그와 <dd> 값 태그를 넣어 값 표시
<dd> 태그는 여러 개 사용 가능

13. <caption>

테이블의 제목을 정할 때 사용하는 태그

14. <col>, <colgroup> 태그

<caption> 태그 뒤에 사용
변경하고자 하는 열 수 만큼 <col> 태그를 입력하고, style을 지정해주어야한다. 예를들어, 4번째 열을 변경하고 싶다면 앞에 <col> 태그를 세번 넣어주어야 한다. (이래야 네 번째 열로 인식)
혹은, span 속성을 활용해 묶을 수 있음 (span="2")