[HTML] 9. 전역 속성

in HTML on Html



9. 전역 속성

어느 태그든 사용할수 있는 속성

1. class 와 id

id

  • 문서 전체에서 유일한 고유식별자를 정의
  • 꼭 문서당 하나만! 겹치지 않도록!
  • id 내부에 공백 없어야 한다.
  • 숫자와 특수문자로 시작하면 안된다.

class

  • 식별자
  • 한 문서 내에 중복될 수 있다.
  • 한 요소에 class="hi hello" 공백을 기준으로 여러 클래스 중복 사용 가능



2. style

  • 한 요소에 적용할 css 스타일 선언
  • <div style="background: #ffe7e8;">
  • 권장하지 않는다.
  • 외부 css 파일과 속성이 중복되면 외부가 무시된다.
  • css 적용 규칙 최우선!



3. title

  • 요소와 관련된 추가 정보를 제공하는 텍스트를 나타낸다.
  • <div title="설명">안녕하세요
  • 마우스 오버시 나타난다.
  • pre 태그와 마찬가지로 스페이싱, 공백 모두 적용된다.
  • title 부모-자식 관계일 때 자기와 가장 가까운 title이 적용된다.
  • 부모로부터 상속받는다
<div title="안녕하세요">
    <div title="반갑습니다>졸리다</div> // 반갑습니다 나타남
    <div>배고프다</div> // 상속
</div>



4. lang

  • language
  • 컨텐츠를 읽는 사람의 언어를 나타낸다.
  • <html lang = "en">
  • <html lang = "ko">
  • 웹 접근성을 높이기 위해 사용한다 (스크린리더)
  • 일부 태그에만 적용할 수 있다.
  • 부모 속성 자식이 상속받는다.



5. data

  • data-*
  • 사용자가 정의하여 만드는 속성
  • js 가 접근할 수 있도록 하는 것
  • 뭔가 보여야하고 직접적으로 데이터를 다루어야 하지 않을 때
  • 나중에 Js 사용해서 사용자에겐 보이지 않지만 data에 접근해야할 때 사용
<ul>
    <li data-id="10784">Jason Walters, 003: Found dead in "A View to a Kill".</li>
    <li data-id="97865">Alex Trevelyan, 006: Agent turned terrorist leader; James' nemesis in "Goldeneye".</li>
    <li data-id="45732">James Bond, 007: The main man; shaken but not stirred.</li>
</ul>



6. draggable

  • 드래그가 가능한지 아닌지를 명시하는 속성
  • boolean 속성 아니다 (t/f 명시해줘야한다.)
  • <img draggable="false">
  • 드래그가 왜 필요한가? 이벤트에 따라 js 가 컨트롤할 수 있게 하려고



7. hidden

  • 무엇인가를 숨기는 속성
  • <img hidden>
  • 사용자에게 보이지 않는다.
  • 중요한 정보는 보안상으로는 좋지 않다 (개발자도구에 나온다.)
  • display: flex 하면 hidden 이어도 보인다.



나의 회고 🤫

드.디.어.!! html 기본 강의를 완강하였다.
매번 언급됐지만 초반에는 새로 알게 될 내용이 없을 줄 알았는데 매 강의마다 적어도 1개씩은 있어서 놀라웠다.
항상 css, js로 해오던 작업들 중 많은 부분이 html만으로도 구현 가능하다는 것을 깨달았고,
뭅스터에 새로 알게된 이 지식들을 어서 적용하고 싶어졌다.
시멘틱웹에 대한 지식 및 중요성과 함께 웹 페이지는 늘 사용자 접근성을 고려해야한다는 것을 깨달을 수 있었다.
다음 css 강의도 매우 기대가 된다