HTML 속성(attribute)은 HTML 요소에 추가적인 성질을 정의합니다. 속성은 HTML 요소의 여는 태그 안에 지정하며, 일부 요소는 속성이 없으면 제대로 작동하지 않습니다.
HTML 속성이란 무엇이고, 어떻게 사용해야 할까요? HTML을 배우다 보면 속성(attributes)이라는 용어를 자주 접하게 됩니다. 속성은 HTML 페이지의 특정 요소에 대한 추가 정보를 제공하는 데 사용됩니다.
속성은 HTML 문서의 여는 태그 안에 지정되며, 일반적으로 이름(name)과 값(value)의 쌍으로 작성됩니다. 예를 들어 name이라는 속성에 value라는 값을 지정하려면 다음과 같이 표현합니다: name="value".
이 글에서는 예제를 통해 HTML 속성의 기본 개념과 속성을 사용하는 이유를 살펴보겠습니다. 또한 대부분의 HTML 요소에 적용할 수 있고 코딩 중 가장 자주 마주치게 되는 범용 속성들도 함께 다룹니다.
HTML 속성이란?
HTML 마크업 언어의 모든 요소는 속성을 가질 수 있으며, 속성은 해당 요소가 지니는 추가적인 성질을 정의하는 데 사용됩니다.
예를 들어 이미지의 높이를 지정하거나 폼 요소에 저장된 값을 정의하는 속성을 사용할 수 있습니다. 이러한 속성은 각 요소에 고유하게 적용되므로, 웹 페이지에서 특정 요소가 동작하는 방식을 세부적으로 조정할 수 있습니다.
경우에 따라서는 속성이 필수이기도 합니다. 예를 들어 <a> 태그를 사용할 때는 href 속성을 반드시 정의해야 합니다. 그래야 클릭 시 어떤 URL로 이동할지 태그가 알 수 있기 때문입니다.
HTML 속성은 두 가지 구성 요소로 이루어집니다:
- 이름(name): 생성하려는 속성의 이름을 정의합니다.
- 값(value): 속성이 담고 있는 값을 정의합니다.
Career Karma 홈페이지로 연결되는 링크를 만들고 싶다고 가정해 봅시다. 이를 위해서는 HTML의 <a> 태그를 사용하면 되지만, 링크가 Career Karma 홈페이지로 향하도록 하려면 href 속성도 함께 사용해야 합니다.
다음은 Career Karma 홈페이지로 연결되는 <a> 태그의 예입니다:
<a href="https://careerkarma.com/">Career Karma</a>
이 태그는 href라는 속성을 사용하고, 그 값으로 Career Karma 홈페이지의 URL인 "https://careerkarma.com/"을 지정했습니다.
참고로 HTML 속성은 대소문자를 구분하지 않지만, 일반적으로 소문자로 작성하는 것이 관례입니다.
HTML에서의 작은따옴표와 큰따옴표
속성에 값을 지정할 때는 작은따옴표(' ')와 큰따옴표(" ") 모두 사용할 수 있습니다. 일반적으로 큰따옴표를 사용하는 것이 가장 널리 쓰이는 방식이며(앞선 예제에서도 큰따옴표를 사용했습니다), 어떤 따옴표를 사용할지는 속성 값의 내용에 따라 달라집니다.
예를 들어 값이 John 'Rocketman' Smith인 폼 요소를 만든다고 가정해 봅시다. 이 경우 값 안에 작은따옴표가 포함되어 있으므로, 속성 값은 큰따옴표로 감싸야 합니다. 코드는 다음과 같습니다:
<input type="text" value="John 'Rocketman' Smith">
반대로 값에 큰따옴표가 포함된 John "Rocketman" Smith라면, 속성 값을 작은따옴표로 감싸는 것이 좋습니다. 코드는 다음과 같습니다:
<input type="text" value='John "Rocketman" Smith'>
HTML 불리언(Boolean) 속성 사용법
일부 속성은 이름/값 쌍 구조를 사용하지 않는데, 이를 불리언(boolean) 속성이라고 부릅니다. 불리언 속성은 참(true)/거짓(false) 값만 가질 수 있으며, 태그에 명시되면 true, 명시되지 않으면 false로 설정됩니다.
불리언 속성은 HTML 폼에서 자주 사용됩니다. 사용자에게 이름을 입력받는 폼 필드를 만들면서, 이 필드를 기본적으로 필수 입력 항목으로 만들고 싶다고 가정해 봅시다. 이럴 때 required 불리언 속성을 사용하면 됩니다:
<input type="text" value="Name" required>
이 예제에서는 세 개의 속성을 가진 input 태그를 정의했습니다. 첫 번째와 두 번째 속성인 type과 value는 이름/값 구조를 사용하고, 세 번째 속성인 required는 불리언 속성입니다. required 속성을 명시했기 때문에 그 값은 true로 설정됩니다.
표준 HTML 속성 사용법
HTML에는 모든 요소에 공통으로 적용할 수 있는 몇 가지 속성이 있습니다. 이를 전역 속성(global attributes)이라고 부릅니다.
이러한 속성은 웹 페이지 곳곳에서 자주 등장하므로, 종류와 동작 방식을 잘 알아두는 것이 중요합니다. 지금부터 가장 많이 사용되는 표준 HTML 속성들을 살펴보겠습니다.
HTML id 속성
id 속성은 요소에 고유한 식별자를 부여합니다. id 속성 자체는 HTML 요소의 화면 표시에 영향을 주지 않지만, CSS나 JavaScript로 작업할 때 특정 요소를 선택해 조작할 수 있도록 해줍니다.
요소에 부여하는 id는 하나의 문서 내에서 유일해야 한다는 점에 유의하세요.
다음은 <p> 태그에서 id 속성을 사용한 예입니다:
<p id="secondParagraph">안녕하세요! 제 사이트에 오신 것을 환영합니다.</p>
이 예제에서는 <p> 태그에 secondParagraph라는 값을 가진 id 속성을 지정했습니다.
HTML title 속성
HTML의 title 속성은 주로 요소나 그 내용을 설명하는 데 사용됩니다. title 속성에 저장된 값은 사용자가 마우스 커서를 요소 위에 올렸을 때 나타나는 툴팁(tooltip) 형태로 표시됩니다.
사용자의 이름을 입력받는 input 필드가 있다고 가정해 봅시다. 사용자가 필드 위에 마우스를 올리면 '이 필드는 필수 입력 항목입니다'라는 메시지를 보여주고 싶습니다. 다음 코드로 이를 구현할 수 있습니다:
<input type="text" title="이 필드는 필수 입력 항목입니다">
텍스트 필드 위에 마우스를 올리면 다음과 같은 툴팁이 나타납니다:
HTML style 속성
HTML의 style 속성은 특정 요소에 CSS 스타일을 지정하는 데 사용됩니다. 이렇게 요소에 직접 스타일을 적용하는 방식을 인라인 스타일(inline style)이라고 부릅니다.
회색으로 표시하고 싶은 텍스트 단락을 만든다고 가정해 봅시다. style 속성을 사용해 텍스트 색상을 지정할 수 있습니다. 코드는 다음과 같습니다:
<p style="color: gray;">안녕하세요! 이곳은 제 웹사이트입니다.</p>
위 코드의 실행 결과는 다음과 같습니다:
실행 결과에서 볼 수 있듯이 텍스트 색상이 회색으로 변경되었습니다. style 속성을 지정하고 color 스타일 값을 gray로 설정했기 때문입니다.
요소별 HTML 속성
이 외에도 특정 요소에만 적용되는 다양한 속성들이 있습니다. 대표적인 몇 가지 예를 살펴보겠습니다:
img src
<img src="source.png">
이 예제에서는 src 속성을 지정했습니다. src 속성은 img 태그와 함께 사용되며, 웹 페이지에 렌더링할 이미지 파일의 경로를 가리킵니다.
a href
<a href="https://careerkarma.com/">Career Karma 홈페이지</a>
이 예제에서 href 속성은 링크를 클릭했을 때 사용자를 어느 사이트로 이동시킬지 <a> 태그에 알려주는 역할을 합니다.
img alt
<img src="source.png" alt="책 이미지">
위 코드에서는 alt 속성을 지정했습니다. alt 속성은 img 태그 전용 속성으로, 이미지를 표시할 수 없을 때 웹 페이지에서 대신 처리되는 대체 텍스트(alternative text)를 지정합니다.
HTML의 alt 속성은 스크린 리더(screen reader)가 읽을 수 있으므로, 스크린 리더에 의존하는 시각 장애인 사용자도 웹 페이지의 내용을 충분히 이해할 수 있습니다. 접근성 측면에서도 alt 속성을 반드시 작성하는 습관을 들이는 것이 좋습니다.
HTML 속성 사용법: 결론
속성은 HTML의 특정 요소에 적용되는 추가적인 성질입니다. 속성은 항상 요소의 여는 태그 안에 지정되며, 일반적으로 이름/값 쌍의 형태를 사용합니다.
이 글에서는 예제를 통해 HTML 속성의 기본 개념, 불리언 속성, id·title·style 같은 표준 HTML 속성, 그리고 img src·alt처럼 요소별로 사용되는 속성까지 살펴보았습니다. 이제 HTML에서 속성을 자유롭게 활용할 준비가 되셨기를 바랍니다.