Tweet

이 트윗부분을 만들건데, 이때는 <article>이라는 섹션 태그를 쓸 것임. 왜 <section>을 쓰지 않을까? <article>은 <section>중에서도 기사나 뉴스같은 경우… 그 의미를 더 명확하게 사용하기 위해 사용한다.

새로운 태그를 하나 알려주겠다. <header>와 비슷한 급인 <footer>이다.

트윗의 아래 이 버튼들을 통틀어 <footer>로 묶어줄 것임.

<article>
    <h1>A Tweet from 김익명</h1>
    <header>
        <a href = "#">
            <img src = "#" alt = "김익명">
        </a>
        <h2>
            <a href = "#">
                김익명
            </a>
        </h2>
        <dl>
            <div>
                <dt>Username</dt>
                <a href="#">
                    <dd>@anonymouskim</dd>
                </a>
                <dt>Posted</dt>
                <a href = #>
                    <dd>Dec 20</dd>
                </a>
                
            </div>
        </dl>
    </header>
    <button aria = lable = "Options">
        <!-- Icon -->
    </button>
    <div>
        <button type = "button">
            <!-- Icon -->
            Show less often
        </button>
        <button type = "button">
            <!-- Icon -->
            Embed Tweet
        </button>
        <button type = "button">
            <!-- Icon -->
            Unfollow @anonymouskim
        </button>
        <button type = "button">
            <!-- Icon -->
            Mute @anonymouskim
        </button>
        <button type = "button">
            <!-- Icon -->
            Block @anonymouskim
        </button>
        <button type = "button">
            <!-- Icon -->
            Report Tweet
        </button>
    </div>
    <p>
        영어를 더 잘 하고싶다. 그러나 공부를 하고 싶지는 않다. 내 삶의 모든 것이 이런 식으로 망해왔다
    </p>
    <footer>
        <button type = "button">
            <!-- Icon -->
            <span class = "sr-only">Tweet your reply</span>
            <strong aria-label="3replied">3</strong>
        </button>
        <button type = "button">
            <span class = "sr-only"></span>
            <strong aria-label="3 retweeted">3</strong>
        </button>
        <!-- 위 버튼 모달 창 -->
        <div>
            <button href = "#">
                Retweet
            </button>
            <button href = "#">
                Retweet with comment
            </button>
            <button type = "#">
                <span class = "sr-only">Like this tweet</span>
                <strong aria-label="100 liked">100</strong>
            </button>
            <button type = "button">
                <span class = "sr-only">Share</span>
            </button>
            <!-- 위 버튼 모달 창 -->
            <div>
                <button href = "#">
                    Send via Direct Message
                </button>
                <button href = "#">
                    Add Tweet to Bookmarks
                </button>
                <button href = "#">
                    Copy link to Tweet
                </button>
            </div>
        </div>
    </footer>
        
</article>

위 tweet의 모든 요소들을 마크업했음… 클릭했을때 나오는 메뉴바나 모달창의 버튼까지

모든것을 다 마크업해서 드러낸 상태이다. 이제 이걸 css와 js를 이용해 가릴건 가려주고, 필요한 기능들은 추가해주고 하면 됨…

Aside

이번시간에는 섹션 엘리먼트 중 마지막인 <aside>를 배워보자.

이렇게 페이지 전체 구조중… 말 그대로 aside한 녀석을 만들때 쓴다. <section>으로 엮어도 되지만, 이녀석의 의미를 더 부여할때 <aside>를 사용한다. 배너 광고, 작은 위젯 등 사이드에 있는 집합을 만들때 사용함.

내가 혼동스러워서 하나 정리하자면, <header>와 <footer>는 각각의 섹션 엘리먼트 내에서 또 문단 구분등을 할때 사용하는 것들이다. 그리고 섹션 엘리먼트는 페이지 전체에서 문단 구분을 할때 사용하는 엘리먼트들이고…