Attribute (속성)
Attribute(속성)는 HTML Element에 붙는 추가 정보입니다. 택배 상자의 송장처럼, 이름표(id), 분류표(class), 목적지(href) 등을 통해 각 Element를 식별하고 동작을 결정합니다.
🤔 혹시 이런 경험 있으신가요?
- "GTM에서 클릭 트리거를 설정하려는데, Click Classes, Click ID가 뭔지 모르겠다."
- "개발자가 'class명이 뭔가요?'라고 물어보는데, 무슨 말인지 감이 안 온다."
- "웹사이트 소스를 보면
id,class,href같은 게 잔뜩 붙어 있는데, 각각 무슨 역할인지 궁금하다."
이전 글에서 Element(요소)가 웹페이지를 이루는 부품이라고 배웠습니다. 그런데 같은 종류의 부품이 한 페이지에 수십 개씩 있다면, 어떻게 서로 구별할 수 있을까요?
바로 Attribute(속성) 덕분입니다. Attribute는 각 Element에 붙는 이름표이자 설명서입니다.
🔑 Attribute, 한마디로 뭘까요?
Attribute(속성)는 HTML Element에 추가 정보를 부여하는 이름=값 쌍입니다.
HTML 코드에서 여는 태그 안에 이름="값" 형태로 작성됩니다. 예를 들어 아래 코드를 보겠습니다.
<button id="purchase-btn" class="primary large">구매하기</button>여기서 id="purchase-btn"과 class="primary large"가 모두 Attribute입니다. <button>이라는 Element에 "너의 고유 이름은 purchase-btn이고, 스타일은 primary와 large를 적용해"라는 추가 정보를 붙인 것이죠.
🏷️ 첫 번째 비유: 택배 상자의 송장
이전 글에서 Element를 택배 상자에 비유했습니다. Attribute는 그 상자에 붙어 있는 송장 스티커입니다.
같은 크기의 갈색 박스가 100개 있다고 생각해 보세요. 겉모습만으로는 어떤 상자에 뭐가 들었는지 알 수 없습니다. 하지만 송장을 보면 모든 것을 파악할 수 있습니다.
| 송장 항목 | HTML Attribute | 예시 |
|---|---|---|
| 운송장 번호 | id | id="order-12345" |
| 상품 분류 | class | class="fragile express" |
| 배송지 주소 | href | href="https://example.com" |
| 내용물 사진 | src | src="/images/product.jpg" |
| 취급 주의 메모 | alt, title | alt="유리 제품 주의" |
택배 기사가 송장만 보고 상자를 정확히 분류하듯, JavaScript나 CSS도 Attribute를 보고 정확한 Element를 찾아 스타일을 입히거나 동작을 실행합니다.
🪪 두 번째 비유: 사람의 신분증
Attribute를 사람에게 비유하면 더 직관적입니다.
회사에 "김민수"라는 이름의 직원이 3명 있다고 합시다. 이름(태그)만으로는 누구를 말하는지 알 수 없습니다. 하지만 추가 정보가 붙으면 구분이 가능합니다.
- 사번(id): 유일한 식별 번호.
id="EMP-0042"→ 딱 한 명만 가리킵니다. - 소속 부서(class): 여러 명이 같은 부서일 수 있습니다.
class="마케팅팀 시니어"→ 마케팅팀 시니어 전원을 한 번에 묶을 수 있습니다. - 이메일(href): 연락할 수 있는 주소.
href="mailto:minsu@company.com"→ 어디로 연결되는지 알려줍니다.
이것이 Attribute의 핵심입니다. 같은 종류의 Element라도 Attribute가 달라지면 완전히 다른 역할을 하게 됩니다.
⚙️ 자주 만나는 Attribute 6가지
-
⚙️ 6가지 Attribute (속성) 활용법을 보여주는 그림: 각 속성이 HTML 요소에 어떻게 적용되는지, 시각화된 설명.
-
⚙️ 자주 사용되는 6가지 속성을 설명하는 일러스트: HTML 태그에 적용되어 웹 페이지를 구성하는 속성들 시각화.
- ⚙️ Attribute 6가지 개념 이해를 돕는 일러스트: HTML 속성들의 역할과 사용법을 시각적으로 표현한 그림.](https://avqz4vnz10fk0ilw.public.blob.vercel-storage.com/illustrations/what-is-attribute-1-1770793732528.png)
웹에는 수십 가지 Attribute가 있지만, 마케터가 실무에서 특히 자주 마주치는 것은 아래 6가지입니다.
1. id — 유일한 이름표
페이지 전체에서 단 하나만 존재하는 고유 식별자입니다. 주민등록번호처럼 중복이 없어야 합니다.
<div id="hero-section">메인 배너 영역</div>GTM에서 특정 버튼 하나만 추적하고 싶을 때, id로 정확히 지목할 수 있습니다.
2. class — 분류 태그
여러 Element에 같은 이름을 공유할 수 있는 분류표입니다. 하나의 Element에 여러 class를 띄어쓰기로 붙일 수도 있습니다.
<button class="btn primary large">시작하기</button>
<button class="btn secondary">취소</button>위 두 버튼은 모두 btn class를 공유하지만, 하나는 primary large, 다른 하나는 secondary입니다. CSS는 이 class를 보고 각각 다른 색상과 크기를 입힙니다.
3. href — 목적지 주소
링크(<a>) Element가 어디로 연결되는지 알려주는 Attribute입니다.
<a href="https://example.com/pricing">요금제 보기</a>GA에서 외부 링크 클릭을 추적할 때, href 값을 기준으로 필터링하는 경우가 많습니다.
4. src — 파일 경로
이미지(<img>), 스크립트(<script>) 등이 불러올 파일의 위치를 지정합니다.
<img src="/images/banner.jpg" alt="신년 프로모션 배너">5. alt — 대체 텍스트
이미지가 로드되지 않을 때 보여줄 설명 텍스트입니다. 검색 엔진이 이미지 내용을 파악하는 데도 사용하므로 SEO에 중요합니다.
<img src="/images/chart.png" alt="2024년 분기별 매출 성장 추이 그래프">6. data-* — 사용자 정의 속성
개발자가 자유롭게 만드는 커스텀 Attribute입니다. data- 뒤에 원하는 이름을 붙여 사용합니다.
<button data-event="signup" data-location="header">무료 체험</button>GTM에서 data-event, data-location 같은 커스텀 속성을 읽어 이벤트 추적에 활용하는 경우가 매우 많습니다. 개발자에게 "이 버튼에 data-event 속성을 추가해 주세요"라고 요청하면, 복잡한 CSS Selector 없이도 깔끔하게 추적할 수 있습니다.
💡 이걸 알면 마케터에게 뭐가 좋을까요?
1. GTM 트리거 설정이 자유로워집니다
GTM에서 클릭 이벤트를 설정하면 Click ID, Click Classes, Click URL 같은 변수가 자동으로 잡힙니다. 이것들이 전부 클릭된 Element의 Attribute 값입니다.
Click ID= 클릭된 Element의idAttributeClick Classes= 클릭된 Element의classAttributeClick URL= 클릭된<a>Element의hrefAttribute
Attribute를 이해하면 "CTA 버튼 클릭만 추적"하는 트리거를 직접 만들 수 있습니다. 예를 들어, Click Classes에 cta-button이 포함된 경우에만 이벤트를 발생시키는 식이죠.
2. CSS Selector를 읽을 수 있게 됩니다
GA나 히트맵 도구에서 "이 Element를 추적합니다"라는 메시지와 함께 #hero-section .cta-button 같은 코드를 보여줄 때가 있습니다.
#hero-section=id가 "hero-section"인 Element.cta-button=class가 "cta-button"인 Element
이 표기법을 이해하면, 어떤 Element가 추적되고 있는지 바로 파악할 수 있습니다.
3. 개발자와 소통이 정확해집니다
"그 버튼에 추적 코드 좀 넣어주세요" 대신 "CTA 버튼에 data-event="signup" Attribute를 추가해 주세요"라고 요청하면, 개발자가 정확히 무엇을 해야 하는지 즉시 이해합니다. 커뮤니케이션 비용이 크게 줄어듭니다.
📋 30초 요약
- Attribute(속성) 는 Element에 붙는 추가 정보로,
이름="값"형태입니다. 택배 송장처럼 각 Element를 식별하고 동작을 결정합니다. - 가장 많이 쓰이는 Attribute는 id(고유 이름), class(분류), href(링크 주소), src(파일 경로), alt(대체 텍스트), data-*(커스텀) 입니다.
- GTM의 Click ID, Click Classes, Click URL은 모두 클릭된 Element의 Attribute 값입니다. 이 연결 고리를 이해하면 이벤트 추적 설정이 훨씬 쉬워집니다.
다음에 GTM에서 트리거를 설정할 때, "이 변수가 어떤 Attribute를 읽어오는 거지?"라고 한번 생각해 보세요. 그 순간, 단순한 설정 따라하기에서 원리를 이해하는 단계로 올라서게 됩니다!
HTML Attribute(속성)에 대한 설명으로 올바른 것은?
연관 개념
Selector (선택자)
웹페이지에서 특정 Element를 찾아내기 위한 '주소'나 '이름표' 같은 것입니다. CSS에서 스타일을 적용하거나, GTM에서 클릭 이벤트를 추적할 때 '이 버튼'을 지정하는 방법입니다.
Element (요소)
웹페이지를 구성하는 가장 작은 부품이 Element(요소)입니다. 버튼, 이미지, 텍스트 등 화면에 보이는 모든 것이 각각 하나의 Element이며, 이들이 조립되어 하나의 웹사이트를 완성합니다.
DOM (Document Object Model)
웹 개발, DOM이 궁금하다면? 버튼, 텍스트, 이미지까지, 웹 페이지의 모든 요소를 이해하고 다룰 수 있도록 돕는 DOM의 개념과 활용법을 지금 바로 확인하세요! 클릭 한 번으로 디지털 이해력과 실력을 성장시킬 수 있습니다.
관련 인사이트
GA4에서 세션 소스/매체에 (not set)이 보이는 이유
GA4 트래픽 획득 보고서에서 세션 소스/매체가 (not set)으로 잡히는 원인을 정리했습니다. 데이터 처리 지연, 비활성 세션 재개, Measurement Protocol, 잠재고객 트리거 이벤트 등 실제 원인별로 왜 발생하는지, 그리고 어떻게 대응해야 하는지를 초보자 눈높이에서 설명합니다.
React SPA에서 GTM 설치하기 | 페이지뷰 추적 완벽 가이드
리액트 같은 SPA 환경에서는 일반 웹사이트처럼 GTM을 설치해서는 안 됩니다. dataLayer를 올바르게 설정하고, 라우팅 이벤트를 추적하는 방법을 단계별로 설명합니다.
데이터 드리븐 마케팅의 기술, 구글과 메타 데이터 드리븐 캠페인 전략 2
1편에서 향상된 전환, 가치 기반 입찰, 오디언스 시그널 등 플랫폼 안의 데이터 활용법을 다뤘다면, 2편에서는 캠페인의 뼈대와 토양을 다룹니다. 인크리멘탈리티 기반 예산 배분, AI 학습을 위한 캠페인 구조 설계, 상품 피드 최적화, 랜딩페이지 시그널, 그리고 퍼스트파티 데이터 인프라가 만드는 기술적 해자까지 정리했습니다.
