[HTML] HTML 태그 정리(div, span, img, input, a)

html 태그 기본 구조

1. div 태그

<div></div>

div 태그는 특별한 기능 없이, 여러 소스를 묶을 때 사용합니다.

주로 레이아웃을 나누는데 쓰입니다.

 

2. span 태그

<span></span>

span 태그도 div 태그와 마찬가지로 특별한 기능을 갖지 않습니다.

 

- <div>와 <span>의 차이점

div 태그와 span 태그는 display 속성이 다릅니다.

div 태그는 dispaly: block 으로 줄바꿈이 가능하고,

span 태그는 display: inline으로 줄바꿈이 되지 않습니다.

따라서, 내용을 한 줄로 쓰려면 span 태그를 사용하고, 두 줄 이상 넣으려면 div 태그를 사용합니다.

 

3. img 태그

<img src="이미지 파일 경로" alt="대체용 텍스트">

 

태그	의미
<img>	이미지 삽입
	src=	이미지 파일 경로
	alt=	대체용 텍스트
	width= height=	가로, 세로 크기 조절
		%	브라우저 창의 크기 단위
		px	픽셀 단위

 

4. input 태그

<input type="text" id="name" name="name" required
	minlength="4" maxlength="8" size="10">

type 속성 값들

태그	속성	의미
type=	text	한 줄 텍스트
	password	비밀번호
	search	검색
	url	url
	email	이메일 주소
	tel	전화번호
	checkbox	체크박스 (중복 체크)
	radio	라디오 버튼 (unique 체크)
	number	숫자 스핀 박스(버튼으로 숫자 조절)

	range	숫자 슬라이드 막대
	date	local - 연, 월, 일
	month	local - 연, 월
	week	local - 연, 주
	time	local - 시, 분, 초, 분할 초
	datetime	UTC - 연, 월, 일, 시, 분, 초, 분할 초
	datetime-local	local - 연, 월, 일, 시, 분, 초, 분할 초
	submit	전송 버튼
	reset	리셋 버튼
	image	submit 버튼 이미지

	button	일반 버튼
	file	파일 첨부 버튼
	hidden	사용자에게 보이지 않는 값 필드

- text, password와 같이 쓰이는 속성들

속성	의미
size=	화면에 출력할 글자 수
value=	text 필드에 보여줄 내용, password에서 사용 안함
maxlength=	최대 입력 가능한 글자 수

- checkbox, radio와 같이 쓰이는 속성들

속성	의미
value=	서버에 전달될 값
checked=	기본으로 선택하고 싶은 항목
name=	radio 전용, 여러 옵션의 공통 이름

- number, range와 같이 쓰이는 속성들

속성	의미
min=	최소값(기본값 0)
max=	최대값(기본값 100)
step=	조정할 단위값(기본값 1)
value=	초기값

- submit, reset과 같이 쓰이는 속성들

속성	의미
value=	버튼에 표시할 내용

- button과 같이 쓰이는 속성들

속성	의미
value=	버튼에 표시할 내용
onclick=	클릭 시 실행할 JS 함수

 

 

5. a 태그

<a href ="링크할 주소">텍스트 또는 이미지</a>

 

태그	의미
<a>	하이퍼링크 삽입
	href=	링크 주소
	target="_blank"	새 탭에서 열기