[HTML] HTML 태그 종류

YUZAMONG·2025년 3월 10일
htmltagweb

Web

목록 보기
4/4

HTML 태그 종류

🔗 참고하면 좋은 글 | 웹 개발과 HTML

공통 속성

id
특정 하나의 요소를 식별하기 위해 사용되는 고유한 속성이다.
css에서는 #id, JS에서는 document.detElementById("id")로 접근할 수 있다.

class
같은 스타일을 여러 요소에 쉽게 적용할 때 사용한다.
여러 요소에 동일한 클래스명을 적용할 수 있고, 한 요소에 여러 클래스명을 적용할 수 있다.
css에서 .class, JS에서는 document.getElementsByClassName("class") 또는 document.querySelectorAll(".class")로 접근할 수 있다.

제목

h1~h6(heading)
숫자가 커질수록 글자는 작아지고, 숫자 순서를 섞어서 사용하지 않는다.
검색 엔진 최적화(SEO)에서 중요한 요소이므로, 의미에 맞게 사용하는 것이 좋다.

h1 태그는 페이지에서 가장 중요한 제목을 나타내기 때문에 주로 회사 로고에 사용되며, html 파일에 한 개만 사용하는 것이 권장된다.

목록

일반적으로 목록은 시맨틱 태그인 nav 태그로 감싸서 사용하지만 모든 목록이 nav 안에서 사용되는 것은 아니다.

ul(unordered list)
순서가 정해져있지 않은 목록으로, 데이터가 불릿으로 표시된다. 대부분의 메뉴에 ul이 사용된다.

ol(ordered list)
순서가 정해져있는 목록으로, 데이터에 숫자가 붙어서 표시된다.

li(list item)
리스트의 하위에서 하나의 데이터를 표현하는 태그로, 목록의 자식으로는 li 태그만 사용 가능하다.
인라인 태그뿐만 아니라 블록 태그도 감쌀 수 있기 때문에 리스트를 다시 감쌀 수 있다.
리스트를 다시 감싸는 방법으로 목록의 하위 목록을 만들어 계층 구조를 형성할 수 있다. 이때 너무 깊어지면 가독성이 떨어지고 유지보수가 어렵기 때문에 3depth까지 권장한다.

페이지 이동

a(anchor)
내용으로 글자 또는 이미지를 넣을 수 있다.
페이지를 새로고침하면서 이동하며, 주로 외부로 이동할 때 사용된다.
*SPA에서는 자바스크립트로 페이지 전환을 처리하기 때문에 잘 사용되지 않고, button + Javascript 조작으로 이동한다.

  • href(hyper reference): 이동할 경로 설정
    • 해시(#) 사용 시 id랑 연결하면 해당 id로 이동함

🔗 SPA(Single Page Application)란?

단락

p(paragraph)
내용으로 택스트 레벨 태그 중에서도 인라인 요소만 포함할 수 있다.

스타일

css 스타일을 적용하는 방법이다.

style
같은 html 파일 내에서 내부 스타일 시트를 통해 직접 스타일을 정의할 수 있다.
유지보수성이 떨어지므로 권장되지 않는다.

link
외부 스타일 시트를 활용하는 방법으로, 유지보수에 유리하여 일반적으로 사용되는 방법이다.

  • href(hyper reference): css 파일 연결

자바스크립트

script
내용으로 스크립트를 바로 작성하여 사용할 수 있다.

  • src(source): 외부 스크립트 연결

글자 모양

글자를 꾸미는 태그로, css로 하기 때문에 잘 사용되지 않는다.

b(bold)
글자를 단순히 굵게 표시하는 시각적 효과를 줄 수 있다.

strong
강조의 의미를 가져서 음성으로 안내 시 강한 억양으로 읽힌다.

테이블

thead(table header)
테이블의 제목 행을 감싸는 영역이다. th 태그와 함께 사용된다.

tbody
테이블의 실제 데이터가 들어가는 본문 영역이다. 여러 개의 tr로 구성된다.

tfoot(table footer)
테이블의 마지막 부분을 감싸는 영역이다. 합계, 요약 정보 등을 표시할 때 사용된다.

tr(table row)
하나의 가로 행을 의미한다. th 또는 td와 함께 사용한다.

th(table head)
제목을 나타내는 셀로, 기본적으로 굵은 글씨에 가운데 정렬이 된다.
thead 안에서 사용하거나 tbody 내에서도 사용할 수 있다.

td(table data)
일반 데이터를 담는 셀로, 기본적으로 왼쪽 정렬이 된다.
tr 내에서 사용되며, 표의 본문 데이터를 구성한다.

  • rowspan="병합할 행 개수": 행 병합
  • colspan="병합할 열 개수": 열 병합

이미지

img
인라인 요소로, 옆으로 나열된다.

  • src: 이미지의 경로 설정
    • 인터넷 상 이미지 주소나 로컬 이미지 위치, api 등 사용 가능
  • alt: 이미지를 가져올 수 없을 때 표시되는 글자 지정

랜덤 이미지 생성 사이트

오디오, 비디오

audio, video

  • src: 오디오나 비디오의 경로 설정
  • controls: 재생 바를 생성하는 속성으로, 모양은 웹 브라우저에 맞게 생성됨
  • preload: 준비 중일 때 모두 불러올지 여부를 선택 가능
  • autoplay: 자동 재생 설정
    • 브라우저의 기본값이 mute라서 js로 처리해야 함
    • 비디오일 때 화면만 자동 재생은 가능함
  • loop: 반복 재생 여부를 선택하는 속성
  • poster: 비디오 준비 중일 때 노출할 이미지 지정
  • width, height: 비디오의 너비와 높이 설정
    • 영상 비율은 16:9로 설정해야 잘리거나 검은 부분이 생기지 않음

source
크로스 브라우저를 위한 태그이다. 이 태그를 사용할 때는 audio나 video 태그가 아니라 source 태그에서 src 속성을 사용한다.

  • type="video/mp4": 비디오인지 오디오인지와 어떤 형식인지를 속성값으로 넣음

입력 양식

사용자에게 정보를 입력 받는 요소이다.

  • id: 거의 필수적으로 사용되며, 중복되지 않아야 함
  • value: 실제로 서버에 넘어갈 값
  • hidden: 내용 숨김
  • disabled: 비활성화

form
다른 입력 태그를 감싸는 블럭 요소로, 서버에 데이터를 전송할 때 사용된다.

  • method: 데이터 전달 방식을 선택하며, 선택하지 않을 경우 기본값은 GET
    • GET: 쿼리에 데이터를 입력해서 전달하는 방식
    • POST: 리퀘스트 바디에 데이터를 전달하는 방식
  • action: 데이터를 전달할 위치

input

  • name: 서버 전송 시 식별하는 이름 속성
  • placeholder: 값 입력 전까지 노출할 텍스트
  • type: input의 종류를 선택하는 속성
    • text: 문자열 입력 박스
    • password: 비밀번호 입력 박스, 암호화 됨
    • button: 버튼
    • checkbox: 중복 선택 가능, 네모 선택 박스
    • radio: 중복되는 name 중 하나만 선택 가능, 둥근 선택 칸
    • file: 파일 업로드 박스
    • image: 이미지 업로드 박스
    • submit: 제출(서버로 전송) 버튼
    • reset: 초기화 버튼

label
input을 설명하기 위한 태그로, input을 감싸는 암시적인 형태나 for 속성으로 input의 id를 연결하는 명시적인 형태가 있다.
for 속성으로 연결할 때, input의 앞에 위치하면 설명도 앞에 적히며, 뒤에 위치하면 설명도 뒤에 적힌다.

textarea
많은 양의 글을 작성할 때 사용하는 태그로, 배송 메모나 주문 요청 사항 등에 사용된다.
우측 하단 버튼으로 리사이징 가능하며, 영역 내의 공백도 반영된다.

  • maxlength: 최대 글자 수 제한

select
드롭다운 메뉴를 만드는 태그이다. 디자인 변경이 용이하지 않기 때문에 잘 사용되지 않는다.

  • multiple: 다중 선택 가능(ctrl+선택), bool 속성

option
select의 자식으로, 드롭다운 메뉴의 옵션이 된다.

optgroup
드롭다운 안에서 옵션들을 그룹화 하는 태그이다. option 값들이 그룹명 하위로 들어가고 들여쓰기 된다.

  • label: 그룹 이름 설정

fieldset
입력 양식의 이름을 지정하는 태그로, form 하위에서 다른 입력 태그들을 감싼다.

legend
입력 양식 그룹의 이름을 지정한다.

공간 분할

div
블록으로 공간을 분할하는 태그로, 주로 영역 분리에 사용된다.

span
인라인으로 공간을 분할하는 태그로, 주로 글자 분리에 사용된다.

display 형식

  1. block
    브라우저의 한 행을 전부 차지하며, 자동으로 줄바꿈이 발생한다.
    width, height, margin, padding 등 스타일을 자유롭게 조절할 수 있다.
    ex) div, p, h1~h6, ul, li, section

  2. inline
    내용 크기 만큼의 영역을 차지하며, 한 줄을 다 차지하지 않는다. 인접한 요소와 같은 줄에 배치된다.
    width과 height를 적용할 수 없고, margin과 padding 중에 top과 bottom을 적용할 수 없다.
    ex) span, a, b, strong, em

  3. inline-block
    inline 요소처럼 한 줄에 배치되지만, 블록 요소처럼 width나 height를 설정할 수 있다.
    margin과 padding도 상하좌우 모두 적용이 가능하다.
    ex) img, button, input

  4. flex
    요소들을 한 줄 또는 여러 줄로 정렬하는 레이아웃 시스템이다.
    부모 요소에 display: flex를 적용하면 자식 요소들이 자동으로 정렬된다.
    justify-content, align-items 등의 정렬 속성을 사용할 수 있다.

  5. grid
    요소들을 행과 열로 정렬하는 2차원 레이아웃 시스템이다.
    부모 요소에 display: grid를 설정하면 자식 요소들이 행과 열에 맞춰 배치된다.
    grid-template-columns, grid-template-rows 등의 정렬 속성을 사용할 수 있다.

시맨틱(Semantic)

태그에 의미를 부여하는 태그로, div로 구분해도 되지만 웹 표준에 따라 시맨틱 사용을 권장한다.

  1. header: 상단에 고정
  2. nav: 메뉴의 집합을 감싸는 용도
  3. aside: 본문 흐름에서 벗어나는 용도
  4. section: 하나의 컨텐츠가 구분되어지는 단위
  5. article: 독립적인 콘텐츠 범위를 의미, 단독으로 배포해도 의미가 유지되는 콘텐츠
  6. footer: 하단의 내용을 감싸는 용도
profile
YUZAMONG
유자맛 찹쌀유과
이전 포스트

[HTML] 웹 개발과 HTML

0개의 댓글