[HTML] 새로 알게 된 내용

• main 태그 사용시 IE는 지원하지 않기 때문에 속성으로 role="main"을 명시 해줘야 한다.

• article 태그 사용시 태그 내에 구역을 대표하는 제목( <h1>-<h6> 요소)이 존재해야 한다.

• display: none의 CSS 스타일, HTML5 hidden 속성

  두 방법 다 시각적으로 보이지 않지만 HTML5 hidden 속성은 웹 접근성 측면에서 스크린 리더와 같은 보조 기술에서 접근해서 읽을 수 있도록 하는 방법(e.g. aria-label)을 제공해준다.

• 캐스캐이딩

<style>
  .box { color: red !important; }
  .index > .in_item { color: pink; }
  div ul .in_item { color: orange; }
  .in_item.in1 { color: black; }
  p + ul.index { color: yellow; }
</style>


<div class="box" style="color: yellow">
  <h1 class="title">title</h1>
  <p class="desc">description</p>
  <ul class="index" style="color: blue;">  
    <li class="in_item in1">index 1</li>
    <li class="in_item ">index 2</li>
  </ul>
</div>

해당 문제의 정답은 important가 있어 red라고 생각했지만 정답은 black이다.

이유는 MDN에서는 아래와 같이 적혀있다.

As per CSS rules, directly targeted elements will always take precedence over rules which an element inherits from its ancestor.

부모에서 물려받은 규칙은 항상 직접 받은 규칙보다 우선순위가 밀리기 때문에 li 태그 입장에서는 구체성이 높은 .in_item.in1 { color: black; }의 규칙을 따르게 되기 때문이다.

Reference

• https://developers.google.com/web/fundamentals/accessibility/semantics-aria/hiding-and-updating-content?hl=ko

• https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity