본문 바로가기
SecurityFirst/Web

HTML 기초 공부 - 8. 태그 종류에 상관없이 사용하는 글로벌 속성

by 최듀렉 2023. 10. 25.

마지막으로 글로벌 속성(global attribute)을 알아보자.

 

우리는 앞에서 a 태그는 링크 대상 경로를 지정하기 위해 href 속성을 사용한다고 했다.

그렇다면 hn 태그와 p 태그에도 href 속성을 사용할 수 있을까?

 

결론부터 말하자면 사용할 수 없다.

HTML 언어에서 태그는 각 태그에서 사용할 수 있는 속성이 정해져 있기 때문이다.

하지만 예외도 존재한다.

태그 종류에 상관없이 모든 태그에서 공통으로 사용할 수 있는 속성이 있는데, 이것이 바로 글로벌 속성이다.

 

 

실무에서 자주 사용하는 글로벌 속성은 아래 표에 나와 있다.

표에 나온 속성은 종류를 가리지 않고 모든 태그에서 사용할 수 있다.

 

속성 값 설명
class value 요소에 클래스 값을 지정한다. 클래스 값은 CSS에서 클래스 선택자로 활용한다.
id value 요소에 클래스 값을 지정한다. 클래스 값은 CSS에서 클래스 선택자로 활용한다.
style style 요소에 인라인 스타일을 지정한다.
title text 요소에 추가 정보를 지정한다.
마우스를 요소 위에 올리면 툴팁(tooltip)으로 추가 정보가 표시된다.
툴팁은 요소에 마우스 커서를 올렸을 때 추가 설명이 뜨는 말풍선 형태의 그래픽 요소를 말한다.
lang language code 요소에 사용한 텍스트의 언어 정보를 지정한다.
hidden hidden 요소를 화면에서 감춘다.
data-* value 사용자가 임의의 속성을 만들 수 있다.

 

  • class 속성

class 속성은 요소에 클래스명을 지정할 때 사용한다.

클래스명은 CSS에서 클래스 선택자로 활용하고, 같은 클래스명은 여러 요소가 중복해서 가질 수 있다.

 

<p class="red-color">...</p>

 

 

  • id 속성

id 속성은 요소에 아이디를 지정할 때 사용한다.

아이디는 CSS에서 아이디 선택자로 활용하며, 중복될 수 없다.

 

<h1 id="title">...</h1>

 

 

  • style 속성

style 속성은 CSS 코드를 인라인으로 작성할 때 사용한다. 이후 CSS를 공부할 때 자세히 다룬다.

 

 

  • title 속성

title 속성은 요소에 추가 정보를 넣을 때 사용한다. (이전 a 태그에서 언급함)

title 속성에 넣은 값은 요소에 마우스를 올리면 툴팁으로 표시된다.

 

<p><span title="World Wide Web Consortium">W3C</span>는 국제 웹 표준 개발 기구입니다.</p>

W3C에 마우스를 올린 상태

 

 

  • lang 속성

lang 속성은 요소에 사용한 텍스트의 언어 코드를 지정할 때 사용한다.

일반적으로 HTML 문서의 언어 코드는 html 태그의 lang 속성에 작성한다.

 

<html lang="ko">

 

이 코드처럼 작성하면 한국어로 기본 언어 코드가 설정된다.

 

다만 한국어(ko)로 기본 설정된 문서에서 독일어가 나올 때,

다음처럼 lang 속성으로 독일어 언어 코드(de)를 명시하면 웹 접근성을 높일 수 있다.

 

<p lang="de">Guten Morgen</p>

 

모든 언어의 코드는 https://www.w3schools.com/tags/ref_language_codes.asp 에서 확인이 가능하다.

 

 

  • data-* 속성

data-* 속성은 사용자 커스텀 속성을 만든다.

 

태그에서 사용할 수 있는 속성은 HTML 문법에 정해져 있어서, 정해진 속성이 아니면 사용할 수 없었다.

그러나 HTML5에서는 이러한 점이 개선되어 data-* 속성으로 사용자가 원하는 속성을 만들 수 있다.

 

HTML에는 data-name과 data-hero라는 속성이 존재하지 않지만,

다음 코드처럼 data-* 속성으로 새로 만들 수 있다.

 

<p data-name="spiderMan" data-hero="true">...</p>

 

data-* 태그로 우리는 단순하고 평범한 (ex: p, img 등) 태그들에게 특정한 값이나 속성을 부여할 수 있다.

 

data-* 태그의 * 부분은 XML 작명 문법에 따른다.

 

  1. 대소문자에 상관없이 xml로 시작해서는 안 된다.
  2. 세미콜론(;)으로 시작해서는 안 된다.
  3. 대문자를 포함해서는 안 된다.

'SecurityFirst > Web' 카테고리의 다른 글

HTML 기초 공부 - 7. 웹 페이지 구조를 설계하는 시맨틱 태그  (0) 2023.10.18
HTML 기초 공부 - 6. 멀티미디어 설정하기  (0) 2023.10.17
HTML 기초 공부 - 5. 표 만들기  (0) 2023.10.16
HTML 기초 공부 - 4. 실무에서 자주 사용하는 HTML 필수 태그 다루기 3  (0) 2023.10.16
HTML 기초 공부 - 3. 실무에서 자주 사용하는 HTML 필수 태그 다루기 2  (0) 2023.10.12

관련글

티스토리툴바