전역 속성

앞서 태그에 특정한 기능을 더해주기 위해서 속성(attribute)와 값을 명시한다고 했다.

그렇다면 a태그에서 연결할 주소 경로를 명시하는 href 속성을 img 태그에서 이미지의 경로를 나타내는 src 속성을 대신하여 사용할 수 있을까?? 당연히 아니다.

하지만 전역 속성은 이러한 속성들과 달리 body에서 사용되는 모든 태그에 동일하게 적용될 수 있는 속성이다.

 

대표적인 전역 속성 몇 가지를 살펴보자

 

1. title 속성

=> title 속성은 요소의 정보나 설명을 지정한다.

=> 해당하는 요소에 커서를 갖다대면 설명이 나오도록 할 수 있다.

 

2. stype 속성

=> 요소에 적용할 스타일(CSS)을 지정한다.

=> link 태그를 이용해서 외부의 CSS파일을 가져와서 연결하는 방식도 있고

=> style 태그를 이용해서 태그 안에 CSS를 직접적으로 입력하여 선언하는 방법도 있지만

=> 태그 안에 style을 속성으로 선언하여 스타일을 지정하는 방식도 있다.

 

3. class 속성

=> 요소를 지칭하는 중복 가능한 이름

하나의 요소에 왜 이름을 부여할까??

CSS에는 특정한 요소를 선택하는 "선택자"라는 것이 있는데, 이때 요소에 지정된 이름을 이용해서 특정 요소를 선택하여 원하는 스타일을 적용할 수 있다.

만약 여러 개의 단어들 각각을 span태그로 묶어놨는데, 그 중에서 하나의 요소에만 어떠한 스타일을 적용하고 싶다고 할 때 span 태그에 대해서 스타일을 적용하면 내가 원하지 않는 요소들에도 스타일이 적용되게 된다.

이때 <span class="red"> 동해물 </span> 이렇게 특정 요소에 이름을 적용한 다음

.red {
    color = "red";
}

이와 같이 클래스에 대해 스타일을 적용하면 내가 원하는 요소에만 스타일을 입힐 수 있다.

여기서 red는 요소의 이름을 의미하고, 앞에 점(.)은 클래스를 의미한다.

 

4. id 속성

class와 마찬가지로 요소를 지칭하는 이름을 명시하지만

class와는 다르게 고유한 이름을 명시한다.

=> 즉, 중복이 불가능하다.

=> 중복된 이름을 지정한다고 에러가 나는 것은 아니지만, 원하는 결과를 얻을 수 없게 된다.

<span id="abc">동해물</span> 이렇게 id를 지정한 다음

#abc {
    color = "blue";
}

이와 같이 특정 id에 대해서 스타일을 적용할 수 있다.

이때 id 이름 앞에 샾(#)을 붙여서 해당 이름이 id임을 나타내준다.

 

5. data 속성

=> 요소에 데이터를 지정한다.

<태그 data-이름 = "데이터">의 형식으로 사용

Ex) <div data-fuit-name="apple">사과</div>

=> fruit라는 이름으로 apple이라는 데이터를 저장

요소에 특정한 데이터를 잠시 저장해두고, 저장된 데이터는 나중에 java script나 css에서 사용한다.

대부분 java script에서 사용한다.

ㄴ