-
실습 - 순서있는 & 순서없는 목록 만들기HTML&CSS/실습 2023. 1. 8. 10:27
1. 아래와 같이 순서있는 목록 만들기
나의풀이
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <h1>레드향 샐러드 레시피</h1> <h3>재료 : </h3> 레드향 1개, 아보카도 1개, 토마토 1개, 샐러드 채소 30g <h3>드레싱 : </h3> 올리브유 1큰술, 레몬즙 2큰술, 꿀 1큰술, 소금 약간 <h3>재료 준비</h3> <ol type="a" start="1"> <li>샐러드 채소를 씻고 물기를 제거한 후 준비합니다.</li> <li>레드향과 아보카도, 토마토를 먹기 좋은 크기를 썰어둡니다.</li> </ol> <h3>드레싱 준비</h3> <ol type="a" start="3"> <li>드레싱 재료를 믹서에 갈아줍니다</li> </ol> <h3>샐러드 완성</h3> <ol type="a" start="4"> <li>볼에 샐러드 채소와 썰어 둔 레드향, 아보카도, 토마토를 넣고 드레싱을 뿌리면 끝!</li> </ol> </body> </html>해설풀이
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <h1>레드향 샐러드 레시피</h1> <p><b>재료 : </b>레드향 1개, 아보카도 1개, 토마토 1개, 샐러드 채소 30g</p> <p><b>드레싱: </b>올리브유 1큰술, 레몬즙 2큰술, 꿀 1큰술, 소금 약간</p> <h4>재료 준비</h4> <ol type="a" start="1"> <li>샐러드 채소를 씻고 물기를 제거한 후 준비합니다.</li> <li>레드향과 아보카도, 토마토를 먹기 좋은 크기를 썰어둡니다.</li> </ol> <h4>드레싱 준비</h4> <ol type="a" start="3"> <li>드레싱 재료를 믹서에 갈아줍니다</li> </ol> <h4>샐러드 완성</h4> <ol type="a" start="4"> <li>볼에 샐러드 채소와 썰어 둔 레드향, 아보카도, 토마토를 넣고 드레싱을 뿌리면 끝!</li> </ol> </body> </html>2. 아래와 같이 순서없는 목록 만들기
나의풀이
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <h2>레드향 샐러드 레시피</h2> <p><b>재료: </b>레드향 1개, 아보카도 1개, 토마토 1개, 샐러드 채소 30g</p> <p><b>드레싱: </b>올리브유 1큰술, 레몬즙 2큰술, 꿀 1큰술, 소금 약간</p> <ul> <li>샐러드 채소를 씻고 물기를 제거한 후 준비합니다.</li> <li>레드향과 아보카도, 토마토를 먹기 좋은 크기를 썰어둡니다.</li> <li>드레싱 재료를 믹서에 갈아줍니다.</li> <li>볼에 샐러드 채소와 썰어 둔 레드향, 아보카도, 토마토를 넣고 드레싱을 뿌리면 끝!</li> </ul> </body> </html>해설풀이
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>상품 소개 페이지</title> </head> <body> <h2>레드향 샐러드 레시피</h2> <p><b>재료 : </b>레드향 1개, 아보카도 1개, 토마토 1개, 샐러드 채소 30g</p> <p><b>드레싱 : </b>올리브유 1큰술, 레몬즙 2큰술, 꿀 1큰술, 소금 약간</p> <ul> <li>샐러드 채소를 씻고 물기를 제거한 후 준비합니다.</li> <li>레드향과 아보카도, 토마토를 먹기 좋은 크기를 썰어둡니다.</li> <li>드레싱 재료를 믹서에 갈아줍니다.</li> <li>볼에 샐러드 채소와 썰어 둔 레드향, 아보카도, 토마토를 넣고 드레싱을 뿌리면 끝!</li> </ul> </body> </html>'HTML&CSS > 실습' 카테고리의 다른 글
HTML 실습 - 이미지삽입 (0) 2023.01.22 CSS 실습 - 탐라국 입춘굿 (0) 2023.01.20 CSS 실습 - 클래스 선택자 사용하기 (0) 2023.01.20 실습 - 테이블 만들기 (0) 2023.01.17 레이아웃만들기 (0) 2023.01.05