TIL : 웹퍼블리싱 HTML 6회 (12,13) [완]

배움 __IL/addtionalFrontEnd

TIL : 웹퍼블리싱 HTML 6회 (12,13) [완]

Mo_bi!e 2023. 2. 4. 14:04

I. 표 태그 (12)

학습목표

격자형 콘텐츠를 표현하는 태그로 오랫동안 많이 사용해 오던 태그이다. 최근에는 사용률이 조금 적어지기는 했지만 반드시 알고 있어야 할 태그이다.

격자형 태그 사용하기
가로/세로 방향으로 셀 병합하기

1. 표(테이블) 태그 (46)

이전에 우리는 컨텐트 감싸는 내용 중 5가지를 잡아라 제목,문장,목록,표,폼 이냐 이다.

우리는 폼까지 이야기했는데 표는 아직 설명안했다.

가장많이 사용하는것이다 테이블은 격자형이다.

테이블은 격자형의 컨텐트를 가지는 컬럼이 여러개인 목록을 만들 때 이다. (emmet snippets)

table>tr*3>td*4

table 태그안에 tr태그 3개, td태그 4개를 하는 방법이다

<table border="1">
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

그런데 안보인다. CSS로 해야하는데 나중에 해보자 일단 다른방식으로 접근 해 보자

그래도 작게 보인다 왜냐하면 테이블의 크기는 안에 컨텐트의 크기로 결정되기 때문이다.

숫자를 채워주면 이렇게된다.

두자리수면은 이만큼 늘어난다.

<tr> 은 table row를 의미하고

<td> 는 table data를 의미한다.

이경우 순서는 tr이 먼저여야한다.

왜냐하면 td가 결국 data이기 때문에 컨텐트를 넣을 수가 있다.

한번씩 데이터가 무슨방향인지 설명해야한다

테이블안에는 <thead> 나 <tbody>가 들어와야하고 다른 것이 들어오면안된다.

<tbody>는 와도되고 안와도 된다. 이거는 입력안해도 저절로 넣어준다.

바디 헤드가 개발자 툴에서 구분이 된다

위 테이블에서 1,5,9 는 해당 row에서 대표가 되고싶어한다

이런 경우 표현을 하기위한것을 <th> 를 한다 이거는 데이터 헤드로 볼 수있다.

<table border="1">
    <tr>
        <th>번호</th>
        <td>제목</td>
        <td>작성자</td>
        <td>조회수</td>
    </tr>

    <tr>
        <th>1</th>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
    <tr>
        <th>5</th>
        <td>6</td>
        <td>7</td>
        <td>8</td>
    </tr>
    <tr>
        <th>9</th>
        <td>10</td>
        <td>11</td>
        <td>12</td>
    </tr>
</table>

이렇게 하면 된다.

2. 표 테이블 Cell 병합과 Col 그룹 (47)

(1) <tfoot>

이렇게 해서 표현은 가능한데

(2) colcpan

이런 방식으로 첫번째 컬럼으로만 데이터가 가서 여기만 넓어졌다

이런경우 내가 몇칸을 쓰고싶은지 말해야한다.

<tfoot>
    <tr>
        <td colspan="4">저작권: 반방한테있음</td>
    </tr>

</tfoot>

colspan 을 이용하면된다. 4를한만큼 4칸을 쓴다

colspan은 꼭 tfoot 에 있을 필요는 없다.

(3) rowspan

<tr>
    <th>1</th>
    <td>2</td>
    <td>3</td>
    <td rowspan="3">4</td>
</tr>

rowspan을 쓰면 2개3개 4가 쓰면 방이 없다. 그래서 8,12가 밀려버린다

웹페이지의 공지사항처럼 새로운것으 들어왔을 때 안밀리겠끔도 할수있다

차후에 이런방식으로도 짤 수있는것이 좋다

thead가 기본적으로 층이 2개이다.

여기서 Name Id Balance 는 row가 2개인 상황이다 .

membership dates는 col이 2개이다.

<table border="1">

    <tr>
        <th rowspan="2">NAME</th>
        <th rowspan="2">ID</th>
        <th colspan="2">멤버십</th>
        <!-- <th >4</th> -->
        <th rowspan="2">balance</th>
    </tr>

    <tr>
        <!-- <th></th> -->
        <!-- <th></th> -->
        <th>joined</th>
        <th>canceled</th>
        <!-- <th></th> -->
    </tr>

    <tr>
        <td>김</td>
        <td>j</td>
        <td>1</td>
        <td>4</td>
        <td>7</td>
    </tr>
    <tr>
        <td>재</td>
        <td>y</td>
        <td>2</td>
        <td>5</td>
        <td>8</td>
    </tr>
    <tr>
        <td>영</td>
        <td>m</td>
        <td>3</td>
        <td>6</td>
        <td>9</td>
    </tr>

</table>

특히 헤드부분에 span을 할때 먼저 헤드의 컨텐트를 넣은 뒤에 span을 하면 수월하다

직접 해보면 이렇게 전개된다.

(3) caption

테이블에 다가 캡션을 달수도있다.

그런데 밑에있는거 달리 위에 있다. 이런것은 CSS에서 해결이 가능하다

II. Entity와 기타태그 (13)

학습목표

마지막으로 콘텐츠를 표현할 때 특수기호를 대신하는 엔티티에 대해 간단히 알아보도록 하자..

유효하지 않은 콘텐츠와 Entity
엔티티를 사용하기 위한 참조기호 &;

1. Entity(48)

Entity란 문서 내에서 사용할 수없는 키워드이다. 문서 내에서 대우해주는 것을 대신하는 것이다.

왜 대신함?

예컨데 < 는 태그로 인식함 이런 문자 모아서 대신할수있는 키워드 등장함 이런것이 엔티티

즉 컨텐트로 사용하기 위해서 대신 사용함! 이경우 앞부분에 &를 넣어주어야한다

whatwg에 가면 엔티티 모음들이 있다.

<tr>
    <th>&bigstar;</th>
    <td>&lt; &gt;</td>
    <td>3</td>
    <td rowspan="3">4</td>
</tr>

lt gt (less than, grater than) 등 이있다.

외울필요 없다 찾아서 쓰자!

2. 기타태그(49)

만약 시험문제를 내는 서비스를 만들 때 그 문제의 보기가 있다

figure는 보기에다가 아래쪽에 붙이기가 가능하다.

캡션사용은 figcaption 이 있다.

3. Visual Studio Code : Emmet snippets(50)

VSCODE가 가진 것이다.

CSS 알면 이해가 수월하다

이렇게 하면 자동으로 만들어진다.

https://docs.emmet.io

Emmet Documentation

Emmet is a web-developer’s toolkit that can greatly improve your HTML & CSS workflow: Demo | ~~~ tooltip: Type CSS-like abbreviation type: ul#nav>li.item$*4>a{Item $} wait: 1000 tooltip: Run “Expand Abbreviation” action to expand it into HTML ::: “

docs.emmet.io

여기에 가면 알 수있다

<HTML 끝>

1. 보충

2. 회고

1) 마침내 끝이 났다. 이제 좀 뭔가 CSS를 할 때 내가 다한건가 하는 의문은 덜어두고 할 수있을거 같다.

CSS를 신나게 해서 내 머릿속 내용들을 신나게 해보자!!

'배움 __IL > addtionalFrontEnd' 카테고리의 다른 글

TIL : 웹퍼블리싱 CSS 2회 (4-1 , 4-2) (0)	2023.02.04
TIL : 웹퍼블리싱 CSS 1회 (1,2,3) (0)	2023.02.04
TIL : 웹퍼블리싱 HTML 5회 (10,11) (0)	2023.01.30
비동기적프로그래밍 정리해보기 (0)	2023.01.19
TIL : JavaScript 특유 함수개념 정리 (0)	2023.01.08

현재글TIL : 웹퍼블리싱 HTML 6회 (12,13) [완]

모-코드

Today :
Yesterday :

모-코드