전역 속성
html속성 중에는 특정 태그가 아닌 모든 태그에서 사용이 가능한 속성이 몇 가지 있습니다. 자주 사용되는 전역 속성 몇가지에 대해서 알아보겠습니다.
class, id
<div class="top pink date" id="potato">
</div>class와id는 임의의 태그를 지정하기 위해 사용합니다. 임의의 태그를 지정하여 스타일이나 자바스크립트로 코드를 작성할 수 있습니다.class는 중복해서 여러 태그에서 사용이 가능하고, 하나의 태그에서 여러class를 사용하는 것도 가능합니다. 띄어쓰기로 다른 클래스명을 구분하기 때문에 띄어쓰기에 유념해야 합니다.id는 하나의 태그에서 하나의id값만을 가질 수 있고, 여러 태그에서 하나의id값을 사용할 수 없습니다.
style
<div style="background-color: red;">
</div>- 요소에 스타일을 지정하는 방법은 총 세가지입니다. 외부 스타일 리소스를 연결하는 방법과
<head>의 자식 요소로<style>에 스타일을 작성하는 방법과 개별 태그에 속성값으로 사용하는인라인 스타일이 있습니다.인라인 스타일이 가장 우선수위가 높기 때문에, 다른 방법과 중첩된다면인라인 스타일의 코드가 적용됩니다.인라인 스타일은 강력한 대신, 코드를 재사용하는 것이 힘들고 디버깅하기 어렵다는 단점이 있기에 사용이 권장되지 않습니다.
title
<div title="곰">
이 동물은 무엇일까요?
</div>- 커서를 해당 요소에 가져가면 브라우저가 제공하는 툴팁에
title의 속성값이 담겨집니다. 만약 부모와 자식 요소 모두 속성값을 가지고 있다면, 자식 요소의 속성값이 우선순위가 됩니다.
lang
<html lang="ko">
<body>
<div lang="en"></div>
</body>
</html>- 일반적으로
<html>태그의 속성으로 많이 사용해서, 해당 파일의 언어가 무엇인지 사용자에게 알려줍니다. 그렇지만,lang도 전역속성이기 때문에 모든 태그에 사용이 가능합니다. 한국어는ko를 사용하고, 영어는en을 사용합니다. 일반적인 경우보다는 스크린 리더 사용시에 해당 언어의 국가에 따라, 언어가 변경되기 때문에 웹 접근성을 높일 수 있습니다.
data
<div data-name="mike" data-age="20">
</div>data뒤에-와 문자열을 통해, 임의의 속성을 여러개 만들 수 있습니다. 해당 속성을 자바스크립트와 연동하여 해당 요소의 데이터를 사용할 수 있습니다.
draggable
<div draggable="true">
</div>- 해당 요소를 마우스로 드래그 할 수 있는지 정하는 속성입니다.
boolean방식으로 정의하는 것이 아니라는 것을 유의해야 합니다. 자바스크립트와 연동하여 사용할 경우 응용할 수 있습니다. 해당 속성의 기본값은true가 아닌auto인데,auto는 브라우저의 기본 동작을 따라서 텍스트, 이미지, 링크를 드래그 할 수 있습니다.
hidden
<div hidden>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>- 해당 요소가 화면에 보이지 않게 합니다. 속성은
boolean방식으로 사용합니다. 화면에는 보이지는 않지만, 실제로 없어진 것은 아니기 때문에 개발자 도구를 통해서 해당 요소를 확인 할 수 있습니다. 그렇기 때문에 보안을 신경써야 한다면,hidden속성을 사용하는 것은 적합하지 않습니다.
자기개발 :)