[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)
따옴표 규칙	큰따옴표 또는 작은따옴표 사용, 반드시 열고 닫기 일치
주의점	따옴표 생략 시 다중 속성 작성 시 오류 가능성 높음