개발 공부 기록하기

Section 5. 폼(Form)과 테이블(table)(1) 본문

프밍/HTML

Section 5. 폼(Form)과 테이블(table)(1)

태영(泰伶) 2022. 11. 20. 21:58

이번 섹션에 포함된 강의명은 다음과 같다.

(강의에서 제공된 번역 내용을 기반으로 작성하지만, 간혹 오역으로 판단될 경우에는 내 해석으로 대체할 수 있음..!!)

순서 강의명 소요 시간

중요도

(필수crucial/중요important/선택nice to have)
01 HTML 테이블 개요
Introducing HTML Tables		 4' 08" 중요
02 테이블 기초: <table>, <tr>, <td>, <th>
Tables: TR, TD & TH Elements		 9' 11" 필수(어려움)
03 테이블 영역: <thead>, <tbody>, <tfoot>
Tables: Thead, Tbody & Tfoot Elements		 2' 15" 중요(어려움)
04 테이블 Colspan & Rowspan
Tables: Colspan & Rowspan		 4' 14" 선택
(지금 단계에서는 어렵지만 알아두면👍)
05 코딩 연습 5: Table Practice Exercise
Coding Practice 5: Table Practice Exercise		 - -
06 폼(Form) 요소 기초
The Form Element		 9' 18" 필수
07 일반적인 입력 형식
Common Input Types		 5' 27" 필수
08 레이블
The All-important Label		 6' 52" 필수
09 버튼 요소
HTML Buttons		 5' 17" 필수
10 이름 속성
The Name Attribute		 5' 26" 중요
11 구글과 레딧 검색하기
"Hijacking" Google & Reddit's Search		 6' 25" 중요
12 라디오 버튼, 체크박스와 선택창
Radio Buttons, Checkboxes & Select Drop-down		 10' 54" 중요
13 범위 및 텍스트 영역
Range & Text Area		 7' 02" 중요
14 코딩 연습 6: Forms Practice Exercise
Coding Practice 6: Forms Practice Exercise		 - -
15 HTML5 폼의 유효성 검사
HTML5 Form Validations		 9' 27" 중요
16 마라톤 선수 등록 양식 만들기: 문제/정답
Creating A Marathon Registration Form: Quiz / Solution		 15' 05" -

 

 

01. HTML 테이블 개요

     2차원의 행row과 열column 구조로 되어있는 데이터가 묶인 테이블table로

     일부 데이터를 근사하고 명확하게 표시하는 방법으로 많이 사용된다.

     그러나 모든 데이터에 적합한 구조는 아니다.

 

     1990~2000년대에는 웹 사이트 *레이아웃layout에 이 표 형태가 많이 사용되었다.

          * 레이아웃: 콘텐츠를 이동하거나 배치하는 것

 

     하지만 이제는 더 이상 그렇게 하면 안 된다.

     표는 만드는 사람이 표의 형식을 빌려 표시하고 싶은 정보를 담은

     표 데이터와 행, 그리고 열에 의해서 만들어져야 한다.

     (단지 콘텐츠를 레이아웃하기 위해서 사용하는 게 아니다!)

 

 

 

 

 

02. 테이블 기초: <table>, <tr>, <td>, <th>

     표에 들어가거나 표에 넣을 수 있는 요소는 아주아주 많다! (MDN 페이지 참조.)

        그래서인지 강의에 띄운 화면에 "WTF why are there so many elements just to make a table?"이라고 첫마디부터 비속어가 쓰여있었다.... 난 또 WTF가 뭔 말인가 했네..ㅋㅋㅋㅋㅋ

 

     표를 만드는 요소들에 어떠한 콘텐츠라도 넣지 않는다면, 요소 자체로는 하는 역할이 거의 없다.

 

     <td>

     td는 table data cell 또는 table data의 줄임말이다. 여기서 d는 '단일 셀'을 말한다.

     즉, 데이터를 포함한 '표 안에 있는 단일 셀'을 의미하는 것이다.

 

     그래서 아래에서 다룰 <tr>을 쓰지 않고 연달아 <td>를 쓰기만 하면

     가로로 모든 데이터가 나열될 뿐 여러 층의 표가 만들어질 수 없다.

 

 

     <tr>

     tr은 table row의 줄임말이다.

     표 안의 데이터들의 행을 구분해주기 위해서 한 줄로 묶고 싶은 <td>들을 <tr> 안에 넣어주면 된다!

 

 

     <th>

     <td>와 <tr>만으로 데이터는 나열할 수 있으나, 각각의 데이터가 무엇을 의미하는지는 알 수 없다.

     각각의 데이터에 제목을 붙여주는 작업이 필요한데, 이를 <th>가 수행할 수 있다. 즉, <th>는 헤더header를 정의한다.

     <td> 요소 대신에 "니가 header야!" 알려주는 의미로 <th>를 사용한다.

     예전에 Do it 책으로 공부할 때 <tr> 대신에 써보는 실수를 했었는데 씨알도 안 먹혔다...ㅎㅎ.....

 

수업에서 다룬 예시 만들어본 것..ㅋㅋ 표 테두리도 배열도 엉망이지만 그건 CSS의 영역이니까 일단 PASS!

 

 

 

 

03. 테이블 영역: <thead>, <tbody>, <tfoot>

     표에 섹션section을 추가하는 3가지 요소인 <thead>, <tbody>, <tfoot>.

     이 요소들은 표를 논리적인 섹션으로 분리하는 작업 외에는 하는 일이 없다.

     tag의 이름으로도 알 수 있듯 어디가 머리고 몸통이고 발인지 알려주는 셈이다.

 

     표에 footer가 없는 경우도 많다.

     사실상 주요 데이터 세트의 일부는 아니지만 footer는 누계나 평균 등을 나타내는 데 자주 쓰인다.

 

 

     <thead>의 경우에는

출처: Wikipedia 'List of largest cities'

     이런 식으로 2개 이상의 행이 표의 헤더를 구성할 때 유용하게 쓰인다.

 

 

 

     이렇게 섹션을 나누어 주는 건

     ① 시맨틱 마크업이 잘 되도록 작성하고,

     ② 접근성을 좋게 만들기 위한 (특히 복잡한 표의 경우 더더욱 접근성이 개선될 필요가 ↑↑↑)

 

     크게 두 가지 목적이 있다.

 

 

 

 

 

04. 테이블 Colspan & Rowspan

     여러 열이나 행에 걸친 셀을 만드는 방법으로 colspan과 rowspan이 있다.

     일종의 셀 병합으로 이해하면 편할 것 같다.

 

     colspan

     옆으로 맞붙어 있는 2개 이상의 셀을(열과 열을) 합칠 때 사용하는 속성이다.

 

     rowspan

     위아래로 맞붙어 있는 2개 이상의 셀을(행과 행을) 합칠 때 사용하는 속성이다.

 

 

     위에서 <td>, <tr>, <th>를 다뤄볼 때 만들어본 표에 있는 데이터 중, 무게를 나타내는 데이터가 두 종류가 있으니,

     이를 별도의 열로 나누어 표를 만들고 싶을 때 이렇게 하면 된다.

<!DOCTYPE html>
   <html lang="ko">
      <head>
         <meta charset="UTF-8" />
         <title>Heaviest Birds Table</title>
      </head>
      <body>
         <h1>Heaviest Birds</h1>
         <table>
            <thead>
               <tr>
                  <th rowspan="2">Animal</th>
                  <th colspan="2">Average Mass</th>
                  <th rowspan="2">Flighted</th>
               </tr>
               <tr>
                  <th>(kg)</th>
                  <th>(lb)</th>
               </tr>
            </thead>
            <tbody>
               <tr>
                  <td>Ostrich</td>
                  <td>104</td>
                  <td>230</td>
                  <td>No</td>
               </tr>
               <tr>
                  <td>Somali Ostrich</td>
                  <td>90</td>
                  <td>200</td>
                  <td>No</td>
               </tr>
            </tbody>
         </table>
      </body>
   </html>

↓

코드에는 표 테두리에 대한 스타일을 별도로 설정하지 않았으나, 셀 병합이 잘 보일 수 있도록 결과 화면을 캡처할 때는 일부러 테두리를 만들어 넣었다^^;;

 

     이렇게, colspan과 rowspan을 쓰고 나면 그 영향력이 미치는 행과 열에 대한 요소는 입력하지 않는다!

 

     즉, header 영역으로 분류되는 kg, lb가 포함된 행에는, 그 윗 행에 두 번 쓰인 rowspan이 영향을 미치므로

     Animal열과 Flighted 열에 해당하는 데이터는 쓰지 않는 것이다.

 

     마찬가지로 한 번 쓰인 colspan의 영향력 때문에, 맨 첫 행의 <th> 요소가 3개밖에 안 되는 것이다.

     (아래 데이터들로 보면 4열이어야함에도 불구하고)

          아... 설명 진짜 괴발개발.....ㅋㅋㅋㅋㅋ

 

 

 

 

 

05. 코딩 연습 5: Table Practice Exercise

     위의 표를 만들어내는 것이 이번 과제의 미션!

 

     뭐, 그닥 안 어렵네!

             여러 책과 강의로 연습했다고 좀 우쭐했나보다... 겸손 좀 하란 말이야!

 

<table>
    <thead>
        <tr>
            <th>Subscription</th>
            <th>Price</th>
            <th>Support</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Free</td>
            <td>Free</td>
            <td>N/A</td> 
        </tr>
        <tr>
            <td>Personal</td>
            <td>$9.99</td>
            <td>Weekdays</td>
        </tr>
        <tr>
            <td>Business</td>
            <td>$49.99</td>
            <td>24/7</td>
        </tr>
    </tbody>
</table>

↓

완성ㅎㅎ

 

저작자표시 비영리 변경금지

'프밍 > HTML' 카테고리의 다른 글

Section 5. 폼(Form)과 테이블(table)(2)  (1) 2022.11.27
Section 4. HTML의 다음 단계(2)  (0) 2022.11.17
Section 4. HTML의 다음 단계(1)  (0) 2022.11.15
Section 3. HTML 기초(3)  (0) 2022.11.12
Section 3. HTML 기초(2)  (0) 2022.11.12
'프밍/HTML' Related Articles more
Comments