Gmail Inbox

실습 화면

---

피드백

table 태그로 마크업

처음에는 input 태그의 checkbox 타입 안에 모든 텍스트를 다 쓸 생각을 했는데, 버그님은 table 태그를 활용해서 좀 더 시맨틱하게 마크업하셨다!

---

thead + sr-only

	<thead class="sr-only">
            <tr>
                <th scope="col">
                    Actions
                </th>
                <th scope="col">
                    Sender
                </th>
                <th scope="col">
                    Title
                </th>
                <th scope="col">
                    Timestamp
                </th>
            </tr>
        </thead>

sr-only는 오직 스크린 리더기에서만 볼 수 있다는 의미인데 텍스 버그님이 css로 따로 클래스명을 지정하셨다. 테이블 헤더가 안 보인다고 해서 마크업을 안 하는게 아니라 따로 마크업한 후 css로 안 보이게 처리하면 되는 로직을 기억하자.

---

tbody

<td>
                    <div class="inbox-actions">
                        <div class="inbox-checkbox">
                            <input type="checkbox" id="inbox-1" />
                            <label for="inbox-1" class="sr-only">Select this email</label>
                        </div>
                        <button type="button" class="inbox-star">
                            <span class="sr-only">Add to Favorites</span>
                        </button>
                    </div>
                </td>
                <td>
                    <a href="#">
                        <strong class="sr-only">Unread:</strong>
                        <strong>
                            Rate your course: FRONTEND 101 WITH KIMBUG -
                        </strong>
                        <span>
                            Woohyeon. How’s everything going? We want to hear your opnion on...              
                        </span>
                    </a>
                </td>

• 테이블 데이터의 1 / 3열만 가져왔다. 체크박스 타입을 사용할 때 라벨을 붙이는 게 좀 더 사용성 개선에 좋은데, 이 라벨 또한 css로 안 보이게 처리할 수 있다고 하신다. (버튼에 대한 설명, 데이터 3열에서 Unread에 해당하는 설명 또한 마찬가지)

---

마무리하며

html 훈련 강의가 이제 2개 남았는데 오디오 / 비디오 태그 사용하는 거라 그리 어려워보이지 않아서 이게 제일 힘들었던 거 같다 ㅠㅠㅠㅠ 처음에 이해가 잘 안 가서 강의를 5번 듣고 피드백을 보지 않고 스스로 구현하기까지 5번 정도 반복했던 거 같다. 계속 반복하니까 로직의 흐름이 어느 정도 잡혀가는 거 같아 나 스스로가 점점 발전해 나간다는 걸 느끼고 있다 ㅎㅎ 아마 2회독하면 점점 기틀이 잡혀갈 거 같은 느낌이 든다.