전역 속성

class와 id

• id와 class는 일종의 식별자 역할을 함, 특정 태그에만 스타일을 처리하고 싶을 때 유용하게 씀
• id같은 경우는 고유 식별자의 특징을 가지고 있음, id에서는 스페이싱이 있으면 안됨, 동일한 id 사용도 안됨, 첫 시작은 숫자와 특수문자 사용 불가능함(구분이 필요할 경우는 _ 사용)
• class의 경우 여러개의 요소를 선택할 수 있음, 여러 태그에 동일하게 같은 class를 줄 수 있음, 두 가지 요소가 중복 가능함
• class의 경우 중간의 공백 사용이 가능함, 여러개의 class를 쓰고 싶을 떄 공백을 통해서 구분을 해서 처리함, 여러개의 스타일을 적용하기에 용이함
• 스페이스를 쓰는 순간 다른 class로 인식하므로 네이밍 시에도 언더바나 구분자를 잘 써야함
• 예시

<p>A normal, boring paragraph. Try not to fall asleep.</p>

<p id="exciting">The most exciting paragraph on the page. One of a kind!</p>

<p>Narrator: This is the beginning of the play.</p>

<p class="note editorial">Above point sounds a bit obvious. Remove/rewrite?</p>

<p>Narrator: I must warn you now folks that this beginning is very exciting.</p>

<p class="note">[Lights go up and wind blows; Caspian enters stage right]</p>

• 참고자료
• 참고자료

style

• 앞서 head에서 배운 태그와는 다른 개념임, 이는 style 속성임
• style 속성은 하나의 요소에만 style을 적용할 때 사용함
• 권장하는 것은 항상 css를 외부에서 처리하는 것, 직접적으로 쓰는 경우는 진짜 일시적인 케이스에서만 주로 씀
• 예시

<div style="background: #ffe7e8; border: 2px solid #e66465">
  <p style="margin: 15px; line-height: 1.5; text-align: center">
    Well, I am the slime from your video<br />
    Oozin' along on your livin' room floor.
  </p>
</div>

• 참고자료

title

• title의 전역 속성임(head 태그와는 무관)
• 추가적으로 툴팁으로 해당 태그에 대한 title을 확인할 수 있음(일종의 설명하는 문구 작성)
• 부모의 title 요소가 있어도 자식 요소가 덮어쓰기로 적용되서 나오게 됨
• 그리고 부모가 title 요소가 있고 자식이 없다면 자식 요소는 이에 대해서 상속을 받아서 처리함
• 예시

<p>
  Use the <code>title</code> attribute on an <code>iframe</code> to clearly
  identify the content of the <code>iframe</code> to screen readers.
</p>

<iframe
  title="Wikipedia page for the HTML language"
  src="https://en.m.wikipedia.org/wiki/HTML"></iframe>
<iframe
  title="Wikipedia page for the CSS language"
  src="https://en.m.wikipedia.org/wiki/CSS"></iframe>

• 참고자료

lang

• 읽는 사람 즉, 콘텐츠를 읽는 사람에 대해서 명시하는 속성임
• 이 때 html에서 lang도 내가 만든 페이지에 맞게 해야함 그래야지 전체 문서를 해석하는데 용이함
• 하지만 이러다가 일부 문단이 다른 언어로 되어 있다면 그에 알맞은 lang 속성을 적용해줘야함
• 이를 통해 접근성을 용이하게 만들 수 있음(파파고나 구글 번역 등에서도 이를 활용할 수도 있음)
• 예시

<p>This paragraph is English, but the language is not specifically defined.</p>

<p lang="en-GB">This paragraph is defined as British English.</p>

<p lang="fr">Ce paragraphe est défini en français.</p>

• 참고자료

data

• data- 즉, 라는 의미는 사용자가 들어갈 속성의 이름을 직접 정의할 수 있음을 의미함
• js가 data에 대한 정보를 해석하고 처리하기 위해서 예시와 같이 암시적으로 정보를 얻는 표현이라고 볼 수 있음
• 예시

<article
  id="electriccars"
  data-columns="3"
  data-index-number="12314"
  data-parent="cars">
  ...
</article>

• 참고자료
• 참고자료

draggable

• drag가 가능한지 안한지 처리해주는 속성(다른 곳으로 옮길 순 없음 실제로)
• true, false를 반드시 명시해야함(기본값이 auto임), 기본적으로는 drag가 가능하게 되어 있음
• js와 연관되어 있음, 드래그 이벤트에 대해서 트랙킹 할 수 있기 때문에 유용하게 쓸 수 있는 속성
• 참고자료

hidden

• 작성을 하면 true고 작성하지 않으면 false, 해당 태그를 안 보이게 하는 속성
• 요소가 사라짐, 스크린 리더에서도 읽지도 눈에 보이지도 않음
• 단, 개발자 도구에서 본다면 element가 나타나긴함
• 보안상으로 일시적으로 가리고 안 보이게 하려고 할 땐 hidden의 속성을 쓰면 안됨(그런 처리는 js로 하거나 아예 없애야함)
• css로 재정의해서 보이게끔 할 수 있음
• 참고자료