HTML #4 : <li>태그, <ul>태그, <ol>태그, <table>태그

Programming/HTML

HTML #4 : <li>태그, <ul>태그, <ol>태그, <table>태그

copotter 2019. 4. 26. 20:59

190423

HTML의 태그는 블록엘리먼트와 인라인엘리먼트로 나뉘게 됩니다.

이번 포스팅에서부터 블록엘리먼트에 대해서 다뤄보겠습니다.

<블록 엘리먼트>

- 언제나 새로운 줄에서 시작한다.

- 좌우 양쪽으로 최대한 가능한 모든 너비를 차지한다.

- 폭을 지정할 수 있다.

- 블록 엘리먼트내의 컨텐츠를 왼쪽/오른쪽/가운데 정렬시킬 수 있다.

- h1 ~ h6, p, table, ul, ol, li, dl, dt, dd, form

(앞에서 배운 <p>태그와 <h#>태그도 위의 블록 엘리먼트에 속한다.)

<li> 태그

- ol(ordered list)태그 : 순서있는 목록을 만든다.

- li(list item)태그 : 목록의 아이템을 만든다.

- ul(unordered list) : 순서없는 목록을 만든다.

- dl(definition list) : 용어를 설명하는 목록을 만든다.

- dt(definition term) : 용어의 제목을 만든다.

- dd(definition description) : 용어의 설명을 만든다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <h1>목록 만들기</h1>
    
    <h2>순서있는 목록 만들기</h2>
    <h3>검색 순위</h3>
    
    <ol>
        <li>티웨이 항공</li>
        <li>전유성</li>
        <li>구본임</li>
        <li>이랜드몰</li>
        <li>이외수</li>
    </ol>
    
    <h3>좋아하는 가수 순위</h3>
    <ol>
        <li>김수영</li>
        <li>한올</li>
        <li>Diana Krall</li>
        <li>Birdy</li>
    </ol>
    
    <h2>순서없는 목록 만들기</h2>
 
    <h3>할인중인 상품</h3>
    <ul>
        <li>이어폰</li>
        <li>갤럭시</li>
        <li>에어팟 1세대</li>
        <li>갤럭시 워치</li>
    </ul>
    
<!--    h3{주요 뉴스}+ul>li*4  : 젠코딩 -->
    <h3>주요 뉴스</h3>
    <ul>
        <li>남태현, 장재인 열애</li>
        <li>노무현을 지지했던 바보</li>
        <li>보복운전 당했을 땐 무조건..</li>
        <li>김정은 1179km 러시아 기차타고</li>
    </ul>
    
    <h2>정의 목록 만들기</h2>
    
    <h3>영화정보</h3>
    <dl>
        <dt>제목</dt><dd>어벤져스:앤드게임</dd>
        <dt>장르</dt><dd>액션/SF</dd>
        <dt>개봉일</dt><dd>2019.04.24</dd>
        <dt>감독</dt><dd>안소니 루소, 조 루소</dd>
        <dt>주연</dt><dd>로버트 다우니 주니어, 크리스 에반스, 브리 라슨</dd>
    </dl>
</body>
</html>
 
Colored by Color Scripter
cs

<li>태그의 소스 ↑ <실행결과> ↑

<table>태그

- table태그 : 표를 만든다.

- tr(table row) : 표의 행을 만든다.

- th(table header) : 표의 제목 칸을 만든다.

- td(table data) : 표의 데이터 칸을 만든다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <h1>표 만들기</h1>
    <h2>야구 종합순위</h2>
    <table border="1">
        <tr>
            <th>순위</th>
            <th>팀</th>
            <th>승률</th>
        </tr>
        <tr>
            <td>1</td>
            <td>두산</td>
            <td>0.68</td>
        </tr>
        <tr>
            <td>2</td>
            <td>SK</td>
            <td>0.625</td>
        </tr>
        <tr>
            <td>3</td>
            <td>키움</td>
            <td>0.56</td>
        </tr>
    </table>
</body>
</html>

<table>태그 행, 열 병합하기

- colspan : 열을 병합해주는 태그.

- rowspan : 행을 병합해주는 태그.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
    <h1>표의 칸 병합하기</h1>  
    <h2>가로 방향 칸 병합하기</h2>
    <table border="1" style="width: 100%;">
        <tr>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
        </tr>
        <tr>
            <td colspan="2">1</td>
            <td colspan="2">1</td>
        </tr>
        <tr>
            <td colspan="1">1</td>
            <td colspan="3">1</td>
        </tr>
    </table>
    
    <h2>세로 방향 칸 병합하기</h2>
    <table border="1" style="width: 100%;">
        <tr>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
        </tr>
        <tr>
            <td rowspan="2">1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
        </tr>
        <tr>
            <td>1</td>
            <td>1</td>
            <td>1</td>
        </tr>
        <tr>
            <td rowspan="3">1</td>
            <td>1</td>
            <td rowspan="3">1</td>
            <td>1</td>
        </tr>
        <tr>
            <td>1</td>
            <td>1</td>
        </tr>
        <tr>
            <td>1</td>
            <td>1</td>
        </tr>
    </table>
cs

지금까지 배운 태그들을 사용한 예제파일입니다.

다음 사진들과 같이 나올 수 있도록 코딩하여 연습해보시면 되겠습니다.

위 예제의 답안 파일입니다.

sample9-ex.html

sample11-ex.html

저작자표시 (새창열림)