728x90
글로벌 속성은 모든 HTML 요소에서 사용할 수 있는 속성이다.
id
- 문서 전체에서 유일한 고유식별자(ID)를 정의한다.
- 하나의 요소에 하나의 이름만 사용 가능하며, 문서 내에서 중복 불가하다.
- 속성 값이 공백(스페이스, 탭 등)을 포함해서는 안 된다.
class
- 유사한 HTML 요소를 분류하는 방법
- 동일한 클래스를 가진 요소들을 선택하여 일괄적으로 스타일 적용 가능
style
- 인라인 스타일을 적용하는 속성
- 다른 스타일 속성들과 함께 사용되지만, 우선순위가 가장 높다.
title
- 요소에 추가 정보나 설명을 제공하는 텍스트를 나타낸다.
- 요소에 마우스 커서를 올리면 title 속성에 들어간 텍스트가 말풍선으로 뜬다.
lang
- 요소의 언어를 설정하는 속성
- 디폴트 값은 '알 수 없음'이므로 항상 적절한 값을 지정하는 것이 좋다.
- 한국어: ko, 영어: en, 중국어: zh, 일본어: ja, 독일: de
hidden
- 요소를 숨기는 속성 (화면에 표시x)
- 디폴트 값은 false
draggable
- 요소의 드래그 가능 여부를 나타내는 속성
- true/false 값 중 하나 선택 가능
- 디폴트 값은 auto이며, 브라우저 기본 동작을 따른다.
data attribute
- data-[사용자 지정명]
- 개발자가 임의로 정의한 데이터를 요소에 저장하는데 사용되는 속성
- 화면에 보이지 않게 글이나 추가 정보 데이터를 엘리먼트에 담아 놓을 수 있다.
- 대소문자 여부에 상관없이 xml로 시작 불가. 세미콜론, 대문자 포함 불가.
- 글로벌 속성 활용 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.centered-text{
text-align: center;
}
</style>
</head>
<body>
<h1 draggable="true">움직일 수 있는 태그</h1>
<p lang="ko">대한민국</p>
<p class="centered-text">독일</p>
<p hidden>이 문장은 화면에 보이지 않습니다.</p>
<a
href="https://google.com"
id="google"
title="클릭하면 구글 사이트로 이동합니다."
>구글</a>
<br />
<label for="userId">사용자 아이디</label>
<input type="text" name="" id="userId" />
<br />
<p spellcheck="true" contenteditable="true">This is a paraggraph</p>
<p style="color: red; background-color: yellow">빨간색 문장입니다</p>
<a href="" tabindex="1">네이버</a>
<a href="" tabindex="2">벨로그</a>
<a href="" tabindex="3">다음</a>
<button title="주문 버튼을 클릭하면 선택한 제품에 대한 주문이 진행됩니다.">
주문
</button>
</body>
</html>728x90
'Frontend > HTML' 카테고리의 다른 글
| 6. 표 태그 (0) | 2024.07.03 |
|---|---|
| 5. 목록 태그 (ol, ul, dl) (0) | 2024.07.03 |
| 4. <div>, <span> (0) | 2024.07.03 |
| 3. Style 속성 (0) | 2024.07.02 |
| 1. HTML 기본 구조 및 기본 요소 (0) | 2024.07.02 |
