요소들은 자신이 활용할 수 있는 속성이 정해져 있다.
즉, img요소의 src속성을 href로 대체할 수 없다는 의미이다.
그런데 전역 속성이라는 개념은 전체 영역에서 모두 사용할 수 있는 속성이다.
우리는 전역 속성을 통해서 기본적으로 HTML의 구조 부분, 즉,body에서 사용하는 여러 다양한 태그들의 전체 영역에서 언제든ㅇ지 사용할 수 있다.
대표적으로 title이라는 속성이 있는데
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css"
/>
<link rel="stylesheet" href="./main.css" />
</head>
<body>
<a href="https://www.naver.com/" target="_blank" title="네이버로 이동">NAVER</a>
<a href="https://www.google.com/">GOOGLE</a>
<img src="https://i1.sndcdn.com/artworks-000206444267-axw0ln-t500x500.jpg" alt="경단대가족">
</body>
</html>이렇게 title을 "네이버로 이동"으로 바꾸면 마우스를 갖다댔을 때 "네이버로 이동"이라는 박스가 띄워지는 것을 볼 수 있다.
이 title 속성은 body태그에 사용하는 모든 태그에 사용할 수 있는 속성이다.
(요소의 정보나 속성을 지정)
style 속성도 전체 영역에 쓸 수 있다.
ex.
<태그 style="스타일"><태그/>
요소에 적용할 스타일(CSS)를 지정할 수 있다.
class라는 속성도 있는데
class는 요소를 지칭하는 중복가능한 이름이다.
<태그 class="이름"></태그>
css에는 요소를 선택하는 선택자라는 개념이 있는데 요소를 선택하여 선택한 데에만 스타일을 적용할 수 있다.
실재로 HTML에서 태그는 중복해서 많이 사용할 수 있기 때문에 태그의 이름만 가지고서는 스타일을 적용할 태그를 정확히 짚어내기가 쉽지 않다. 그래서 클래스를 사용한다.
ex.
이 때 클래스 red에 해당스타일을 적용하려면 클래스를 의미하는 .을 red앞에 반드시 붙여주어야 한다.
그리고 id란 속성도 있는데 id는 class와 달리 요소를 지칭하는 '고유'한 이름이어야 된다.
그래서 사실 자주 이용하지는 않지만 중요한 위치에 고유한 이름을 추가할 때 사용하게 된다.
id를 중복해서 사용한다고 에러가 뜨지는 않으나 id는 고유한 것이 표준 문법이기 때문에 지켜주는 것이 맞다.
id를 이용하여 요소를 제어하고 싶으면 앞에 아이디를 지칭하는 #을 붙여주어야 한다.
data:
<태그 data-이름="데이터"></태그>
데이터는 기본적으로 문자 데이터이다.
이는 태그에 특정한 데이터를 저장하는 용도로 쓴다.
이 데이터는 많은 경우에 JS와 CSS에서 사용한다.
ex.
<div data-fruit-name="apple">사과</div>
<div data-fruit-name="banana">바나나</div>const els = document.querySelectorAll('div')
els.forEach(el => {
console.log(el.dataset.fruitName)
})라고 하면 console에 apple과 banana가 출력되는 것을 볼 수 있다.
이는 VS Code에서는 정상적으로 작동하지 않을 수 있는데
script로 JS를 연결하면 script로 JS를 연결하기 이전 코드만 브라우저가 앍어오기 떄문이다.
이를 해결하기 위해 SCRIPT요소에 defer 속성을 추가해줄 수 있다.
SCRIPT 요소에서 defer 속성은, HTML구조가 준비된 후(문서 분석 이후)에 JavaScript를 해석하겠다는 의미가 있다.
(defer : 미루다, 연기하다)
