12. Gmail Inbox (feat. 테이블...을 사랑해보자)

이 포스트는 김버그님의 김버그의 HTML&CSS 강의 학습 후 메모한 내용을 정리한 것입니다.

출처 edu.goorm.io/learn/lecture/20583/%EA%B9%80%EB%B2%84%EA%B7%B8%EC%9D%98-html-css%EB%8A%94-%EC%9E%AC%EB%B0%8C%EB%8B%A4

김버그의 HTML&CSS는 재밌다 - 구름EDU

 

 

📸 Screenshot 

---

 

 

 

 

 

📝 메모

---

 

0.

테이블... 그렇읍니다.. 테이블....

그냥...네

..모.....

그르타그여...

 

왜냐하면 단순히 한 가지 항목만 반복적으로 나열되는 것이 아니라

그 안에 아이콘, 보낸사람, 제목, 보낸 시간이라는 구조가 계속해서 반복되기 때문.

 

 

 

1.

눈에 안보인다고 마크업을 안 하는 것은 아니다...

<thead>에 <th> 태그들 다 채운 후에

CSS로 없애면 된다.

 

<th> 쭈욱 나열할 때 scope="col"이라는 속성을 주면 더 좋다.

 

 

 

 

 

 

 

2.

<td>
	<div>
		<div>
			<input type="checkbox" id="inbox-1" />
			<label for="inbox-1" class="sr-only">Check the email</label>
 		</div>
		<button type="button">
			<span class="sr-only">Add to favorites</span>
		</button>
	</div>
</td>

- input type="checkbox"로 한 이유는

메일 여러개를 동시에 선택할 수 있기 때문에.

 

- input의 짝꿍 label을 잊지 말 것.

UI에 나타나지 않더라도 스크린 리더를 사용하시는 분들을 위해서 넣어주고

sr-only 클래스를 이용해서 CSS를 이용해서 가리면 된다.

 

- button도 마찬가지.

UI를 보면 아이콘만 단순 나열인데, 

스크린 리더를 사용하는 분들은 이 아이콘이 정확히 어떤 기능을 하는지 알수 없으므로

span을 넣어서 기능 설명을 해주고

이 spann은 sr-only 클래스를 이용해서 CSS로 없애주면 된다.

 

- input checkbox와 button 태그에는

CSS를 이용해서 background image로 체크박스 모양과 별 모양을 넣어준다.

 

 

 

 

3.

<td>
	<a href="#">
		<strong class="sr-only">Read</strong>
		<span>Rate your course: FRONTEND 101 WITH KIMBUG</span>
		<span>
			- Woohyeon. How’s everything going? We want to hear your opnion on...
		</span>
	</a>
 </td>

스크린 리더를 사용하는 분들에게

이 이메일이 이미 읽은 메일인지 안읽은 메일인지 정보를 주기 위해서 

sr-only 클래스를 이용.

 

이메일 아직 안읽었으면 제목을 strong 태그로

이미 읽은 메일이면 그냥 span 태그로