[HTML-02] List, iframe, Table

List : 목록

• ul : unordered list ( 순서 없는 )
• ol : ordered list ( 순서 있는 )

<!-- default -->
<ul style="list-style-type: disc">
	<li>coffee</li>
	<li>tea</li>
	<li>milk</li>
</ul>

<!-- 빈 동그라미 -->
<ul style="list-style-type: circle">
	<li>coffee</li>
	<li>tea</li>
	<li>milk</li>
</ul>

<!-- 네모칸 -->
<ul style="list-style-type: square">
	<li>coffee</li>
	<li>tea</li>
	<li>milk</li>
</ul>

<!-- 아무것도 없음 -->
<ul style="list-style-type: none">
	<li>coffee</li>
	<li>tea</li>
	<li>milk</li>
</ul>

결과 화면

<!-- default -->
<ol type="1">
	<li>coffee</li>
	<li>tea</li>
	<li>milk</li>
</ol>

<ol start="10">
	<li>coffee</li>
	<li>tea</li>
	<li>milk</li>
</ol>

<ol type="A">
	<li>coffee</li>
	<li>tea</li>
	<li>milk</li>
</ol>

<ol type="I">
	<li>coffee</li>
	<li>tea</li>
	<li>milk</li>
</ol>

start를 10으로 하면 10부터 count 한다.

결과 화면

 

iframe : web 안에 web 참조

<iframe src="https://www.cgv.co.kr/" width="600" height="300"></iframe>
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d3763.988087752537!2d127.03493516873668!3d37.50499133338556!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sko!2skr!4v1655867490142!5m2!1sko!2skr" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>

• 보통 google 지도를 참조할 때 많이 쓴다.
• Youtube와 같은 보안 정책이 존재하는 사이트는 iframe 사용이 불가하다. 대신 youtube api 활용!

 

Table

<table border="1">
	<caption>주소록</caption>
	<tr>
		<th>번호</th>
		<th>이름</th>
		<th>나이</th>
		<th colspan="2">전화번호</th>
		<!-- <th>전화번호</th> -->
	</tr>
	<tr>
		<td>1</td>
		<td>홍길동</td>
		<td>24</td>
		<td>123-4567</td>
		<td>010-1234-2345</td>
	</tr>
</table>

• 두 열을 합쳐야 할때, colspan 활용