TIL : 웹퍼블리싱 HTML 2회 (5)

I. 영역을 위한 시맨틱 태그(17강)

묶는데 div가 쓰인다

난해한 경우가 생긴다.

 

1. 시맨틱 태그가 없던 시절 : HTML4까지는 다음과 같은 필수 구조를 설명하는 태그가 없었다.

사람이 만든거 뿐만아니라, 사람이 읽는게 아니라 크롤링할 때 등이있다.

API제공안하고 화면만 줄때 다 div라서 main영역 알수가없다

그전에는 식별하기위해서 id를 넣어주었다.

식별자로 영역구분했음

 

2. 문서의 내용을 식별한는데, 표준방식이 없었던 시절 제각각 필수 구성들 : 이 구성을 식별하기 위해 나름대로 이름을 부여하였다.

누구가 맞고 틀리고가 아닌데, 영역마다 붙일때 통일 필요성이있음

그 결과 head main footer 세가지로 만들어짐

 

저작자 정보가 위에라도 footer라고 부름? footer로 그대로 하면된다.

3. 시맨틱 태그들 : 컨텐츠를 구분해줄수 있게 의미가 살아있는 태그

사람들이 가장 많이 추천하는 이름으로 표준화 진행

식별하는 id에서 태그로 구분하게되었다.

 

이렇게 함으로서 태그로 구분할수 있게 되었음

그결과 의미가 분명해졌다고 해져서 시맨틱 해졌다고 할수 있다.

<header>
    <h1>알랜드</h1>

    <h2>헤더</h2>
    
    <div>메뉴버튼</div>

</header>

요소의 의미가 명확히 드러난다면 코드의 가독성과 유지보수를 높일 수있다

 

II. HTML5의 섹션 태그(18강)

1. 지금까지 아웃라인을 잡던 방식 : 목차구성

제목을 매번 몇번째 순서인지 정하는게 번거롭다.

제목이 있고 그 컨텐트를 묶는 녀석 섹션 태그를 해보자

 

2. Section 태그를 이용해 아웃라인을 잡는 새로운방식 : 목차구성

나의 섹션영역만 신경써서 붙여주면 된다.

 

- 제목과 컨텐트 감싸는 블럭인 메인메뉴 부분도 sction으로 바꿀수있다

여기도 h1으로 바꿀수있다

 

<section>       
            <h1> 
                부안에 오면 꼭! 들리는 카페
            </h1>

            <!-- 문장(주술관계)은 아니고 제목일까, 목록(동일항목여러개)도 아니고, 표도아니고 ,폼도아니다.
            이도 저도 아님 div로 하자 -->
            <div>
                전체메뉴
            </div>     

         
    
      <section>
            <h1>인기메뉴</h1>
                
                <ol>
                    <li>딸기청</li>
                    <!-- <div>버튼1</div>   
                                이렇게 하는게 오류가 안난다고 문제가 아닌건 아니다 -->
                    <li>알랜드</li>
                    <li>아메리카노</li>
                
                </ol>
        </section>

            <ui>알랜드 오시는 길</ui>

    </section>

이제 section 안에서 h1으로 다 해도 이렇게 구조가 나누어지게된다.

 

이제 다 바꿔주자

이 경우 section이란 제목을 이끌고 있는 영역인데, 어울리지 안는 곳도있다

보이는거 때문에 문서순서 바꾸는것은 좋지않다.

<section>
            <h2>알랜드 소개</h2>
            
        <section>
            
            <h3>직접 만든 과일청을 맛보세요</h4>  
                       
                <div>과일청</div>
        </section>          
      
        <section>
            <p>
            신선한 과일과 알랜드만의 레시피로
            과일향의 풍미를 충분히 느낄 수 있는
            수제청을 드셔보세요.
            </p>
        </section>


        <section>
            <h3>직접 구운 수제 쿠키를 만나보세요 </h4>
            <div>쿠키</div>
            <p>
                신선한 버터 그리고 견과류를
                이용해 바삭함을 더해 매일마다

            </p>
        </section>  



        <section>
            <h3> 직접 구운 맛난 쿠키를 만나보세요</h4>
            <div>쿠키</div>
        </section>
        
        <section>
            <h3>다양한 로스팅으로 다채로운 맛을 느껴보세요</h4>
            <div>커피</div>
        </section>




        <section>
            <h3>알랜드 주변의 명소를 찾아보세요.</h4>
            <div>명소</div>
            <p>
                알랜드 주변에는 30곳이 넘는 힐링 장소에서 맛나는 커피와 경치로 힐링을 해보세요
            </p>
        </section>
        
   
</section>

이 경우 h를 위로 옮겨주는 방식으로 하자 

 

다만 header는 section으로 하지말자

큰 섹션의 헤더영역이다.

그안에서는 섹션이 가능하다

 

III. 섹션과 영역 태그의 차이점   (19강)

지난시간에서 header는 section이 아니다 

header는 제목을 나타내는 태그가 아니고 제목은 h이고

추가적으로 제목 외 제목이 포함된 영역이 필요할때가 있다.

어울려져서 묶어야하는게 있는데, 그것이 section에서 헤더이다.

 

이러한 영역을 div로 할수있다. 그러나 header 도 가능하다

 

footer 섹션에서는 저작자 정보를 만들수있다.

 

IV. 섹션과 영역 태그의 차이점(20강)

1. 시멘틱 섹션 태그와 <article>

(1) 섹션태그들 : 콘텐츠의 아웃라인을 쉽게 만들어주는 태그

이 태그들은 섹션으로 해도 되나, 각자일때 각자에대해서 태그를 넣어주면 문서론적으로 하면 의미가 살아있다.

 

(2) nav

navi 는 쉽다.

링크로만 이루어진 목록을 navi로 볼수있다.

클릭해서 다른 곳으로 가는 섹션을 navi섹션을 쓰는게 바람직하다

 

이도저도 아닌거는 그냥 section 쓴다

 

(3) aside

이는 메인과 동떨어져있는것을 의미한다.

 

(4) article

우리문서에서 내용이 있는 경우를 의마한다.

게시판 목록에는 내용이없어서 article이 없고 게시글 들어가면 article이있는 것이다.

 

만약 댓글이있으면 5개 달리는데, 하나하나는 section일까?

제목과 문장이있어야하는데 댓글 각각은 section이자 article이 될수있다.

 

 

V. nav 섹션태그 (21강)

<section>
            <h1>인기메뉴</h1>
                
                <ol>
                    <li>딸기청</li>
                  
                    <li>알랜드</li>
                    <li>아메리카노</li>

                </ol>
        </section>

이 부분은 메뉴이다 

다 링크가 걸린녀석이니가 nav 로 바꾸어준다.

<section>
    <h1>인기메뉴</h1>

        <nav>
            <li>딸기청</li>

            <li>알랜드</li>
            <li>아메리카노</li>

        </nav>
</section>

 

<질문>

<article>

    <h1>직접 만든 과일청을 맛보세요</h1>  

        <div>과일청</div>

        <p>
        신선한 과일과 알랜드만의 레시피로
        과일향의 풍미를 충분히 느낄 수 있는
        수제청을 드셔보세요.
        </p>
</article>

여기 섹션에서 제목은 h1이고

내용은 div와 p 이다

 

<section>

        <h1>알랜드 소개</h1>

    <article>

        <h1>직접 만든 과일청을 맛보세요</h1>  

            <div>과일청</div>

            <p>
            신선한 과일과 알랜드만의 레시피로
            과일향의 풍미를 충분히 느낄 수 있는
            수제청을 드셔보세요.
            </p>
    </article>


    <article>
        <h1>직접 구운 수제 쿠키를 만나보세요 </h1>
        <div>쿠키</div>
        <p>
            신선한 버터 그리고 견과류를
            이용해 바삭함을 더해 매일마다

        </p>
    </article>  



    <article>
        <h1> 직접 구운 맛난 쿠키를 만나보세요</h1>
        <div>쿠키</div>
    </article>

    <article>
        <h1>다양한 로스팅으로 다채로운 맛을 느껴보세요</h1>
        <div>커피</div>
    </article>




    <article>
        <h3>알랜드 주변의 명소를 찾아보세요.</h4>
        <div>명소</div>
        <p>
            알랜드 주변에는 30곳이 넘는 힐링 장소에서 맛나는 커피와 경치로 힐링을 해보세요
        </p>
    </article>


</section>

더 크게 여기 섹션에서 제목은 h1 알랜드 소개이고

내용(content)은 나머지 아래것들이다

 

<본론으로>

<nav>
    <!-- 나누어진 부분에 우두머리는 2번으로 하자  -->
        <h1> 
            부안에 오면 꼭! 들리는 카페
        </h1>

        <div>
            전체메뉴
        </div>     

    <section>
        <h1>인기메뉴</h1>

            <nav>
                <li>딸기청</li>

                <li>알랜드</li>
                <li>아메리카노</li>

            </nav>
    </section>



        <ui>알랜드 오시는 길</ui>

</nav>

여기 부분은 다 링크이기 때문에 nav로 해준다

 

 

<마무리하며>

섹션태그 알게됨

안에는 헤더 푸터있음

 

 

---

1. 보충

(1) 시맨틱 웹

What (정의) : 기존에 주먹구구식 데이터집합이었던 웹페이지를 의미와의 관련성을 가지게끔 하는 것이다.

Why (존재이유)  : 개발자 입장에서는 가독성과 유지보수. /검색엔진은 효과적인 크롤링과 인덱싱에 용이해짐

How (방법) : 각 웹페이지에 메타데이터를 부여한다.

e.g. (예) :

 

 

2. 회고 

1) 시맨틱 태그를 잘 써야지 배포한 페이지가 검색엔진으로 하여금 크롤링에 용이하다는 점에서 연결되어서 신기했다.