전역속성
전역속성
전역속성은 어떤태그에도 전부다 사용할 수 있다
▶️ id
id는 식별자이며, 고유한 요소로 지정할 수 있다.
<div id="box"></div>
#box {
background-color: #fff;
}
- id를 지정하고 표현할때 앞에 #을 붙여 표현한다
- 딱 하나의 요소에만 적용할 수 있다(유일한 id를 가진다 - 동일한 id는 존재할 수 없다)
- id에 공백이 들어가서는 안된다
- id의 시작 단어는 무조건 영어 소문자이다
▶️ class
id와 비슷하지만 중복을 허용한다
<div class="box"></div>
<div class="box hide other"></div>
<!-- box, hide, other의 클래스를 가진다 -->
.box {
background-color: #fff;
}
- class를 지정하고 표현할때 앞에 .를 붙여 표현한다
- 중복이 가능하다(여러개의 요소에 지정가능)
- 하나의 요소에 여러개의
class가 지정할 수 있다 - 여러개의
class가 지정될 경우 공백으로 구분한다 - 하나의 클래스에는 공백이 들어가면 안된다
▶️ style
css를 적용할 수 있다
<div style="color:#000">text</div>
- 태그안에 들어갈 수 있다(inline style로 유지보수가 어렵다 - 권장하지 않음)
- 빠르게 style을 적용할 수 있다.
- 우선적으로 적용
▶️ title
추가적인 설명을 툴팁으로 제공한다(마우스를 오버하면)
<div title="this is text">text</div>
- 마우스를 올리면 툴팁이 나온다
- 공백, 개행을 인식한다
- 가장 하위 자식의
title이 우선 적용 (상속이 된다)
▶️ lang
사용자가 읽는 언어를 지정한다
요소의 수정 불가한 텍스트언어와 수정가능한 텍스트가 사용해야 하는 언어를 지정
- 사용자가 읽는 언어를 기준
- 웹 접근성을 높여주는 요소
- 상속이 됨
html lang="언어"로 지정하고 부분적으로 지정이 가능
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>종빈페이지</title>
</head>
<body>
<p>안녕하세요</p>
<p lang="en">hello</p>
</body>
</html>
html태그의 lang은 Ko로 지정하고 내부에서 영어를 사용해야 하는 부분이 있는 경우 부분적으로 해당 요소의 lang을 en으로 지정해준다 → 스크린리더가 읽을때 한국에에 최적화되어 읽다가 영어를 읽는 경우 부자연스러울 수 있다 따라서 영어임을 명시해줘야 한다
▶️ data
표준이 아닌 개발자가 지정한 속성(정보)
data-로 시작하는 속성은 개발자가 지정한 data이다- 사용자에게 보여지지는 않음
- html이 데이터를 지닐 수 있게 한다
- javascript(
dataset)나 css(attr())로 접근가능
<!-- HTML -->
<div data-name="jongbin" data-age="26">JB</div>
const data = document.querySelector("div");
console.log(data.dataset); // dataset으로 불러온다
▶️ draggable
요소의 드래그 여부를 지정한다
<div draggable="true">text</div>
- 스크롤하는 것이 아닌 요소를 끄는 기능
true,false값으로 명시- 기본값은
auto이다 javascript를 이용하면 드래그를 이용해서 어떠한 기능을 만들 수 있다
▶️ hidden
hidden을 적용해서 해당 요소가 보여지지 않도록 할 수 있다.
<div hidden>text</div>
- 개발자도구로는 볼 수 있다(html문서가 가지고 있다)
- boolean 값
display: none이 적용이 된다- css에서
display를 지정하면 보이게 된다