[HTML] HTML 태그와 속성 정리

2024. 1. 26. 10:39·Frontend

HTML의 태그는 요소(element)의 종류를 나타내며, 그 용도에 따라 다양하게 존재합니다.

일반적으로 태그를 사용할 때는 다음과 같은 문법을 따릅니다.

<element attribute="value"> content </element>

 

태그 용도
html html 전체
head 헤더
title 페이지 제목. 브라우저 탭에 나타나는 이름
body 본문
div 구역 구분
p 문단 구분

  title: 툴팁 (텍스트에 마우스 대면 나오는 설명)
span 문단 내 영역 구분
a 링크. href 또는 자체 페이지의 앵커로 이동 

  href : 웹 페이지 url
img / 이미지 출력 (닫는 태그 없음)

  src : 이미지 이름 (확장자 포함)
  alt : 대체 이름
  width : 너비
  height : 높이
br / 줄바꿈 (닫는 태그 없음)
hr 가로선 긋기
h1 ~ h6 소제목
ul 순서 없는 글머리
ol 순서 있는 글머리
li 목록 내용. ul 또는 ol 내에서 사용
dl 설명 목록
dt 설명 제목. dl 내에서 사용
dd 설명 내용. dl 내에서 사용
table 표

  border : 테두리 두께 (숫자)
caption 표의 캡션 설명. table 내에서 사용
thead 표의 첫번째 행. table 내에서 하나만 사용
tbody 표의 본문. table 내에서 사용
tfoot 표의 마지막 행. table 내에서 하나만 사용
tr 표의 행(raw). thead / tbody / tfoot 내에서 사용
th 헤더 열(column). 볼드로 표시됨. tr 내에서 사용
td 데이터 열(column). tr 내에서 사용
form 입력 양식. 내부의 입력 받은 데이터를 모아 action 속성에 지정된 url로 제출
input 입력 영역을 지정 (text, password, hidden, radio, checkbox 등)
button 버튼 (submit, reset, button 등)

 

속성(property)은 각 태그가 가지는 고유의 특성입니다.

모든 태그가 공통으로 가지는 속성이 있는 반면 태그의 종류마다 다른 속성을 가질 수도 있습니다.

 

속성 용도
id 요소를 구분하는 식별자
class 요소의 특성
title 요소의 제목 또는 설명
style CSS 문법을 따르는 레이아웃
728x90

'Frontend' 카테고리의 다른 글

[JS] Form element  (0) 2024.02.21
[JS] 자바스크립트로 HTML 객체 만들기  (0) 2024.02.14
DOM Script에 대해서  (0) 2024.02.14
[JS] 알림창 종류 정리  (0) 2024.02.08
[JS] HTML에 JavaScript 코드 삽입하기  (0) 2024.01.26
'Frontend' 카테고리의 다른 글
  • [JS] 자바스크립트로 HTML 객체 만들기
  • DOM Script에 대해서
  • [JS] 알림창 종류 정리
  • [JS] HTML에 JavaScript 코드 삽입하기
Rayi
Rayi
  • Rayi
    아카이브
    Rayi
  • 전체
    오늘
    어제
    • 분류 전체보기 (262)
      • CS (40)
        • ML (3)
        • CV (2)
        • PS (34)
      • Reveiw (17)
        • Paper (17)
        • Github (0)
      • Pytorch (5)
      • Language (58)
        • Python (7)
        • JavaScript (32)
        • TypeScript (16)
        • C++ (3)
      • IDE (12)
      • Git (13)
      • Frontend (71)
        • React (8)
        • SolidJS (20)
        • CSS (12)
      • UI (3)
      • Backend (15)
        • DB (17)
        • Node.js (11)
  • 블로그 메뉴

    • 홈
    • 태그
    • 방명록
  • 링크

  • 공지사항

  • 인기 글

  • 태그

    nodejs
    C++
    ps
    CSS
    vscode
    SOLID
    Git
    react
    mongo
    js
    UI
    python
    CV
    review
    ts
    deploy
    frontend
    CS
    postgresql
    figma
    PyTorch
    GAN
    PRISMA
    Three
    html
    backend
    DB
    ML
    API
    Express
  • 최근 댓글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.5
Rayi
[HTML] HTML 태그와 속성 정리
상단으로

티스토리툴바