HTML -2

서식 태그
<b> : 텍스트를 굵게 표현
<i> : 텍스트를 이탤릭체로 표현

<Strong> : 텍스트를 굵게 표현, 리더기에서 거쎈 발음
<em> : 텍스트를 이탤릭체로 표현, 리더기에서 거쎈 발음

목록 태그

 <ul> : 순서가 없는 목록 태그, 블록 태그

·김사과
·오렌지
·반하나


    <ul>
        <li>김사과</li>
        <li>오렌지</li>
        <li>반하나</li>
    </ui>


<ol> : 순서가 있는 목록 태그, 블록 태그


    <ol>
        <li>김사과</li>
        <li>오렌지</li>
        <li>반하나</li>
    </ol>

<dl> : 정의 목록 태그, 블록 태그

채애리 선생님
    김사과 학생
    오렌지 학생
    반하나 학생

    <dl>                        //  dl>dt+dd*3
        <dt>채애리 선생님</dt>
        <dd>김사과 학생</dd>
        <dd>오렌지 학생</dd>
        <dd>반하나 학생</dd>
    </dl>

    <table>
        <tr>                    // table>tr*2>td*3
            <td></td>
            <td></td>
            <td></td>
        </tr>
            <td></td>
            <td></td>
            <td></td>
    </table>            



이미지 태그
1. 비트맵 이미지
- 픽셀이 모여 만들어진 정보의 집합
- "레스터 이미지"라고 부름
- 픽셀 단위로 화면에 렌더링함
- 그림판, 포토샵등 툴로 편집

2. 벡터 이미지
- 수학적 정보의 형태들이 만들어내는 결과물
- 이미지가 가지고 있는 점, 선, 면의 위치, 색상정보를 가지고 있음
- 확대 및 축소를 해도 이미지가 깨지지 않음
- 일러스트 같은 툴로 편집

jpg(jpeg)
- 압축률이 훌륭하여 사진이나 예술분야에 많이 사용
- 가장 널리 쓰이는 이미지 포멧
- 표현 색상(24비트, 약 1600만 색상)이 뛰어나 고해상도 표시장착에 적합
- 손실 압축

gif
- 이미지 파일내에 이미지 및 문자열 같은 정보를 저장할 수 있는 파일
- 여러장의 이미지를 한 개의 파일에 저장할 수 있음(움짤, 애니메이션)
- 8비트(256색상) 컬러만 지원
- 비손실 압축

png
- gif의 대체 포멧으로 개발
- 8비트, 24비트 컬러 이미지 처리
- 알파 채널 지원
- w3c 권장 포멧

webp
- jpg, png, gif를 모두 대체할 수 있는 구글이 개발한 이미지 포멧
- gif 같은 애니메이션 지원
- 알파 채널 지원(손실, 비손실)
- 완벽한 포멧

이미지 태그 <img>
- 인라인 태그

    <img src="이미지가 위치하는 주소 또는 파일경로 :" alt=" 이미지를 대신할 문장">

✔ 파일 경로 작성 방법
1. 절대 경로
    - 물리적 경로
    - http, https, file
    https://t1.daumcdn.net/daumtop_chanel/op/20200723055344399.png
    D:\dongil\HTML\Day2\sky1.png

    <img src = "https://t1.daumcdn.net/daumtop_chanel/op/20200723055344399.png"
    alt="다음로그"> <!-- (0) --->

    <img src="D:\dongil\HTML\Day2\sky1.png" alt ="하늘 이미지"> <!-- (X) -->

    *https:// (웹)에 올라가있는 것은 누구나 볼수 있는것. 아래의 "하늘 이미지"는 나만 볼수 있는 파일경로


2. 상대 경로
    - 이미지가 HTML 문서와 같은 폴더에 있는 경우
        <img src="파일명">, <img src="./파일명">
    - 이미지가 하위 폴더에 있는 경우
        <img src="폴더명/파일명">, <img src="./폴더명/파일명">
    - 이미지가 상위 폴더에 있는 경우
        <img src="../파일명">, <img src="./../파일명">
    - 이미지가 상위 폴더의 하위 폴더에 있는 경우
        <img src="../하위폴더명/파일명">, <img src="./../하위폴더명/파일명">
        

하이퍼 링크 <a>
- 다른 페이지 또는 사이트로 연결되는 링크(문자 또는 이미지)

    <a href="사이트 또는 이동할 문서의 경로"> 링크에 사용될 문자 또는 이미지</a>

책갈피 <a>
<a> 태그의 name 속성 또는 특정 태그의 id 속성을 이용하여 책갈피 기능을 사용

    <a href="a 태그의 #값 또는 특정 태그의 id값"> 링크에 사용될 문자 또는 이미지</a>

    <a href="#book">이동</a>
    ..
    ..
    ..
    ..
    ..
    <a name="book">도착</a> 또는 <p id="book">도착</p>


테이블 <table>
여러 종류의 데이터를 보기 좋게 정리하여 보여주는 표

<tr> : 행을 생성 (세로 갯수)
<td> : 셀을 생성 (가로 갯수)

    <table>
        <tr>
            <td>1<td>
        </tr>
    </table>

<th>: 셀의 제목, 가운데 정렬, 굵은 글씨

    <table>
        <tr>
            <th>1</th>
        </tr>
    </table>


colspan 속성
- 셀을 가로로 합침(열)

    <td colspan="합칠 열의 갯수">

rowspan 속성
-셀을 세로로 합침(행)

    <td rowspan="합칠 행의 갯수">

colgroup
<colgroup> 태그 뒤에 나오는 컬럼(th 또는 td)에 적용할 스타일을 해당 태그에서 미리 설정할 수 있도록 함

    <table>
    <colgroup>
        <col style="css문법">
        <col style="css문법">
        <col style="css문법">

    </colgroup>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    </table>

caption
- 표에 제목을 붙일 때 사용
- 기본 위치는 표의 상단 중앙
- 

과제 1.
인터넷 뉴스 페이지를 HTML 문서로 작성해보자 (제목),(사진),(내용)

과제 2.
이력서를 HTML 문서로 작성해보자.