HTML(3) - 속성(Attribute)

2023.03.19 - [WEB/HTML] - HTML(2) - 요소(Element)

HTML(2) - 요소(Element)

이전 글과 이어집니다!

 

HTML을 이용하여 블로그나 Notion같은 프로그램을 쓰다보면, 부분부분 색을 바꾸거나 하이퍼 링크를 넣는 등 다양한 기능들이 포함되어있는 것을 볼 수 있다.

 

이런 기능들을 사용할 수 있는 것이 바로 속성이다!

 

속성

• 속성을 통해 태그의 부가적인 정보를 설정할 수 있음
• 요소는 속성을 가질 수 있으며, 경로나 크기와 같은 추가적인 정보를 제공
• 요소의 시작 태그에 작성하며 보통 이름과 값이 하나의 쌍으로 존재
• 태그와 상관없이 사용 가능한 속성(HTML Global Attribute)들도 있다.

 

HTML Global Attribute?

• 모든 HTML 요소가 공통적으로 사용할 수 있는 대표적인 속성

속성 명	용도
id	문서 전체에서 유일한 고유 식별자 지정, css 등에서 사용
class	공백으로 구분된 해당 요소의 클래스의 목록(CSS, JS에서 요소를 선택하거나 접근)
style	inline 스타일(자세한 내용은 CSS 파트 참고)

 

자주 사용하는 속성

속성 명(사용 태그)	용도	사용 예시
href(<a>)	하이퍼 링크를 생성	href="<링크주소>"
src(<img>)	이미지 삽입	src="<img 링크>"
name(<input>)	아이디와 별도로 이름을 지정하여 변수와 같이 사용	name="<원하는 이름>"

 

<Input> 태그를 예시로 들어보자

• 다양한 타입을 가지는 입력 데이터 유형과 위젯을 제공
• 닫는 태그를 사용하지 않음
• 보통 <label>과 같이 사용하며 <form> 태그 안에 묶여 있음
• <label> 의 for 속성을 통해 label 을 선택해도 입력 창에 커서를 가게 끔 할 수 있음

<!-- 사용예시 -->
<form action="/search" method="GET">
	<label for="agreement">개인정보 수집에 동의합니다.</label>
	<input type="checkbox" name="agreement" id="agreement">
</form>

 

유형

일반
Type	내용
text	일반 텍스트로 입력
password	입력 시 값이 보이지 않고 문자를 특수기호(*)로 표현
email	이메일 형식이 아닌 경우 form 제출 불가
number	min, max, step 속성을 활용하여 숫자 범위 설정 가능
file	accept 속성을 활용하여 파일 타입 지정 가능
submit	제출 용으로 버튼과 같이 사용
항목 중 선택
checkbox	항목으로 선택할 수 있는 input  제공, 다중 선택
radio	항목으로 선택할 수 있는 input  제공, 단일 선택