HTML 기본 태그 정리 (2)

HTML 태그 정리 (2)

---

<img src="...">

<img src="C:\Users\leetk\OneDrive\바탕 화면\web\HTML\cat-g91c97681d_1920.jpg" width="300" height="400" border="3" title="IMG Descript"/>
<img src="cat-g91c97681d_1920.jpg" style="width:300px; height:400px; border:3px solid red" title="IMG Descript"/>

img 태그는 stylesheet를 사용하지 않고, width와 height 등 선언 가능
stylesheet로도 사용하여 표현이 가능

<div>

<div style="float:left; border:1px solid red; width:20%; background-color: plum; color: white; font-size:15px;">
    DIV태그입니다.
</div>
<div style="float:right; border:1px solid green; width:60%">
    두번째 DIV태그입니다.
</div>
<div style="clear:both; border:1px solid green; width:60%">
    두번째 DIV태그입니다.
</div>

div는 블록형태로 한 줄을 차지하는 개념
style의 display를 inline으로 선언하면 span처럼 표시가 됨
float 를 통해서 위치를 지정해줄 수 있음
clear를 통해 다른 div와 관계없이 자율적으로 배치 가능

<span>

<span style="border:1px solid blue">
    SPAN태그입니다.
</span>
<span>
    두번째 SPAN태그입니다.
</span>

span은 한 줄을 다 차지하지는 않음

<table>

<table border=1>
    <caption style="display:none">Example</caption>
        <thead>
            <tr>
                <th scope="col">
                    Title
                </th>
                <th scope="col">
                    Descipt
                </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    html
                </td>
                <td>
                    html is ...
                </td>
            </tr>
            <tr>
                <td>
                    JavaScript
                </td>
                <td>
                    JavaScript is ...
                </td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td colspan=2>
                    Total 2
                </td>
            </tr>
        </tfoot>
</table>

caption은 제목과 비슷한 개념
주석 처럼 사용함
thead는 table태그의 가장 위인 분류에 해당
하나의 칸은 th로 구분, tr은 줄 구분
tbody는 실제 데이터 부분
tbody에서는 td로 구분
tfoot으로 하단 구분, colspan으로 셀을 합칠 수 있음

<iframe>

<iframe src="C:\Users\leetk\OneDrive\바탕 화면\web\HTML\html1.html" width="500" height="400" frameborder="10"></iframe>
<iframe width="500" height="400" frameborder="10" srcdoc="<a href='https://naver.com' targer='_new'>naver.com</a>"></iframe>