프밍/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>

↓

완성ㅎㅎ

 

저작자표시 비영리 변경금지 (새창열림)