국비교육 7일차

※구조 

구조: 3단, 4단
         *헤더: 제일 먼저 보여줘야 하는 정보들 나열 (로고, 서치바, 로그인)
          메뉴바: 헤더 안에 포함돼도 된다.
         *본문: 실제 필요한 정보들(콘텐츠)
         *푸터: 회사정보나 사이트에 대한 정보

시멘틱태그 - html5에서 추가된 태그
              아무 의미 없는 block레벨.
              div와 같다(여백 같은 기본 css가 없다)
              사람, 컴퓨터한테 태그 이름만으로 해당 박스가 어떤 박스인지 구분하기 쉽게 해 준다.

                - 종류 - 
            1) main: 중요부분 명시
                     기존의 wrap 부분을 대체하기도 함
            2) header: 화면 상단, 섹션(박스)의 상단
            3) nav: 메뉴바, 내비게이션 바
                    - GNB: 글로벌 내비게이션 바
                           사이트의 모든 페이지에서 똑같이 나오는 메뉴바
                    - LNB: 로컬 내비게이션 바
                           각 페이지마다 다르게 나오는 메뉴바
            4) section: 본문(각 영역, 박스)
            5) article: 본문(본문 안의 본문)
            6) aside: 화면 좌우
            7) footer: 화면 하단, 영역의 하단

-시맨틱 태그를 사용해야 하는 이유

웹 문서 레이아웃을 만들 때 시맨틱 태그를 사용하지 않더라도 <div> 태그를 활용하여 웹 문서를 똑같이 만들 수 있습니다. 하지만 우리가 시맨틱 태그를 사용해야 하는 이유는 크게 아래의 3가지 이유가 있습니다.

• HTML 문서의 가독성과 유지보수가 쉬워지기 때문입니다. 만약 모든 태그들을 div로 만들었다고 가정해 봅시다. HTML 문서가 길어진다면 어디가 어느 부분인지, 어떤 영역인지 한눈에 파악하기가 힘들어지겠죠. 하지만 시맨틱 태그를 활용하면 유지보수를 할 때나 다른 작업자가 코드를 파악하기가 보다 쉬워집니다.
• 웹 브라우저가 HTML만 보고도 상단(header), 본문(main), 하단(footer), 사이드(aside) 어느 영역인지 쉽게 알 수 있습니다. 이는 웹 접근성 시각에서 볼 때도 중요하게 사용됩니다. 예를 들어 시각장애인들이 사이트를 사용할 때 사용되는 화면의 텍스트를 읽어주는 스크린 리더기 등을 통해 활용될 수 있습니다.
• 검색엔진이 검색을 수행할 때 HTML내의 태그를 분석할 수 있습니다. 예를 들자면 검색엔진의 검색로봇에서는 <article> 태그가 사용된 콘텐츠를 재배포할 수 있는 콘텐츠로 인식합니다. 반대로 <section> 태그로 묶은 콘텐츠는 재 배포를 금지하는 콘텐츠로 인식합니다. 

시멘틱 태그 구조

※이렇게 시맨틱 구조로 활용한 결과 3단(헤더, 컨테이너, 풋털)으로 구분한 거보다 더 세세하게 구분가능하면 

가독성과 이 더 좋아지고 나중에 다른사람들이 봤을 때도 알아보기 쉬울 것이다.

결과적으로 유지보수에도 좋은 영향을 끼치는 것 같다.

 

-3단 구조 예)

3단구조 결과값

※필자는 로그인란을 만들 때 3단 구조를 사용하는 것이 좋은 것 같다.

확실히 긴 코드나 복작한 코드를 잘 때 세세하게 분류할 때는 시맨틱 탱크를 활용하는 것이 좋을 것이고,

이렇게 간단한 구조는 3단 구조 태그들이 편하게 사용될 것 같다.