아카이브

[HTML] HTML 태그와 속성 정리 본문

Frontend

[HTML] HTML 태그와 속성 정리

Rayi 2024. 1. 26. 10:39

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
Comments