[HTML]Day2 - 문장 꾸미기/테이블/멀티미디어

Day2- 문장 꾸미기/테이블/멀티미디어-

 

[1] 문장/단어 강조

1. 폰트 태그

<font size="1~7" color="#16진수" face="글꼴이름">....</font>

<strong> , <b> 굵게

<i> 기울임 / <u> 밑줄

2. <span>...</span>: CSS스타일을 적용하기 위한 영역 지정

3. <mark>...</mark>: 형광펜 기능

4. <a href="이동할 페이지 경로" target="_blank">...</a> 링크 기능

-"#"-현재 페이지로 이동 / "#id값" -그 id값 위치로 이동

[2] 테이블 만들기

<table>

    <thead>        ---> 상단 제목 영역(생략가능)

        <tr>          --->1줄

            <th></th>   ->열의 제목

            <td></td>   ->열의 내용

        </tr>

    </thead>

    <tbody>        --->본문(생략가능)

    </tbody>

    </tfoot>        --->하단(생략가능)

    </tfoot>

</table>

<table border="1~" width="px/%" height="px" align="left/center/right" cellpadding="px" cellspacing="px" >

    <thead>

        <tr>

            <th width="" height="" align="" valign="top/middle/bottom"></th>

            <td width="" height="" align="" valign="top/middle/bottom"></td>

        </tr>

    </thead>

    <tbody>

    </tbody>

    </tfoot>

    </tfoot>

</table>

(기타) rowspan (th, td에 적용 가능) 행 병합(세로로 병합)

         colspan (th, td에 적용 가능) 열 병합(가로로 병합)

[3] 멀티미디어

1. 이미지: <img src="이미지 파일 경로" alt="이미지 설명" width="" height="" />

2. 이미지 상대경로 표시법

../ ---> 한 칸 위로

./  ---> 현재 폴더

ex) folder1/photo1.jpg, ../folder2/photo2.jpg

3. 캡션 태그: 

<figure>

        <img src="" />

        <figcaption>이미지 설명</figcaption>

</figure>

**가상의 이미지를 넣고 싶을 때:

<img src="http://placehold.it/150X120(크기지정)" />

4. 오디오: <audio src="파일 경로" controls loop autoplay></audio>

controls: 컨트롤바 / loop: 반복 재생 / autoplay: 자동 재생 시작

5. 비디오: <video src="파일 경로" controls loop autoplay preload width="" height="" poster="미리보기 이미지 경로"></video>

preload: 동영상이 백그라운드에서 다운됨(재생 중이 아닐 때도 다운)