반응형
[문제1]
아래 사진을 보고 화면에 맞게 리스트를 채워보세요!
기호를 쓰는 리스트와 숫자를 쓰는 리스트를 구분해보아요!
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>동물 퀴즈</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f8ff;
text-align: center;
padding: 20px;
}
.quiz-section {
background-color: #ffffff;
border: 2px solid #4CAF50;
border-radius: 15px;
padding: 20px;
width: 60%;
margin: 0 auto;
box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.1);
}
ul, ol {
text-align: left;
display: inline-block;
}
h1 {
color: #4CAF50;
}
</style>
</head>
<body>
<h1>🐾 동물 퀴즈 🐾</h1>
<div class="quiz-section">
<h2>❓ 이 동물은 무엇일까요?</h2>
<p>힌트: 목이 길고, 아프리카에 살아요!</p>
//여기에 코끼리, 기린, 사자, 얼룩말이 들어가는 리스트를 만들어보세요!
<h2>✅ 정답을 찾았다면 아래 단계를 따라해 보세요!</h2>
// 여기에 설명이 들어가는 리스트를 만들어보세요!
</div>
</body>
</html>
[문제2]
월요일부터 일요일까지 리스트를 작성해주세요!
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>동물 퀴즈</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f8ff;
text-align: center;
padding: 20px;
}
.quiz-section {
background-color: #ffffff;
border: 2px solid #4CAF50;
border-radius: 15px;
padding: 20px;
width: 60%;
margin: 0 auto;
box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.1);
}
ul, ol {
text-align: left;
display: inline-block;
}
h1 {
color: #4CAF50;
}
</style>
</head>
<body>
<h1>요일순서맞추기</h1>
<div class="quiz-section">
<h2>월요일부터 일요일까지 작성해주세요!</h2>
//여기에 요일을 작성해주세요!
</div>
</body>
</html>
'웹사이트 만들기' 카테고리의 다른 글
| [5차시] 이미지 나타내기 (0) | 2025.04.02 |
|---|---|
| 자기소개 만들기 (0) | 2025.03.26 |
| [3차시]html 버튼 태그 사용하기 (0) | 2025.03.12 |
| [2차시] html에 글자 나타내기 (0) | 2025.02.11 |
| [1차시] html 실행하기 (0) | 2025.02.11 |
