[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 26회차 미션

13 * 2 = 26, 그리고 13일의 금요일 💥

패스트캠퍼스 프론트엔드 올인원 with React 강의 수강 26일차입니다!

오늘부터 8번째 커리큘럼, 'HTML/요소- 표 콘텐츠 & 양식' 공부를 시작했어요.

실무에서는 표를 만들 때 쉽게 만드는 방법으로 <div> 태그를 사용했는데

이 기회에 <table> 태그도 잘 활용하고 싶습니다.

 

오늘은 01~02. 표 콘텐츠 - TABLE / TH / TD 태그에 대하여 공부했어요.

---

<Today I Learned>

<table>

🔸 테이블(표) 생성

🔸 display: table, block과 비슷한 개념

 

<tr>

🔸 Table Row(행) 생성

🔸 display: table-row

 

<th>

🔸 Table Head(머리글 칸) 생성

🔸 display: table-cell

 

🔸 속성 (1) abbr : 열에 대한 간단한 설명 (중요도 ⬇)

🔸 속성 (2) scope : 무엇의 '머리글 칸'인지 명시 / 기본값=auto, 값: col(자신을 포함한 열), colgroup(전체 열), row(자신을 포함한 행), rowgroup(전체 행), auto / (중요도 ⬇)

 

"일부 보조 기술이 잘못된 범위를 유추하는 경우도 있기 때문에,
범위를 지정하는 것이 사용자 경험에 도움이 될 수도 있습니다.
복잡한 표에서는 범위를 명시해서 특정 헤더와 연관된 칸에 대한 정보를 제공할 수 있습니다."

출처: <table> MDN (https://developer.mozilla.org/ko/docs/Web/HTML/Element/table)

 

🔸 속성 (3) headers : 관련된 하나 이상의 다른 머리글 칸의 id 속성의 값을 headers의 값으로 가짐

🔸 속성 (4) colspan : 기본값=1, n개 열 병합

🔸 속성 (5) rowspan : 기본값=1, n개 행 병합

 

<td>

🔸 Table Data 생성

🔸 display: table-cell

 

🔸 속성 (1) headers : th의 id 속성 값을 값으로 가짐

🔸 속성 (2) colspan : 기본값=1, n개 열 병합

🔸 속성 (3) rowspan : 기본값=1, n개 행 병합

---

학습 내용 출처 : https://heropy.blog/2019/05/26/html-elements/

한눈에 보는 HTML 요소(Elements & Attributes) 총정리

강의 링크: https://bit.ly/3m0t8GM