Tweet

article

• section 태그와의 차이점 : 정보 컨텐츠로써 완결이 분명한 경우 (독립적으로 존재해도 되는 경우)
  • ex) 블로그 글, 뉴스 기사, 피드에 주로 사용한다.
• 마찬가지로 heading tag를 반드시 써야 한다.

코드

<article>
    <h1>Twitted by 타코작가</h1>
    <header>
        <a href="#">
            <img src="#" alt="타코작가" />
        </a>
        <h2>
            <a href="#">
                타코작가
            </a>
        </h2>
        <dl>
            <div>
                <dt>Username</dt>
                <dd>
                    <a href="#">
                        @taco1704
                    </a>
                </dd>
            </div>
            <div>
                <dt>Upload Time</dt>
                <dd>
                    <a href="#">
                        18h
                    </a>
                </dd>
            </div>
        </dl>
        <button type="button" aria-label="Options">
            <!-- icon -->
        </button>
        <div>
            <button type="button">
                <!-- icon -->
                Not interested in this post
            </button>
            <button type="button">
                <!-- icon -->
                Unfollow @taco1704
            </button>
            <button type="button">
                <!-- icon -->
                Add/remove @taco1704 from Lists
            </button>
            <button type="button">
                <!-- icon -->
                Mute @taco1704
            </button>
            <button type="button">
                <!-- icon -->
                Block @taco1704
            </button>
            <button type="button">
                <!-- icon -->
                View post engagements
            </button>
            <button type="button">
                <!-- icon -->
                Embed post
            </button>
            <button type="button">
                <!-- icon -->
                Report post
            </button>
        </div>
    </header>
    <p>
        양쪽 눈과 코 그리고 귀의 위치에 평행선을 그어주면 얼굴 각도 기울기를 파악할 수 있다       
    </p>
    <footer>
        <button type="button">
            <span class="sr-only">3 replied</span>
            <strong aria-label="Reply">3</strong>
        </button>
        <div>
            <button type="button">
                Retweet
            </button>
            <button type="button">
                Retweet with comment
            </button>
        </div>
        <button type="button">
            <span class="sr-only">100 people liked</span>
            <strong aria-label="Liked">100</strong>
        </button>
        <button type="button">
            <!-- icon -->
            <span class="sr-only">Share</span>
        </button>
        <div>
            <button type="button">
                Copy link
            </button>
            <button type="button">
                Share post via ...
            </button>
            <button type="button">
                Send via Direct Massage
            </button>
        </div>
    </footer>
</article>

마무리하며

sr-only class명과 aria-label 속성의 역할이 같은 거 같아서 둘 사이의 차이점을 잘 모르겠다는 생각이 들었는데 큐앤에이 보니까 스타일의 차이라고 하신다!! (아마 css 배우면 sr-only에 대해 좀 더 잘 이해할 수 있지 않을까...라는 생각?)