[HTML 시작하기] #02 HTML의 요소 속성(Attribute)
안녕하세요, 토스트 데브입니다!
이전 시간에는 HTML의 요소(Element)와 태그의 구조에 대해 배웠는데요, 이번 시간에는 한 단계 더 나아가 HTML 요소에 작성되는 ‘속성(Attribute)’에 대해 알아보겠습니다.
HTML을 제대로 다루기 위해서는 속성의 정확한 문법과 역할을 이해하는 것이 매우 중요합니다.
HTML 속성(Attribute)이란?
HTML 속성은 태그에 추가적인 정보를 부여할 수 있는 방식입니다.
요소 자체만으로는 부족한 설명이나 기능을 확장하기 위해 사용되죠.
<p class="study">문단 태그의 선언과 종료</p>위 코드에서 class="study"가 바로 속성입니다.
이 속성은 p 태그에 class라는 이름의 추가 정보를 부여한 것입니다.
속성 작성 규칙
HTML 속성을 작성할 때에는 반드시 아래 규칙을 지켜야 합니다:
- 태그 이름 뒤에는 반드시 공백을 둔다.
- 속성 이름 다음에는 등호(=) 를 작성한다.
- 속성 값은 반드시 따옴표("") 또는 작은따옴표('')로 감싼다.
<input type="text" name="test" value="테스트" />
Boolean Attribute (참/거짓 속성)
일부 속성은 값이 없어도 동작합니다. 이러한 속성을 Boolean Attribute(불리언 속성)이라고 합니다.
<input type="text" disabled="disabled" />
<input type="text" disabled />위 두 코드는 동일한 효과를 가지며, disabled 속성은 입력란을 비활성화합니다.
Boolean 속성은 보통 속성 이름 자체가 참/거짓의 의미를 내포하고 있습니다.
따옴표 생략 시의 문제
아래와 같은 코드를 종종 볼 수 있습니다.
<a href=https://naver.com/ title=네이버 바로가기>네이버</a>이 경우, 브라우저는 첫 번째 속성(href)은 문제없이 인식하지만, 두 번째 속성(title)은 공백으로 인해 제대로 해석되지 않을 수 있습니다.
📌 속성 값을 작성할 때는 반드시 따옴표로 감싸는 습관을 들이는 것이 좋습니다.
따옴표 사용법 – 큰따옴표 vs 작은따옴표
HTML에서는 속성 값을 감쌀 때 큰따옴표("") 또는 작은따옴표('') 둘 다 사용할 수 있습니다.
<a href="https://naver.com/">네이버</a>
<a href='https://google.com/'>구글</a>하지만 시작한 따옴표와 종료하는 따옴표는 반드시 일치해야 합니다.
<!-- 잘못된 예 -->
<a href='https://naver.com"/> <!-- 오류 발생 -->또한 속성 값 안에 이미 따옴표가 포함되어 있다면, 바깥쪽 따옴표와 다른 종류의 따옴표를 사용해야 합니다.
<a href="https://naver.com" title="google's Link">구글</a>
정리해볼까요?
| 항목 | 설명 |
| HTML 속성이란? | 태그에 추가 정보를 부여하는 문법 |
| 문법 규칙 | 공백, 등호, 따옴표 사용 |
| Boolean 속성 | 값 없이도 작동 (예: disabled, checked, readonly) |
| 따옴표 규칙 | 큰따옴표 또는 작은따옴표 사용, 반드시 열고 닫기 일치 |
| 주의점 | 따옴표 생략 시 다중 속성 작성 시 오류 가능성 높음 |