목록 만들기

# 목록 만들기 ## 미션 아래 이미지를 참고하여, 선호 음식 목록을 만드시오. ![클라우드스터딩-HTML-실습-리스트-ul-ol-li](https://i.imgur.com/yqCo81N.png) ## 개념 #### ⭐️ 비정렬 리스트 순서가 없는 목록 즉, 비정렬 리스트는 ul 태그를 사용한다. ul 태그는 내부에 리스트 아이템을 갖는다. ``` <ul> <li>리스트 아이템</li> <li>리스트 아이템</li> <li>리스트 아이템</li> </ul> ``` #### ⭐️ 정렬 리스트 순서가 있는 리스트 즉, 정렬 리스트는 ol 태그를 사용한다. ```  <ol> <li>No.1 리스트 아이템</li> <li>No.2 리스트 아이템</li> <li>No.3 리스트 아이템</li> </ol> ``` #### ⭐️ 이미지에 링크 걸기 a 태그로 링크를 걸 수 있는데, 텍스트 뿐만 아니라, 이미지에도 걸 수 있다. ``` <a href="링크걸 주소"> <img src="이미지 주소" /> </a> ``` ## 구글링 힌트 - "HTML 리스트 ul ol 차이" - "이미지에 링크 걸기"

by sehongpark

코드: java 1.8

<!DOCTYPE html> <html lang="en"> <head> <title>리스트 연습</title> </head> <body> <h1>야심한 밤</h1> <p> 때는 저녁 10시. 바쁜 일과로 저녁도 거른 체, 하루가 저물었다. 공복감에 치여 잠들 수 없는 밤..! 게다가 내일은 휴일.. 그렇다.. 나는 지금 야식이 땡긴다. </p> <h2>좋아하는 야식들</h2>  <ul> <li>라면</li> <li>족발</li> <li>치킨</li> <li>피자</li> </ul> <h2>야식 랭킹</h2>  <ol> <li>치킨</li> <li>족발</li> <li>피자</li> <li>라면</li> </ol> <h2>치킨 주문하기</h2>  <a href="https://bhc.co.kr"> <img src="https://t.ly/nKxc" width="100%" /> </a> </body> </html>

입력

정답이 궁금하다면? 코드를 제출해보세요!