본문 바로가기
MSA-Training/Frontend

DAY. 03

by domsam 2025. 12. 3.
반응형

 

ch03/tabletag.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        table { border-collapse: collapse; }
        td { border: 1px solid #abc; padding: 10px; text-align: center; width:30px; }
    </style>
    <title>tabletag.html</title>
</head>
<body>
    <table>       
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>4</td>
            <td>5</td>
            <td>6</td>
        </tr>
        <tr>
            <td>7</td>
            <td>8</td>
            <td>9</td>
        </tr>
        <tr>
            <td>10</td>
            <td>11</td>
            <td>12</td>
        </tr>
        <caption>1에서 9까지의 숫자들</caption>
    </table>
</body>
</html>

 

 

1 2 3
4 5 6
7 8 9
10 11 12
1에서 9까지의 숫자들

 

표를 그릴 때 사용하는 태그이다.

<tr> 태그는 표의 행을 만드는 태그이고, <td>는 행에서 열을 만드는 태그이다.

모든 행의 열 갯수는 동일해야 한다.

 

10진수 0~9
2진수 0, 1
8진수 0~7
16진수 0~9, A~F

비트맵, 벡터
RGB ( Red, Green, Blue )
CMYK ( Cyan, Magenta, Yellow, Key plate )

ch03/tableareatag.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        table { border-collapse: collapse; }
        td { border: 1px solid #abc; padding: 10px; text-align: center; width:30px; }
    </style>
    <title>tableareatag.html</title>
</head>
<body>
    <table>
        <caption>웹 개발 공부 기록</caption>
        <thead>
            <tr>
                <th scope="col">과목</th>
                <th scope="col">월</th>
                <th scope="col">화</th>
                <th scope="col">수</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">HTML</th>
                <td>60분</td>
                <td>60분</td>
                <td>0분</td>
            </tr>
            <tr>
                <th scope="row">CSS</th>
                <td>0분</td>
                <td>30분</td>
                <td>60분</td>
            </tr>
            <tr>
                <th scope="row">JS</th>
                <td>0분</td>
                <td>0분</td>
                <td>60분</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <th scope="row">총 시간</th>
                <td>60분</td>
                <td>90분</td>
                <td>120분</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

 

<thead>, <tbody>, <tfoot>, <th> 태그는 시맨틱 태그이다. 

 

<thead>, <tbody>, <tfoot> 태그는 그룹화하여 개발자가 코드를 읽을 때 명확하게 구분을 해주는 역할을 하기도 하고 상위 태그에 속성을 부여하는 경우 하위 태그까지 일괄적으로 적용이 가능하다. 

 

<th>태그는 표의 제목 의미를 가지는 태그이다. scope는 제목의 방향성을 의미한다. scope="row"는 행 방향 내용들의 제목을 의미하고 scope="col"은 열 방향 내용들의 제목을 의미한다.

 

ch03/tablespantag.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        table { border-collapse: collapse; }
        td { border: 1px solid #abc; padding: 10px; text-align: center; }           
    </style>
    <title>tablespantag.html</title>
</head>
<body>
    <table>
        <tr>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
        </tr>
        <tr>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
        </tr>
        <tr>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
        </tr>
        <tr>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
        </tr>
    </table>
</body>
</html>

 

1 1 1 1
1 1 1 1
1 1 1 1
1 1 1 1

 

 

위 상태에서 아래 상태로 소스를 수정해보자.

 

1 col 2 1
row3 1 1 1
1 col2
row2
1

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        table { border-collapse: collapse; }
        td { border: 1px solid #abc; padding: 10px; text-align: center; }           
    </style>
    <title>tablespantag.html</title>
</head>
<body>
    <table>
        <tr>
            <td>1</td>
            <td colspan="2">col 2</td>
            <td>1</td>            
        </tr>
        <tr>
            <td rowspan="3">row3</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
        </tr>
        <tr>     

            <td>1</td>
            <td colspan="2" rowspan="2">col2<br>row2</td>            
        </tr>
        <tr>    
                    
            <td>1</td>            
        </tr>
    </table>
</body>
</html>

 

colspan 속성은 가로 방향의 셀을 병합하고, rowspan 속성은 세로 방향의 셀을 병합할 때 사용한다.

 

테이블 연습
테이블 연습문제

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        table { border-collapse: collapse; }
        td { border: 1px solid #abc; padding: 10px; text-align: center; }           
    </style>
    <title>tablemission2.html</title>
</head>
<body>
    <table>
        <caption>표예제</caption>
        <tr>
            <td colspan="6">한국의 차</td>
        </tr>
        <tr>
            <td rowspan="6">뿌리차</td>
            <td>인삼차</td>
            <td rowspan="9">과일차</td>
            <td>수정과</td>
            <td rowspan="5">잎차</td>
            <td>뽕잎차</td>
        </tr>
        <tr>
            <td>당귀차</td>
            <td>유자차</td>
            <td>감잎차</td>
        </tr>
        <tr>
            <td>생강차</td>
            <td>구기자차</td>
            <td>솔잎차</td>
        </tr>
        <tr>
            <td>칡차</td>
            <td>대추차</td>
            <td>극화차</td>
        </tr>
        <tr>
            <td>둥글레차</td>
            <td>오미자차</td>
            <td>이슬차</td>
        </tr>
        <tr>
            <td>마차</td>
            <td>매실차</td>
            <td rowspan="4">기타</td>
            <td>두충차</td>
        </tr>
        <tr>
            <td rowspan="3">곡물차</td>
            <td>보리차</td>
            <td>모과차</td>
            <td>영지버섯차</td>
        </tr>
        <tr>
            <td>옥수수차</td>
            <td>산수유차</td>
            <td>귤강차</td>
        </tr>
        <tr>
            <td>현미차</td>
            <td>탕자차</td>
            <td>쌍화차</td>
        </tr>
    </table>
</body>
</html>

 

 

표예제
한국의 차
뿌리차 인삼차 과일차 수정과 잎차 뽕잎차
당귀차 유자차 감잎차
생강차 구기자차 솔잎차
칡차 대추차 극화차
둥글레차 오미자차 이슬차
마차 매실차 기타 두충차
곡물차 보리차 모과차 영지버섯차
옥수수차 산수유차 귤강차
현미차 탕자차 쌍화차

 

 

emmet 기능을 이용할 때, tab 키로 실행이 안 되는 경우

 

작성한 emmet 문법을 모두 선택한 후 [Ctrl]+[Shift]+P 를 눌러 

 

 

Emmet: Expand Abbreviation 을 선택하면 Emmet 강제 실행이 된다.

 

 

혹은 탭으로 바로 실행하고 싶으면 설정을 하면 된다. 

톱니바퀴 > Settings > Extensions > Emmet > Trigger Expansion On Tab 체크 활성화

emmet 탭 강제 실행

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        table { border-collapse: collapse; }
        td, th { border: 1px solid #abc; padding: 10px; text-align: center; }           
        .weekend { background-color: #eee; }
        .color_red { color: red; }
    </style>
    <title>colgrouptag.html</title>
</head>
<body>
    <!-- p.111 -->
    <pre>emmet기능: table>(thead>tr>th[scope=col]*8)+(tbody>tr*4>td{_}*8)</pre>
    <table>        
        <colgroup>
            <col class="weekend"> <!-- 1열 선택. 그 열의 모든 셀에 weekend 클래스 값 적용 -->
            <col span="5"> <!-- 2~6번째 열 선택 -->
            <col class="weekend"> <!-- 1열 선택. 그 열의 모든 셀에 weekend 클래스 값 적용 -->
        </colgroup>
        <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>                
                <th scope="col">토</th>                
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>_</td>
                <td>_</td>
                <td>_</td>
                <td>_</td>
                <td>_</td>
                <td>_</td>
                <td>_</td>
            </tr>
            <tr class="color_red">
                <td>_</td>
                <td>_</td>
                <td>_</td>
                <td>_</td>
                <td>_</td>
                <td>_</td>
                <td>_</td>
            </tr>
            <tr>
                <td>_</td>
                <td>_</td>
                <td>_</td>
                <td>_</td>
                <td>_</td>
                <td>_</td>
                <td>_</td>
            </tr>
            <tr class="color_red">
                <td>_</td>
                <td>_</td>
                <td>_</td>
                <td>_</td>
                <td>_</td>
                <td>_</td>
                <td>_</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

 

emmet기능: table>tbody>(tr>td{_}*7)*4
일 월 화 수 목 금 토
_ _ _ _ _ _ _
_ _ _ _ _ _ _
_ _ _ _ _ _ _
_ _ _ _ _ _ _

 

<colgroup> 태그는 테이블의 열을 선택하여 스타일을 적용할 수 있는 기법이다.

<col>만 적으면 1열을 선택한 것이고 <col span="2">는 2열을 선택하게 된다. 선택한 열에 class 혹은 인라인 스타일을 적용할 수 있다.

 

 

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

'MSA-Training > Frontend' 카테고리의 다른 글

DAY. 06  (0) 2025.12.08
DAY. 05  (0) 2025.12.05
DAY. 04  (0) 2025.12.04
DAY. 02  (0) 2025.12.02
DAY. 01  (0) 2025.12.01

관련글

티스토리툴바