“ 매주 목요일마다 당신이 항상 하던대로 신발끈을 묶으면 신발이 폭발한다고 생각해보라.
컴퓨터를 사용할 때는 이런 일이 항상 일어나는데도 아무도 불평할 생각을 안 한다. ”- Jef Raskin
맥의 아버지 - 애플컴퓨터의 매킨토시 프로젝트를 주도
반응형
웹 페이지의 구조, 디자인, 그리고 동적인 기능 구현에 결정적인 역할을 하는 id, class, name 속성
HTML에서 사용하는 ID,CLASS,NAME을 알아봅시다!
웹 개발의 기초이자 핵심인 HTML은 단순한 마크업 언어를 넘어, 웹 페이지의 의미 구조를 정의하고 다양한 기능을 구현하는 데 중요한 역할을 합니다. HTML 요소에 부여되는 여러 속성 중에서도 id, class, 그리고 name은 웹 페이지를 동적으로 만들고, 스타일을 적용하며, 사용자로부터 데이터를 효율적으로 수집하는 데 필수적인 요소입니다. 하지만 이 세 가지 속성은 각기 다른 목적과 특징을 가지고 있어, 이를 정확히 이해하고 적절하게 사용하는 것이 효율적인 웹 개발의 첫걸음입니다. 본 글에서는 id, class, name 속성의 개념부터 실제 웹 개발에서의 활용 예시까지 심층적으로 다루어 독자 여러분의 HTML 이해도를 한 단계 끌어올리는 것을 목표로 합니다.
목차
HTML[ID,CLASS,NAME]
id 속성 : HTML의 주민등록번호
id 속성은 고유한 식별자입니다. 이는 특정 HTML 요소를 웹 페이지 전체에서 단 하나로 특정해야 할 때 사용됩니다. 마치 사람에게 주민등록번호가 부여되어 유일하게 식별되는 것과 같습니다. id 값은 대소문자를 구분하며, 공백을 포함할 수 없습니다.
사용방법
JavaScript에서 document.getElementById('yourId') 메서드를 사용하면, 해당 id 값을 가진 요소를 직접적이고 빠르게 선택하여 콘텐츠 변경, 스타일 조작, 이벤트 리스너 추가 등 다양한 동작을 수행할 수 있습니다. 이는 특정 요소에 대한 세밀한 제어가 필요할 때 매우 유용합니다.
<!-- 일부 HTML 소스코드는 제외 함. -->
<h1 id="mainTitle">오딘박스 주소</h1>
<p>주소는 https://odinbox.co.kr</p>
<button onclick="changeTitleColor()">제목 글씨 색상 변경</button>
<script>
function changeTitleColor() {
const title = document.getElementById('mainTitle');
title.style.color = 'purple';
}
</script>CSS에서 # 선택자를 사용하여 특정 id를 가진 요소에만 고유한 스타일을 적용할 수 있습니다. 이는 웹 페이지의 특정 부분에 특별한 디자인을 할 때 활용됩니다.
#TitleColor {
background-color: lightgray;
border: 1px solid black;
padding: 10px;
}
<p id="TitleColor">원하는 스타일을 적용해봅니다.</p><a href="#section2">와 같이 href 속성 값에 #과 함께 특정 요소의 id 값을 지정하면, 사용자가 해당 링크를 클릭했을 때 웹 페이지가 로딩되면서 해당 id를 가진 요소의 위치로 스크롤됩니다. 이는 긴 문서나 페이지 내에서 목차 기능을 구현하거나 특정 섹션으로 바로 이동하도록 할 때 유용합니다.
<h1>목차</h1>
<ul>
<li><a href="#section1">섹션 1 이동</a></li>
<li><a href="#section2">섹션 2 이동</a></li>
<li><a href="#section3">섹션 3 이동</a></li>
</ul>
<h2 id="section1">섹션 1 제목</h2>
<p>섹션 1 설명</p>
<h2 id="section2">섹션 2 제목</h2>
<p>섹션 2 설명</p>
<h2 id="section3">섹션 3 제목</h2>
<p>섹션 3 설명</p>class 속성 : 스타일과 기능의 재사용 가능한 그룹
하나 또는 여러 개의 클래스 이름을 부여하여 여러 요소를 논리적으로 그룹화하거나 공통된 스타일 및 동작을 적용할 때 사용됩니다. 하나의 클래스 이름은 여러 요소에 반복적으로 적용될 수 있으며, 하나의 요소에 여러 개의 클래스를 공백으로 구분하여 지정할 수도 있습니다.
사용방법
CSS에서 . 선택자를 사용하여 특정 class를 가진 모든 요소에 동일한 스타일을 일괄적으로 적용할 수 있습니다.
.button {
background-color: #f0f0f0;
color: #333;
padding: 10px 20px;
border: 1px solid #ccc;
cursor: pointer;
}
.primary {
background-color: #007bff;
color: white;
border-color: #007bff;
}
<button class="button">버튼1</button>
<button class="button primary">버튼2</button>
<div class="button">버튼3</div>document.getElementsByClassName('yourClass') 메서드를 사용하면, 해당 class 이름을 가진 모든 HTML 요소들의 컬렉션을 반환받아 반복문을 통해 각 요소에 대해 동일한 작업을 수행할 수 있습니다.
.notification {
border: 1px solid red;
padding: 10px;
margin-bottom: 10px;
}
.hidden {
display: none;
}
</style>
</head>
<body>
<div class="notification">공지사항</div>
<div class="notification hidden">긴급점검</div>
<button onclick="showNotifications()">알림보기</button>
<script>
function showNotifications() {
const notifications = document.getElementsByClassName('notification');
for (let i = 0; i < notifications.length; i++) {
notifications[i].classList.remove('hidden');
}
}
</script>name 속성 : 폼 데이터의 핵심 키
name 속성은 주로 <form> 요소 내의 입력 요소(input, select, textarea 등)에서 사용되며, 폼이 제출될 때 서버로 전송되는 데이터의 키(key) 역할을 합니다. 서버 측에서는 이 name 속성 값을 이용하여 전송된 데이터를 식별하고 처리합니다. 여러 개의 폼 요소가 동일한 name 속성 값을 가질 수도 있으며, 이는 서버에서 데이터를 배열 형태로 처리할 때 유용합니다.
사용방법
사용자가 폼에 데이터를 입력하고 제출 버튼을 누르면, 각 입력 필드의 name 속성 값과 입력된 값이 서버로 함께 전송됩니다. 예를 들어, <input type="text" name="sitename"> 필드에 사용자가 "OdinBOX"를 입력하면, 서버에는 sitename=OdinBOX와 같은 형태로 데이터가 전달됩니다.
<form action="/process_form" method="post">
<div>
<label for="email">이메일:</label>
<input type="email" id="email" name="email"><br><br>
</div>
<div>
<label for="message">메시지:</label><br>
<textarea id="message" name="message"></textarea><br><br>
</div>
<button type="submit">전송</button>
</form>id, class, name 속성의 주요 차이점
| 속성 | 주요 목적 | 고유성 | CSS 선택자 | JavaScript 접근 방식 |
| id | 고유한 요소 식별 | 문서 내 유일 | # | document.getElementById('yourId') |
| class | 스타일링 및 요소 그룹화 | 여러 요소 가능 | . | document.getElementsByClassName('yourClass') |
| name | 폼 데이터의 키 | 폼 내 여러 요소 가능 (특히 입력 요소) | 없음 | 주로 JavaScript에서 폼 객체를 통해 접근 |
마무리
지금까지 HTML의 핵심 속성인 id, class, 그리고 name에 대해 자세히 알아보았습니다. id는 웹 페이지 내에서 단 하나의 요소를 고유하게 식별하는 데 사용되며, class는 여러 요소를 그룹화하여 공통된 스타일이나 기능을 적용하는 데 활용됩니다. 마지막으로 name은 주로 폼 요소에서 서버로 전송될 데이터의 키 역할을 수행합니다. 이 세 가지 속성의 특징과 사용 목적을 명확히 이해하고, 각 상황에 맞는 속성을 적절하게 선택하여 사용하는 것은 효율적이고 체계적인 웹 개발의 중요한 기반이 됩니다. 혹시나 이 글을 보면서 궁금한 사항이 있다면 댓글을 남겨주시면 답변드리도록 하겠습니다!