HTML 3편

23399 단어 htmlhtml
  • <ul> : 리스트 태그. index가 존재하지 않는다. unordered list

  • <ol> : 리스트 태그. index가 존재. ordered list

  • <li> : 리스트 아이템. 리스트를 나타내는 태그.

  • target : a 태그의 속성. 링크된 문서가 어디서 열릴지 명시.

  • <dl> : 정의 목록 태그. definition list

  • <dt> : 정의 목록의 타이틀. definition term

  • <dd> : 정의 목록의 설명. definition description

  • <table> : 표를 나타내는 태그.

  • border : 표의 굵기를 지정하는 table의 속성.

  • <tr> : 행(가로)을 나타내는 태그.

  • <td> : 열(세로)을 나타내는 태그.

  • rowspan : 행을 합쳐주는 속성.

  • colspan : 열을 합쳐주는 속성.

  • <img> : 이미지를 나타내는 태그. 시작태그와 종료태그가 합쳐져있다.

  • src : 해당 정보가 있는 경로를 나타내는 속성.

  • alt : 이미지를 나타낼 수 없을 때 나타내는 문구.

  • width : 이미지의 크기를 조절하는 속성.

  • <audio> : 사운드를 출력해주는 태그.

  • controls : 컨트롤러를 보여줄지 말지 결정. 원하지 않는다면 아예 타이핑 X

  • loop : 무한재생을 결정. 원하지 않는다면 아예 타이핑 X

  • autoplay : 자동재생을 결정. 원하지 않는다면 아예 타이핑 X

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <p>선호곡 리스트1</p>
        <ul>
            <li>long live</li>
            <li>champagne problems</li>
            <li>forever winter</li>
            <li>style</li>
            <li>All too Well (10min)</li>
        </ul>
        <p>앨범 리스트1</p>
        <ol>
            <li>Taylor Swift</li>
            <li>Fearless</li>
            <li>Speak Now</li>
            <li>RED</li>
            <li>1989</li>
            <li>Reputation</li>
            <li>Lover</li>
            <li>folklore</li>
            <li>evermore</li>
        </ol>
        <p>검색 사이트 리스트</p>
        <ol>
            <li><a href="https://www.google.com/" target="_blank">google</a></li>
            <li><a href="https://www.naver.com/" target="_self">naver</a></li>
        </ol>

        <dl>
            <dt>선호곡 리스트2</dt>
            <dd>ivy</dd>
            <dd>Message in a bottle</dd>
            <dd>Enchanted</dd>
            <dd>the man</dd>
            <dt>앨범 리스트2</dt>
            <dd>Fearless(Taylor's Version)</dd>
            <dd>RED(Taylor's Version)</dd>
            <dd>Taylor Swift</dd>
        </dl>

        <table border ="1">
            <tr>
                <td rowspan="4">테이블 만들기</td>
            </tr>
            <tr>
                <td>111</td>
                <td>222</td>
                <td>333</td>
            </tr>
            <tr>
                <td>444</td>
                <td>555</td>
                <td>666</td>
            </tr>
            <tr>
                <td colspan="2">777</td>
                <td>888</td>
            </tr>
        </table>

        <p><img src="https://i0.wp.com/naijafindmp3.com/wp-content/uploads/tayy-27-2.jpeg?fit=706%2C434&ssl=1" alt="RED(TS)"></p>
        <p><img src="https123://i0.wp.com/naijafindmp3.com/wp-content/uploads/tayy-27-2.jpeg?fit=706%2C434&ssl=1" alt="RED(TS)"></p>
        <p><img src="https://i0.wp.com/naijafindmp3.com/wp-content/uploads/tayy-27-2.jpeg?fit=706%2C434&ssl=1" alt="RED(TS)" width="500"></p>

        <audio src="음원의 경로" controls = "controls" autoplay ="autoplay" loop ="loop"
    </body>
</html>
실행 화면

좋은 웹페이지 즐겨찾기