728x90
속성 (Attribute)
HTML에서 같은 tag라도 다른 동작을 할 수 있도록 속성을 지정해 줄 수 있다. 예를 들어 아래와 같이, h1 태그 2개가 선언되어 있다고 해보자.
<h1>초록색 글씨</h1>
<h1>빨간색 글씨</h1>
이 때에, h1 태그의 글자색을 파란색으로 바꾼다 하였을 때 head의 style 태그를 통해 값을 변경해 줄 수 있다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> 속성 </title>
<style>
h1 { color : blue; } /* h1 태그의 글자 색을 파란색으로 변경 */
</style>
</head>
<body>
<h1>초록색 글씨</h1>
<h1>빨간색 글씨</h1>
</body>
</html>아래와 같이 h1 태그 모두 파란색 글씨로 바뀐다.
하지만, 위의 h1태그는 초록색, 아래 h1 태그를 빨간색 글씨로 바꾸고 싶다면 어떻게 해야 할까? 위의 예시에서는 모든 h1 태그가 똑같은 h1 태그로 취급한다. 하지만 각각의 h1 태그의 속성을 부여한다면 서로 다른 h1 태그로서 지정해 줄 수 있다!!
속성을 부여하여 코드를 다음과 같이 변경하였을 때,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> 속성 </title>
<style>
/* id 속성값이 green인 h1 태그의 글자색을 초록색으로 변경 */
h1#green { color : green; }
/* id 속성값이 red인 h1 태그의 글자색을 빨간색으로 변경 */
h1#red { color : red; }
</style>
</head>
<body>
<!-- id 속성은 고유한 속성값을 부여!!(중복된 속성값을 가질 수 없음) -->
<h1 id="green">초록색 글씨</h1>
<h1 id="red">빨간색 글씨</h1>
</body>
</html>결과가 잘 나오는 것을 확인할 수 있다.
이렇듯, 속성을 통해 같은 태그라도 어떠한 속성을 가지고 있느냐에 따라 다른 태그라도 같은 효과를 가질 수 있고 같은 태그라도 다른 효과를 가질 수 있게 되는 것이다.
기본 구문
속성의 지정 구문은 다음과 같이 속성이름에 속성값을 지정하여 주면 된다. 이 때에 속성값은 따옴표 안에 들어가야 하고 여러개 일때는 띄어쓰기로 구분한다.
<!-- [속성명] = "[속성값1] [속성값2] ..." -->
<h1 class = "c1 c2 c3">attribute</h1>
전역 속성의 종류
전역 속성이란 모든 HTML 요소에서 공통적으로 사용 가능한 속성이다.
Class Attribute
<!--
공백으로 구분되는 요소의 별칭을 지정
CSS혹은 JS의 요소 선택기(CSS 선택자, getElementByClassName, QuerySelector, ...)을 통해서 접근
.[class명] 을 통해 접근
-->
style {
.c1 {
/* .(dot) 을 통해 해당 클래스명에 접근 */
}
}
<!-- cl 클래스 속성을 가지는 p 태그 선언>
<p class = "c1">class attribute</p>
Id Attribute
<!--
문서에서 고유한 식별자를 정의
중복된 id값은 가질 수 없다
CSS혹은 JS의 요소 선택기(CSS 선택자, getElementByClassName, QuerySelector, ...)을 통해서 접근
#[id명]을 통해 접근
-->
style {
#attribueID {
/* # 을 통해 해당 id명에 접근 */
}
}
<!-- attribueID id 속성값을 가지는 p 태그 선언>
<p id = "attribueID">id attribute</p>
Style Attribute
<!--
요소에 적용할 CSS를 선언
인라인 방식(Tag 내에서 스타일 입력)
-->
<!-- style 속성을 이용하여 해당 p 태크의 글자색 초록색으로 변경 -->
<p style="color:green">style attribute</p>
Title Attribute
<!--
요소의 정보(설명)을 지정
인라인 방식
-->
<!-- title 속성을 이용하여 h1 태그의 설명을 추가 -->
<h1 title="h1태그로 지정된 제목임">title attribute</h1>
Lang Attribute
<!--
요소의 언어를 지정 (ex. en, kr, ...)
-->
<!-- lang 속성을 이용하여 p 태그의 언어를 지정 -->
<p lang="en">lang attribute</p>
data- Attribute
<!--
사용자 정의 데이터 속성을 지정
HTML에 JS에서 이용할 수 있는 데이터 정보를 저장하는 용도로 지정
data- 뒤에는 원하는 대로 작성
-->
<!--
data-... -> '-'로 이어질 경우 첫문자는 대문자로 변환해서 붙음
ex) data-data-name -> dataName 으로 접근
-->
<div id="me" data-my-name="Heropy" data-my-age="851">Heropy</div>
<script>
const $me = document.getElementById("me");
console.log($me.dataset.myName);
console.log($me.dataset.myAge);
</script>
draggable Attribute
<!--
요소가 Drag and Drop API를 사용 가능한지 여부를 지정
draggable = "auto" -> default
-->
<!-- 해당 영역을 Drag and Drop이 가능하도록 지정 -->
<div draggable="true">draggable attribute</div>
hidden Attribute
<!--
요소를 숨김
-->
<!-- 해당 영역을 숨김 -->
<form action="" id="hiddenForm">
<!-- 숨겨진 양식들 -->
</form>
<button form="hiddenForm" type="submit">전송</button>
tabindex Attribute
<!--
Tab 키를 이용해 요소를 순차적으로 포커스 탐색할 순서를 지정
대화형 콘텐츠(Interactive Content)는 기본적으로 코드 순서대로 탭 순서가 지정 됨
비대화형 콘텐츠에 tabindex="0"을 지정하여 대화형 콘텐츠와 같이 탭 순서를 사용
tabindex="-1"을 통해 포커스는 가능하지만 탭 순서에서 제외 가능
tabindex="1"이상의 양수 값은 논리적 흐름을 방해하기 때문에 사용을 추천하지 않음
-->728x90
'Web > HTML' 카테고리의 다른 글
| [HTML] Tag - DIV&SPAN (0) | 2023.10.20 |
|---|---|
| [HTML] Style 속성 (0) | 2023.10.20 |
| [HTML] HTML 문서 정보 태그 (0) | 2023.10.19 |
| [HTML] TAG - Heading (0) | 2023.10.19 |
| [HTML] TAG - Paragraph(with. Entity) (0) | 2023.10.19 |