멋사 프론트엔드 스쿨 2기 TIL (04.05)

멋사로고

 

🚀 Tabular data

---

<table>

• table 태그는 테이블을 생성할 때 사용(표 만들 때!)
• table의 마크업 구조도

테이블 마크업

<caption>

• caption은 테이블의 제목이나 설명을 의미, 테이블 요소의 첫번째 자식으로 사용!! (legend와 비슷)
• caption은 꼭 넣어주는게 좋다 접근성 측면이나, SEO 측면이나!

 

<thead>, <tbody>, <tfoot>

• table 내부의 header, main, footer의 느낌이라고 보면 될 것 같다. 
• 보통 tfoot에는 total(소계, 합계)값을 사용한다.

 

<tr>, <th>, <td>

• tr 태그는 테이블의 행을 나눌 때 사용
  • tr에는 넓이와 높이를 줄 수 없다.
• td 태그는 tr 태그로 나눈 행에서 셀을 분리할 때 사용한다. 텍스트, 이미지, 목록, 테이블 등을 포함할 수 있다.
• th 태그는 행, 열의 머리말을 나타내는 데 사용한다. 글씨를 굵게해주고 가운데 정렬을 해준다.
  • td 또는 th 태그 요소에 colspan 속성을 사용하면 열간 병합(가로)을 할 수 있다. rowspan 속성은 행간 병합(세로)을 할 수 있다. 병합하고 싶은 셀의 개수를 지정해주어야한다.

 

<colgroup>, <col>

• colgroup과 그 자식 요소로 쓰이는 col 요소를 통해 한 열에 공통적인 스타일을 주는것도 가능하다.

 

<scope>

• th 요소에 scope 속성을 사용해서 td와의 연결 관계를 설정 할 수 있다.
  • row : 행 방향 진행, 내용의 흐름이 왼쪽에서 오른쪽으로
  • col : 열 방향 진행, 내용의 흐름이 위에서 아래로
• 브라우저에게 표의 흐름을 알려주는 역할
• SEO, 스크린리더를 위해서 사용
• 레이아웃이 변경되는것은 아니다.

 

🦁  Table 과제 (멋사 달력 만들기)

---

링크 : https://alstjr5949.github.io/tablePractice/

소스코드 : https://github.com/alstjr5949/tablePractice

 

calender

코드 피드백, 디자인 피드백 언제나 대환영!!!!! ㅎㅎ

 

🦁  퀴즈 과제

---

퀴즈

1. 4개
2. 2개
3. 3개
4. 2개
5. 3개
6. 3개
7. 1개

정답

🍓 하루의 회상

---

• 오늘도 역시 재밌는 멋사 수업 ㅎㅎ 오늘 테이블 배웠는데 근데 우주 다녀옴~~ 왤케 어려운겨~~
• 그나저나 프로젝트도 해야하는데.. 어쩐담 ㅜㅜ
• 아 몰라~~ 화이탱