프론트엔드 학습 일지 - [10. 전역 속성]

이준호·2022년 11월 13일
0

[전역 속성에 대하여]

전역속성 : Global Attribute
어느 태그에도 사용 가능한 속성

식별자

  • id : 고유식별자(하나의 요소에 하나의 이름만. 이름 중복X), 값에 공백 X, 값 작성 규칙 준수.
  • class : 여러 개의 요소 선택 가능. 공백으로 요소 구분
<body>

	<div id="good">HELLO.</div>
    
    <div class="hello">HELLO.</div>
	<div class="hi hello">HELLO.</div>
	<div class="hi">HELLO.</div>

</body>
  • style : 한 요소에만 css 적용. 주로 테스트용으로 사용. 공백, 개행문자도 인식.

  • title : 설명 문구 표시

	<div title="바깥쪽 박스">
      <div title="첫번째 요소">안녕하세요.</div>
      <div>반갑습니다.</div>
    </div>
    
    <!-- title 값 중첩시 각 자신의 태그가 가진 하위요소의 값이 출력. -->

-lang : (language) 언어 태그 구문. 웹 접근성 올리는 수단(스크린 리더, 번역기) body태그 내의 태그에도 적용 가능

<!DOCTYPE html>
<html lang="ko"> <!-- 한국어 -->
  <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" />
    <link rel="stylesheet" href="FEcss.css">
    <title>Document</title>
  </head>
  <body>
 	<p>
  		안녕하세요, 저의 블로그 사이트에 오신 것을 환영합니다.
    </p>
    <p lang="en"> <!-- 영어 -->
    	Hello, welcome to visit my blog website.
    </p>
  </body>
</html>
  • data-* : 사용자 지정 데이터 특성.

  • draggable : 드래그 가능 여부 (불리언 속성)
    각 요소마다 draggable의 디폴트 값이 다릅니다.
    이미지의 경우, 값이 yes로 디폴트로 설정되어있습니다.

  • hidden : 요소를 숨김. 스크린 리더로도 인식 불가.

profile
저의 개발일지를 담은 블로그입니다.

0개의 댓글