whatisthis?

HTML) HTML 기초 下-(1) (Table/ Media File / Etc) 본문

WEB STUDY/HTML,CSS

HTML) HTML 기초 下-(1) (Table/ Media File / Etc)

thisisyjin 2021. 10. 12. 12:39

17. Table 기본 구조

 

<table>
        <tr>
            <th>테이블 헤더</th>
            <td>테이블 데이터</td>
        </tr>
</table>

 

테이블 태그의 기본 구조는

table>tr>th+td 이다.

 

셀이 헤더에 관련된 것 = th

셀이 데이터에 관련된 것 = td 

 

table row = tr (row는 가로줄)

즉, tr 묶음당 가로줄에 들어갈 데이터를 좌->우 순으로 입력해 주면 됨.

 

예를 들면 다음과 같은 테이블을 만든다고 치자.
작성 순서는 가로줄 기준으로 좌-우 순서로 적어준다.

<table>
        <tr>
            <th>ID</th>
            <th>이름</th>
            <th>나이</th>
        </tr>
        <tr>
            <td>thisis</td>
            <td>김ㅇㅇ</td>
            <td>22</td>
        </tr>
        <tr>
            <td>yjin</td>
            <td>최ㅇㅇ</td>
            <td>31</td>
        </tr>
        <tr>
            <td>injung</td>
            <td>박ㅇㅇ</td>
            <td>18</td>
        </tr>
</table>

실행 결과

 

th 개수만큼 반드시 td를 넣어줘야한다.

즉, 빈칸으로 두더라도, <td></td>는 반드시 입력해야함.

 

th만 있는 tr부분은, <thead>로 다시한번 감싸주고,

아래 부분은 <tbody>로 감싸주면 의미가 명확해진다.

 

테이블 구조화

<thead>

<tbody>

<tfoot> 

 

 

** tfoot 은 테이블 푸터(footer)으로, 주로 '총합'. '평균'등의 값을 나타낼때 따로 구분해줌.

 

 

 

18. Tabel 심화

 

위와 같이 복잡한 테이블을 html 코드로 작성해보자.

 

Reference

 

 

위 테이블은 7행 6열의 테이블이다.

 

 

우선, 구조를

 

table>thead>tr>th*6으로 잡아준 후,

첫 행에서 첫번째 열은 빈칸이므로 나머지를 입력해주면 다음과 같다.

 

** 주의 > table에서 빈칸이라도, 반드시 <td> or <th>는 입력해서 숫자를 맞춰줘야함.

 

<table>
   <thead>
       <tr>
           <th></th>
           <th>월</th>
           <th>화</th>
           <th>수</th>
           <th>목</th>
           <th>금</th>
       </tr>
</thead>

 

헤더 부분이 완성된다.

 

두번째 tr(행)을 보면

'1교시'가 해당 행의 헤더 역할을 하므로 다음과 같이 작성한다.

 

<tr>
    <th>1교시</th>
    <td>왕초보 HTML &amp; CSS</td>
    <td>모각코</td>
    <td>왕초보 HTML &amp; CSS</td>
    <td>모각코</td>
    <td>왕초보 HTML &amp; CSS</td>
</tr>

 

주의>

&나 <, > 등의 기호는 웹브라우저가 헷갈릴 수 있으므로
Escape Code, 즉 Entity Name를 대신 작성해줘야한다.
& &amp;
< &lt;
> &gt;

 

그러나, 사진에서 보면

왕초보 HTML & CSS 의 경우에는 위아래로 두칸을 차지한다. (즉, 셀 병합됨)

 

이것을 html로 작성하려면

rowspan을 이용하여 셀을 합쳐주면 된다.

 

 

그러나, 이때 주의할 점!

rowspan을 이용하여 미리 두칸을 차지했기 때문에

다음 행에서는 해당 열의 td를 생략해줘야한다. (공간을 이미 차지했으므로)

 

 

 

 

다음과 같이 ROWSPAN을 사용한 다음 행의 해당 열은 생략을 해줘야한다.

 

 

그렇지 않으면 이렇게 표가 깨지게 된다.

 

** 참고 >  VScode에서도 ctrl+슬래시(/)로 주석처리 가능!

 

 

잘 해결되었다!

 

위와 같은 방식으로 colspan을 이용해서 테이블을 완성해보자.

 

 

 

<tr>
          <th>1교시</th>
          <td rowspan="2">왕초보 HTML &amp; CSS</td>
          <td>모각코</td>
          <td rowspan="2">왕초보 HTML &amp; CSS</td>
          <td>모각코</td>
          <td rowspan="2">왕초보 HTML &amp; CSS</td>
</tr>
<tr>
          <th>2교시</th>
          <td rowspan="2">JavaScript 스킬업</td>
          <td rowspan="2">JavaScript 스킬업</td>
</tr>
<tr>
          <th>3교시</th>
          <td>JavaScript 시작반</td>
          <td>JavaScript 시작반</td>
          <td>JavaScript 시작반</td>
</tr>
<tr>
          <td colspan="6">점심시간</td>
</tr>
<tr>
          <th>4교시</th>
          <td>SASS 기초반</td>
          <td rowspan="2">HTML &amp; CSS 포트폴리오반</td>
          <td rowspan="2">Open Seminar</td>
          <td rowspan="2">HTML &amp; CSS 포트폴리오반</td>
          <td>SASS 기초반</td>
</tr>
<tr>
          <th>5교시</th>
          <td>모각코</td>
          <td>모각코</td>
</tr>

 

완성,

 

** colspan과 rowspan의 차이

 

row = 행

col (column) = 열 이므로

 

1행과 2행을 합치는것은 rowspan

4열과 5열을 합치는것은 colspan이 된다.

 

두 속성 모두 <td> 또는 <th>에 사용되는 속성이다.

 

Usage: 

It can be used with <td> and <th> element while creating an HTML Table

___

Attribute Values: number 
(Which specify the number of columns/rows that a cell should span.)

 

 

+) 위 코드는 본문 부분이므로, tbody로 감싸주면 된다.

                                                                       

 

** Scope Attribute

https://www.w3schools.com/tags/att_scope.asp

 

HTML scope Attribute

HTML scope Attribute Definition and Usage The scope attribute specifies whether a header cell is a header for a column, row, or group of columns or rows. The scope attribute has no visual effect in ordinary web browsers, but can be used by screen readers.

www.w3schools.com

 

The scope attribute specifies whether a header cell is a header for a column, row, or group of columns or rows.

The scope attribute has no visual effect in ordinary web browsers, but can be used by screen readers.

 

 

scope 속성은

<th> 요소의 속성으로 입력할 수 있음.

 

 

<tr>
     <th scope="col"></th>
     <th scope="col">월</th>
     <th scope="col">화</th>
     <th scope="col">수</th>
     <th scope="col">목</th>
     <th scope="col">금</th>
</tr>
<th scope="row">1교시</th>

-> 모든 th 요소에 scope 속성을 입력해줌.

 

 

** 각 수업에 대해 같은 수업에 같은 class명을 부여하자.

 

예> 왕초보 html & CSS 는 html-basic 

모각코는 coding과 같이 클래스명으로 구분해주자.

 

 

<table>
        <thead>
            <tr>
                <th scope="col"></th>
                <th scope="col">월</th>
                <th scope="col">화</th>
                <th scope="col">수</th>
                <th scope="col">목</th>
                <th scope="col">금</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">1교시</th>
                <td rowspan="2" class="html-basic">왕초보 HTML &amp; CSS</td>
                <td class="coding">모각코</td>
                <td rowspan="2" class="html-basic">왕초보 HTML &amp; CSS</td>
                <td class="coding">모각코</td>
                <td rowspan="2" class="html-basic">왕초보 HTML &amp; CSS</td>
            </tr>
            <tr>
                <th scope="row">2교시</th>
                <td rowspan="2" class="js-skill">JavaScript 스킬업</td>
                <td rowspan="2" class="js-skill">JavaScript 스킬업</td>
            </tr>
            <tr>
                <th scope="row">3교시</th>
                <td class="js-basic">JavaScript 시작반</td>
                <td class="js-basic">JavaScript 시작반</td>
                <td class="js-basic">JavaScript 시작반</td>
            </tr>
            <tr>
                <th colspan="6" scope="row">점심시간</td>
            </tr>
            <tr>
                <th scope="row">4교시</th>
                <td class="sass-basic">SASS 기초반</td>
                <td class="portfolio" rowspan="2">HTML &amp; CSS 포트폴리오반</td>
                <td class="seminar" rowspan="2">Open Seminar</td>
                <td class="portfolio" rowspan="2">HTML &amp; CSS 포트폴리오반</td>
                <td class="sass-basic">SASS 기초반</td>
            </tr>
            <tr>
                <th scope="row">5교시</th>
                <td class="coding">모각코</td>
                <td class="coding">모각코</td>
            </tr>
        </tbody>

    </table>

최종 테이블 코드 완성본은 다음과 같다.

이제 class 명으로 스타일을 적용하거나 하는 것은 CSS를 통해 진행하자.

 

완성!

 

강의 reference인 github에 작성된 style.css를 이용하였다.

style.css를 링크하기 위해서

 

html 문서 <head> 태그 내에

 

<link rel="stylesheet" href="style.css">

와 같이 입력했다.

 

 

 

_______ 생략가능 _______

 

** CSS 파일을 한번 살펴보자.

 

 

 

_________________________


19. 미디어 파일 Media

 

1> 이미지

<img src="" alt="" />

 

2> 오디오

 

방법1. src 속성 이용

<audio src="./assets/audios/thisisyjin.mp3" controls></audio>

반드시 controls / autoplay (+loop) 속성을 입력하자.

 

controls 플레이어로 수동 재생
autoplay 자동 재생

 

 

 

방법2. source 태그 이용

<audio>
    <source src="./assets/audios/thisisyjin.wav" type="audio/wav">
    <source src="./assets/audios/thisisyjin.mp3" type="audio/mpeg">
    <source src="./assets/audios/thisisyjin.ogg" type="audio/ogg">
</audio>

- source태그를 이용할 때에는 type 속성을 꼭 입력해주는게 좋다.

 

http://tcpschool.com/html-tag-attrs/source-type

 

코딩교육 티씨피스쿨

4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등

tcpschool.com

 

 

방법 2처럼 하는 이유는?

for. user-friendly.

 

만약, 사용자의 브라우저가 wav 형태를 지원하지 않는다면?

위 코드는 wav가 실행이 안되면 mp3로 대체하여 재생하도록 할 수 있다.

 

 

 

 

 

** caniuse.com 사이트에서 해당 요소가 웹브라우저별로 사용 가능한지 알 수 있음

 

https://caniuse.com

 

Can I use... Support tables for HTML5, CSS3, etc

 

caniuse.com

예> wav 파일은 IE에서 사용 불가

 

 

 

3> 비디오

 

오디오와 같음. 두가지 방법 중에 이용하면 되고, 

controls나 autoplay를 이용해줘야함.

 

방법1. src 속성 이용

<video src="" controls></video>

방법2. source 태그 이용

<video>
    <source src="./assets/audios/thisisyjin.mp4" type="video/mp4">
    <source src="./assets/audios/thisisyjin.mov" type="video/mp4">
</video>

- 이때도 type을 명시해줘야한다.

 

 

 

4> iframe 

 

html 문서 내에 html문서를 임베디드(embeded)하고 싶을 때!

 

예>

+) css를 이용하여 width와 height는 조정해주었음.

 

 

iframe을 주로 쓰는 경우-

유튜브 등 영상을 임베디드 할때 주로 쓴다.

 

 

 

유튜브 영상의 iframe 태그 복사해오는법!

 

 

 

'WEB STUDY > HTML,CSS' 카테고리의 다른 글

HTML) HTML 기초 下-(2) ( Doctype , Structure / Style, Script / Meta )  (0) 2021.10.15
CSS3 - flex (positioning)  (0) 2021.10.12
HTML - 종료태그 생략 가능한 요소  (0) 2021.10.08
HTML) HTML 기초 中 ( Quotation / Div, Span / Form / Table )  (1) 2021.10.04
HTML) HTML 기초 上 (Headings / Paragraph / Emphasis / Anchor / Image / List / Quoatation )  (0) 2021.10.04
'WEB STUDY/HTML,CSS' Related Articles more