[HTML5] 5. <img> 태그와 이미지 삽입 + 리스트와 리스트 아이템 + <ol> 과 중첩 리스트 + 정의 리스트

5. <img> 태그와 이미지 삽입 + 리스트와 리스트 아이템 + <ol> 과 중첩 리스트 + 정의 리스트

 

 

 

# <img> 태그와 이미지 삽입

- <img> 태그의 src 속성에 이미지 파일의 주소를 지정하며, src에는 BMP, GIF, PNG, JPG, JPEG, animated-GIF 등의 이미지를 지정할 수 있다.

 

< img  src="이미지 파일의 URL"

           alt="문자열"

           width="이미지 폭"

           height="이미지 높이" >

 

- src : 이미지 파일의 URL로, 필수 속성이다.

- alt : 이미지가 없거나 손상되는 등 이미지를 출력할 수 없는 경우 출력되는 문자열로, 필수 속성이다.

- width : 이미지가 출력되는 너비로, 생략이 가능하다. 생략될 경우 원본 이미지의 폭을 차용한다.

- height : 이미지가 출력되는 높이로, 생략이 가능하다. 생략될 경우 원본 이미지의 너비를 차용한다.

 

 

 

 

# 리스트

- 순서 있는 리스트 : <ol> ~ </ol>

 

- 순서 없는 리스트 : <ul> ~ </ul>

<ul>

    <li> 아이템 </li>

    <li> 아이템 </li>

</ul>

 

- 정의 리스트 : <dl> ~ </dl>

 

+ 리스트 아이템 : <li> ~ </li>  (여기서 </li> 는 생략 가능)

 

 

 

 

 

 

 

 

# <ol> 로 라면 끓이는 순서 나열

+ start 뒤에는 숫자가 와야 한다.

 

 

 

 

 

# <ul> 로 좋아하는 음식 나열

+ ctrl + / 키를 누르면 바로 주석 처리가 가능하다.

 

 

 

 

 

 

# 중첩 리스트 만들기

 

 

 

 

 

# 정의 리스트

 

 

 

 

 

# 도시 소개 실습 및 과제