글로벌 속성과 로컬 속성

글로벌 속성

draggable = “true” : 요소를 마우스로 끌어서 이동할 수 있도록 설정함

• 화면에서 직관적으로 어떤 요소가 움직이게끔 할 수 있음

 

• 파일을 휴지통으로 드래그 하여 삭제할때
• 엑셀에서 컬럼의 위치를 변경할 때

lang : 어떤 언어로 텍스트가 구성되어 있는지 검색엔진 등에 알려줌

• 구글이나 네이버 같은 검색엔진에서 검색하고 분석하는 검색봇들이 우리가 만들고 있는 웹사이트를 분석하는데 이렇게 알려주면 좀 더 빠르고 정확하게 웹페이지를 분석할 수 있음.

• lang = “en” : 해당 HTML 페이지의 주 언어가 영어임을 표시
  
• lang = “ko” : 해당 HTML 페이지의 주 언어가 한국어임을 표시

활용

• 검색엔진(구글, 네이버 등)이 웹사이트를 분석할 때, 지정된 언어 정보를 바탕으로 페이지를 빠르고 정확하게 해석함.
• 예를 들어, lang="en"인 경우 PC 기본 언어가 한국어라면 “이 페이지를 번역하시겠습니까?“라는 메시지가 뜸.

hidden : 요소를 화면에 보이지 않게 설정함

• 속성 값이 필요하지 않음. 단순히 hidden만 작성해도 동작함.

id : 고유한 값으로 지정되어야 하며, 다른 태그와 중복될 수 없음.

• 예시: 주민등록번호처럼 유일성을 가지는 속성

name : 고유할 필요는 없으며, 동일한 값을 여러 태그에서 사용할 수 있음.

• 예시: 같은 이름을 가진 사람처럼 여러 태그에서 같은 name을 설정 가능.

label : 특정 입력 필드와 연결되는 텍스트를 제공함

    <label for="userId">사용자 아이디</label>
    <input type="text" name="" id="userId">

 

for 속성 : label 태그에서만 사용 가능한 로컬 속성.(글로벌 속성 아님!)

• 검색엔진이나 스크린리더가 입력 필드와 텍스트 간의 관계를 인식할 수 있도록 돕는 역할.

•주의 : for 속성 값은 연결되는 입력 필드의 id와 동일해야 함.

 

contenteditable

contenteditable = ‘true’ : 사용자가 해당 영역의 텍스트를 수정 가능하도록 설정

 

spellcheck

spellcheck="true" : 텍스트의 철자 오류를 감지하여 하단에 점선으로 표시함

 

style : CSS 스타일을 인라인으로 작성할 수 있는 속성.

• 여러 스타일 속성을 한 번에 작성 가능

<p style="color: red; font-size: 16px;">스타일 적용 예시</p>

 

tabindex : 탭 키를 눌렀을 때 요소 간 이동 순서를 지정함.

•  기본 동작 : 지정하지 않을 경우, HTML의 위에서 아래로 순차적으로 이동.
• 데이터 입력이 많은 폼에서 유용함.

<input type="text" tabindex="1">
<input type="password" tabindex="2">

 

title : 요소에 대한 추가 설명을 제공하며, 마우스를 올리면 해당 설명이 툴팁으로 표시됨.

• 사용 가능 태그 : 모든 태그에서 사용 가능 (예: button, a 등)
• 검색엔진 최적화에도 도움을 줄 수 있음

<button title="클릭하면 저장됩니다">저장</button>

 

---

로컬 속성

< a 태그 관련 로컬 속성>

herf : 이동할 페이지의 URL을 지정함

<a href="https://naver.com">네이버</a>

 

target : 링크를 클릭했을 때 페이지를 열 위치를 지정함

 

옵션

- "_blank" : 새 창에서 열림

<a href="https://naver.com" target="_blank">네이버를 새 창에서 열기</a>

 

- "_self" : 현재 창에서 열림 (기본 값)

<a href="https://naver.com" target="_self">네이버를 현재 창에서 열기</a>

 

< img 태그 관련 로컬 속성 >

src : 이미지를 불러올 경로를 지정함.

<img src="image.jpg" alt="이미지 설명">

 

alt : 이미지를 로드하지 못했을 때 표시되는 텍스트

• 시각장애인을 위한 스크린리더에서도 사용됨

<img src="broken.jpg" alt="이미지를 불러올 수 없습니다.">

---

글로벌 속성과의 차이

글로벌 속성: 모든 태그에서 사용 가능 (ex. style, id, class).

로컬 속성: 특정 태그에서만 사용 가능 (ex. href는 a 태그, src는 img 태그).