[ex07~ex16] HTML(heading, hr, style, list, link, anchor, image, tag, table

대장쿵야 2023. 4. 13. 09:08

ex07

<hn>, heading
            - 제목 태그
            - n: 1~6
            - <h1>, <h2>, <h3>, <h4>, <h5>, <h6>
            - 쌍태그
            - 혼합형
            - 숫자는 중요도를 나타낸다. > 보이는 형태는 중요하지 않음
                - <h1>: 문서내에서 가장 중요한 제목
                - <h6>: 문서내에서 가장 덜 중요한 제목

            hn.align
            - 수평 정렬

        <h1 align="center">제목입니다.</h1>
        <p>내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.</p>

        <h2>제목입니다.</h2>
        <h3>제목입니다.</h3>
        <h4>제목입니다.</h4>
        <h5>제목입니다.</h5>
        <h6 style="font-size: 40pt;">제목입니다.6</h6>

ex08

<hr>, Horizontal Rule
        - 수평바, 구분자
        - 문단과 문단을 구분하는 역할
        - 단독 태그

        <hr> 속성
        1. size: 선의 두께
        2. width: 선의 너비(픽셀:절대크기, %:상대크기)
        3. align: 수평 정렬
        4. color: 선의 색상
        5. noshade: 그림자 유무
        6. title: 풍선도움말(tooltip, hover text)

        HTML 속성 유형
        1. 숫자(단위 없음)
            a. 픽셀(px) > 화소 > 화상(이미지)를 구성하는 최소 단위 > 단일 색상을 가지는 점 1개
            b. 글자수
        2.숫자(단위: %)
            - 100%의 기준이 누구인지?
            - 부모 태그 영역을 100으로 하는 상대 단위(*****)
        3. 열거형
            - 정해져있는 속성값 중 하나를 선택해서 사용
        4. 색상
            - 색상명, RGB
        5. 플래그형(boolean)
            - 속성명 기재(true), 미기재(false)
        6. 문자열
            - 자유롭게 기재
        7. URL
            - 상대경로, 절대경로, 외부경로

    <h1>수업 내용</h1>

    <p title="내용입니다.">내용이 어쩌구 저쩌구 블라블라~내용이 어쩌구 저쩌구 블라블라~내용이 어쩌구 저쩌구 블라블라~내용이 어쩌구 저쩌구 블라블라~내용이 어쩌구 저쩌구 블라블라~내용이 어쩌구 저쩌구 블라블라~내용이 어쩌구 저쩌구 블라블라~</p>
    
    <p>내용이 어쩌구 저쩌구 블라블라~내용이 어쩌구 저쩌구 블라블라~내용이 어쩌구 저쩌구 블라블라~내용이 어쩌구 저쩌구 블라블라~내용이 어쩌구 저쩌구 블라블라~내용이 어쩌구 저쩌구 블라블라~내용이 어쩌구 저쩌구 블라블라~</p>
    
    <hr size="10" width="100%" align="left" noshade title="구분선입니다.">
    
    <p>내용이 어쩌구 저쩌구 블라블라~내용이 어쩌구 저쩌구 블라블라~내용이 어쩌구 저쩌구 블라블라~내용이 어쩌구 저쩌구 블라블라~내용이 어쩌구 저쩌구 블라블라~내용이 어쩌구 저쩌구 블라블라~내용이 어쩌구 저쩌구 블라블라~</p>

ex09

스타일 태그

    <h1>스타일 태그</h1>

    <h2>물리적인 모양을 지정하는 태그(의미가 중요하지 않다.)</h2>

    <b>볼드체입니다.</b><br>
    <i>이텔릭체입니다.</i><br>
    보통 글자<small>작은글자</small><br>

    H<sub>2</sub>O 밑첨자<br> 
    MC<sup>2</sup> 윗첨자<br> 
    <u>밑줄을 긋습니다.</u><br>
    <strike>취소선입니다.</strike><br>
    <!-- 빨간색 비권장 -->
    <s>취소선입니다.</s><br>
    <big>큰 글자</big><br>
    <tt>타자기 글자</tt>

    
    <h2>의미 자체를 중시하는 태그(모양이 중요하지 않다.)</h2>

    <b>데이터</b>
    <strong>중요한 데이터</strong><br> <!-- <b>랑 육안상 차이없음 BUT 의미상 중요할때 -->
    <em>중요한 데이터</em><br> <!-- strong이랑 비슷(살짝 덜 중요) -->
    <mark>강조 데이터</mark><br>
    <cite>한줄 인용구</cite><br> <!-- 이탤릭체 -->
    <blockquote>여러줄 인용구</blockquote>
    <code>int a = 10;</code><br> <!-- 코드 -->
    <address>서울시 강남구 역삼동</address><br>
    <ins>추가된 데이터</ins><br>
    <del>삭제된 데이터</del><br>

ex10

        List, 목록

        1. 순서가 있는 목록
            - <ol> + <li>
            - Ordered List
            - List Item

        2. 순서가 없는 목록
            - <ul> + <li>
            - Unordered List
            - List Item

        3. 용어 정의 목록
            - <dl> + <dt> + <dd>
            - Definition List
            - Definition Term
            - Definition Description

전체코드

<body>
    <!-- ex10_list.html -->

    <h1>오늘의 할일</h1>

    <ol type="A">
        <li>수업 복습하기</li>
        <li>강아지 산책하기</li>
        <li>방청소하기</li>
        <li>컴퓨터 포맷하기</li>
    </ol>

    <h1>오늘의 할일</h1>

    <!-- bullet -->
    <!-- disc, square, circle, -->
    <ul type="disc">
        <li>수업 복습하기</li>
        <li>강아지 산책하기</li>
        <li>
            운동하기
            <ol>
                <li>팔굽혀펴기</li>
                <li>달리기</li>
                <li>스쿼트</li>
            </ol>
        </li>
        <li>방청소하기</li>
        <li>컴퓨터 포맷하기</li>
    </ul>


    <h1>자바</h1>

    <dl>
        <dt>용어</dt>
        <dd>설명입니다.</dd>

        <dt>클래스</dt>
        <dd>클래스는 어쩌구 저쩌구~ 클래스는 어쩌구 저쩌구~ 클래스는 어쩌구 저쩌구~ 클래스는 어쩌구 저쩌구~ 클래스는 어쩌구 저쩌구~ 클래스는 어쩌구 저쩌구~ 클래스는 어쩌구 저쩌구~ 클래스는 어쩌구 저쩌구~ 클래스는 어쩌구 저쩌구~ 클래스는 어쩌구 저쩌구~ 클래스는 어쩌구 저쩌구~ 클래스는 어쩌구 저쩌구~ 클래스는 어쩌구 저쩌구~ 클래스는 어쩌구 저쩌구~ 클래스는 어쩌구 저쩌구~ 클래스는 어쩌구 저쩌구~ 클래스는 어쩌구 저쩌구~ 클래스는 어쩌구 저쩌구~ 클래스는 어쩌구 저쩌구~ 클래스는 어쩌구 저쩌구~ 클래스는 어쩌구 저쩌구~ 클래스는 어쩌구 저쩌구~ 클래스는 어쩌구 저쩌구~ </dd>

        <dt>메소드</dt>
        <dd>어쩌구 저쩌구~ 어쩌구 저쩌구~ 어쩌구 저쩌구~ 어쩌구 저쩌구~ 어쩌구 저쩌구~ 어쩌구 저쩌구~ 어쩌구 저쩌구~ 어쩌구 저쩌구~ 어쩌구 저쩌구~ 어쩌구 저쩌구~ 어쩌구 저쩌구~ 어쩌구 저쩌구~ 어쩌구 저쩌구~ 어쩌구 저쩌구~ 어쩌구 저쩌구~ 어쩌구 저쩌구~ 어쩌구 저쩌구~ 어쩌구 저쩌구~ 어쩌구 저쩌구~ 어쩌구 저쩌구~ 어쩌구 저쩌구~ 어쩌구 저쩌구~ 어쩌구 저쩌구~ 어쩌구 저쩌구~ 어쩌구 저쩌구~ 어쩌구 저쩌구~ </dd>
    </dl>

    <hr>

    <ol>
        <li>강아지</li>
        <li>고양이</li>
        <li>병아리</li>
        <li>망아지</li>
    </ol>

    <p>중간에 다른 콘텐츠</p>
    <ol start="5">
        <!-- 목록 번호가 이어지게 번호 지정 -->
        <li>강아지</li>
        <li>고양이</li>
        <li>병아리</li>
        <li>망아지</li>
    </ol>

    <hr>

    <ol reversed>
        <!-- 번호 거꾸로 -->
        <li>강아지</li>
        <li>고양이</li>
        <li>병아리</li>
        <li>망아지</li>
    </ol>

    <font color="red" face="궁서체" size="3">텍스트입니다.</font>

</body>

ex11

        링크, Link
        - <a>, anchor
        - 쌍태그
        - 혼합형

        링크 속성
        - a.href: 클릭하면 이동하는 URL 지정
        - a.target: 페이지 이동 방식. _self|_blank|_parent|_top|프레임명

        <a>
        1. link 역할
        2. anchor 역할

<body>
	<h1>외부 링크</h1>

     <!-- https:// 생략 불가! -->
     <a href="https://naver.com" target="blank">네이버로 이동합니다.</a>
     <a href="naver.com">네이버로 이동합니다.</a>

     <h1>내부 링크</h1>

     <a href="./ex01.html">첫번째 예제</a> <!-- ./ 생략 가능--> 

     <h1>이동 방식</h1>

     <!-- 

        _self: 보고있는 창에서 페이지 이동 > 내부링크
        _blank: 새창에서 페이지 이동 > 외부링크

      -->
     <a href="ex10_list.html" target="_blank">열번째 예제(blank)</a>
     <a href="ex10_list.html" target="_self">열번째 예제(self)</a>
     
</body>

ex12

anchor

- 목차 클릭하면 해당 위치로 이동

전체태그

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- ex12_anchor.html -->

    <h1>자바 정리</h1>

    <!-- 목차 -->
    <ol>
        <li><a href="#item1">변수</a></li>
        <li><a href="#item2">메소드</a></li>
        <li><a href="#item3">클래스</a></li>
        <li><a href="#item4">인터페이스</a></li>
    </ol>

    <h2><a name="item1">변수</a></h2> <!-- anchor (표지판) -->
    <p>내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. </p>

    <h2><a name="item2">메소드</a></h2>
    <p>내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. </p>

    <h2><a name="item3">클래스</a></h2>
    <p>내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. </p>

    <h2><a name="item4">인터페이스</a></h2>
    <p>내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. 내용입니다. </p>

</body>
</html>

ex13

이미지, image

- 목차 클릭하면 해당 위치로 이동
        - <img>
        - 단독태그

        img.src
        - source
        - 이미지 파일 URL
        - 필수값

        img.alt
        - alternate text > 대체 문자열
        - 이미지가 올바르게 표시되지 않았을 때 대신 보여주는 문자열
        - 필수값

        img.width
        img.height

전체코드

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- ex13_image.html -->

     <img src="images/cat01.jpg">
     <img src="/html/images/cat02.jpg">

     <img src="images/cat01.jp">

     <hr>

     <img src="images/dog01.jpg" alt="강아지 오형제">

     <hr>

     <img src="images/dog02.jpg">

     <img src="images/dog02.jpg" width="250" height="188">

     <img src="images/dog02.jpg" width="500" height="376">

     <!-- 종횡비 유지(X) -->
     <img src="images/dog02.jpg" width="250" height="94">

     <!-- 하나만 쓰면 종횡비 자동 유지 -->
     <img src="images/dog02.jpg" width="500">
     <img src="images/dog02.jpg" height="300">


</body>
</html>

ex14

태그, Tag

        인라인 태그 vs 블럭 태그
        - 모든 태그는 위의 두 분류 중 하나에 속한다.
        - 렌더링(Rendering, 태그를 화면에 출력하는 작업) 규칙이 서로 다르다.

        인라인 태그, Inline Tag
        - 자신의 내용물과 앞뒤의 다른 태그의 내용물을 같은 라인에 출력한다.
        - 이유: 내용물의 크기가 태그의 영역이다.
        - PCDATA(텍스트)는 인라인 태그로 취급한다.

        블럭 태그, Block Tag
        - 자신의 내용물과 앞뒤의 다른 태그의 내용물을 다른 라인에 출력한다.
        - 이유: 내용물의 크기와 상관없이 한 라인을 독점한다.(너비 100%) 높이는 내용물의 크기와 동일하다.

        블럭태그: <p>, <h1>..<h6>, <blockquote>, <ol>, <ul>, <dl>, <hr>
        인라인태그: 스타일태그, <a>, <img>

     <!-- # : 빈 링크(아무일도 안 일어남) -->
     
     <!-- 인라인 태그(한줄) -->
     <a href="#">링크1</a> <!-- #도 없으면 새로고침 -->
     <a href="#" style="background-color: yellow;">링크2</a>
     <a href="#">링크3</a>

     <!-- 블럭 태그(엔터 안쳐도 행 바뀜) -->
     <p>문단1</p>
     <p style="background-color: yellow;">문단2문단2문단2문단2문단2문단2문단2문단2문단2문단2문단2문단2문단2문단2문단2문단2문단2문단2문단2문단2문단2문단2문단2문단2문단2문단2문단2문단2문단2문단2문단2문단2</p>
     <p>문단3</p>

화면

Document 링크1 링크2 링크3

문단1

문단2문단2문단2문단2문단2문단2문단2문단2문단2문단2문단2문단2문단2문단2문단2문단2문단2문단2문단2문단2문단2문단2문단2문단2문단2문단2문단2문단2문단2문단2문단2문단2

문단3

ex15

표, Table

        1. <table>
            - 큰상자
            - 전체 컨테이너
        2. <tr>
            - table row
            - 중간 상자
            - 행 역할
        3. <td>
            - table data
            - 작은 상자
            - 셀 역할
            - 데이터를 저장하는 역할
        4. <th>
            - table header
            - 제목 역할
            - 작은 상자
        5. <thead>
            - 작성 순서 바꿔도 head-body-foot 순서로 출력
        6. <tbody>

        7. <tfoot>

     <h1>2행 2열 테이블</h1>

     <table border="1" width="200" height="200">
        <tr>
            <td>1</td>
            <td>2</td>
        </tr>
        <tr>
            <td>3</td>
            <td>4</td>
        </tr>
     </table>




     <h1>2행 2열 테이블</h1>

     <table border="1" width="200" height="200">
        <tr>
            <td width="100" height="100">1</td>
            <td width="100">2</td>
        </tr>
        <tr>
            <td height="100">3</td>
            <td>4</td>
        </tr>
     </table>



     <h1>2행 2열 테이블</h1>

     <table border="1" width="200" height="200" bgcolor="yellow">
        <tr bgcolor="red">
            <td align="center" valign="top" bgcolor="blue">1</td>
            <td>2</td>
        </tr>
        <tr>
            <td>3</td>
            <td>4</td>
        </tr>
     </table>

화면

Document

2행 2열 테이블

1	2
3	4

2행 2열 테이블

1	2
3	4

2행 2열 테이블

1	2
3	4

ex16

Table

    <!-- ex16_table.html -->
    
    <h1>주소록</h1>

    <table border="1" width="600">
        <!-- 테이블 헤더 -->
        <!-- <tr bgcolor="#DDDDDD">
            <td align="center" width="60"><b>번호</b></td>
            <td align="center" width="80"><b>이름</b></td>
            <td align="center" width="60"><b>나이</b></td>
            <td align="center" width="70"><b>성별</b></td>
            <td align="center" width="330"><b>주소</b></td>
        </tr> -->

        <thead>
            <tr bgcolor="#DDDDDD">
                <th width="60">번호</th>
                <th width="80">이름</th>
                <th width="60">나이</th>
                <th width="70">성별</th>
                <th width="330">주소</th>
            </tr>
        </thead>

        <!-- 
            테이블 데이터 
            1. 고정: 왼쪽 or 가운데
            2. 가변: 왼쪽
        -->
        <tbody>

            <tr>
                <td align="center">1</td>
                <td align="center">홍길동</td>
                <td align="center">20</td>
                <td align="center">남자</td>
                <td>서울시 강남구 역삼동</td>
            </tr>
            <tr>
                <td align="center">1</td>
                <td align="center">홍길동</td>
                <td align="center">20</td>
                <td align="center">남자</td>
                <td>서울시 강남구 역삼동</td>
            </tr>
            <tr>
                <td align="center">1</td>
                <td align="center">홍길동</td>
                <td align="center">20</td>
                <td align="center">남자</td>
                <td>서울시 강남구 역삼동</td>
            </tr>
            <tr>
                <td align="center">1</td>
                <td align="center">홍길동</td>
                <td align="center">20</td>
                <td align="center">남자</td>
                <td>서울시 강남구 역삼동</td>
            </tr>
            <tr>
                <td align="center">1</td>
                <td align="center">홍길동</td>
                <td align="center">20</td>
                <td align="center">남자</td>
                <td>서울시 강남구 역삼동</td>
            </tr>
            <tr>
                <td align="center">1</td>
                <td align="center">홍길동</td>
                <td align="center">20</td>
                <td align="center">남자</td>
                <td>서울시 강남구 역삼동</td>
            </tr>
            <tr>
                <td align="center">1</td>
                <td align="center">홍길동</td>
                <td align="center">20</td>
                <td align="center">남자</td>
                <td>서울시 강남구 역삼동</td>
            </tr>

                        
        </tbody>

        <tfoot>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
        </tfoot>
    </table>

    <hr>

    <marquee>뉴스 속보입니다. 현재 어쩌구 저쩌구~~ 현장에 나가있는 김기자를 연결합니다.</marquee>

화면

Document

주소록

번호	이름	나이	성별	주소
1	홍길동	20	남자	서울시 강남구 역삼동
1	홍길동	20	남자	서울시 강남구 역삼동
1	홍길동	20	남자	서울시 강남구 역삼동
1	홍길동	20	남자	서울시 강남구 역삼동
1	홍길동	20	남자	서울시 강남구 역삼동
1	홍길동	20	남자	서울시 강남구 역삼동
1	홍길동	20	남자	서울시 강남구 역삼동
1	2	3	4	5

뉴스 속보입니다. 현재 어쩌구 저쩌구~~ 현장에 나가있는 김기자를 연결합니다.