2. HTML Tag (2)

List

(1) Ul : Unordered List. 준비물을 소개할 때 처럼 순서가 상관이 없는 리스트의 경우

<ul>
	<li> 콩나물 </li>
	<li> 파 </li>
	<li> 국간장 </li>
</ul>

(2) Ol : Ordered List. 자식 요소로 li만 가능. li 안에는 'div', 'p', 'ul' 등도 가능

<ol>
	<li> 물을 넣는다 </li>
	<li> 라면을 넣고 끓인다 </li>
	<li> 맛있게 먹는다 </li>
</ol>

(3) Dl : Definition/Descriptive list.

<dl> <!--definition list-->
	<dt> 리치 </dt> <!--definition term-->
	<dd> 귀엽고 자기가 멋있는 줄 앎 </dd> <!--definition definition-->
	<dt> 타잔 </dt>
	<dd> 너무 귀엽고 사람을 좋아함 </dd>
	<dd> 그리고 점프를 너무 잘한다 </dd>
</dl>

Image Tag

(1) Src : 이미지 경로 지정

상대 경로 : 현재 페이지를 기준으로 (./ : 현재 폴더, ../: 상위 폴더)

<img src = "./images/pizza.jpg">

절대 경로 : 언제나 같은 경로

<img src = "C:/">
<img src = "http://">

(2) Alt : 대체 텍스트. 웹 접근성, 시각 장애인, 엑스박스 옆에 설명 등의 용도이며 반드시 필요

<body>
	<img src = "./pizza-jpg.jpg" alt = "피자">
</body>

(3) Width/ height : 이미지 크기 지정. 하지만 주로 css에서 이미지 크기를 조정하기 때문에 잘 사용되지는 않음. 하지만 고정된 이미지 크기가 필요할 때 사용하면 효율적이기는 함.

<body>
	<img src = "./pizza-jpg.jpg" alt = "피자", width = "400(px)"> <!--px은 생략 가능-->
</body>