[프로젝트 A-1] 두번째 리뷰

<header>
  <div class='name'>
    .
    .
    .
  </div>
</header>

이런 경우 부모 태그 header도 블록레벨이고 자식 태그 div.name도 블록레벨이게 된다. 불필요하게 2단계 깊이의 블록레벨을 사용하였는데 div가 없더라도 header의 블록 디스플레이 속성을 이용하여 충분히 구현 할 수 있다.

<li>
  <a href="a link"> text </a>
</li>

a태그의 클릭영역을 전체로 늘릴때는 display: block으로 css를 구성하면 된다.

<div class = "Main Container">
  <div class ="Contents">
    <div class="Inner Contents 1 ">
    <div class="Inner Contents 2 ">
      .
      .
      .
     </div>
   </div>
 </div>
</div>

모든 레이아웃을 div로만 작성한 점이 아쉬운 부분이다.
시멘틱 태그 section, article태그를 사용하는것이 더욱더 시멘틱하다.

section
section은 논리적으로 관계있는 문서들을 분리할대 사용

article
article은 독립적으로 다른 페이지에 가져다 놔도 독립적으로 사용 될 수 있음

[참고] https://developern.tistory.com/entry/how-to-article-section-div-tag