카테고리 없음
20230717_TIL
웹개발자지망생
2023. 7. 18. 17:17
# 문제 1: "Hello, World!"를 화면에 출력하는 태그를 작성하세요
정답 : <h1>hello world!<h1>
# 문제 2: 리스트로 1부터 3까지의 숫자를 나타내세요.
정답 : <ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
# 문제 3: "클릭하세요!"라는 문구를 버튼으로 만드세요.
정답: <input type="button" value="클릭하세요"/>
# 문제 4: 이미지 태그를 이용하여 "example.jpg"라는 이미지를 표시하세요.
정답 : <img src="example.jpg">
# 문제 5: 링크를 이용하여 "https://www.example.com"로 이동하는 "Go to Example" 링크를 만드세요.
<a href="https://www.example.com">Go to Example</a>
# 문제 6: 태그의 텍스트 색상을 빨간색으로 변경하세요. 즉, 태그 선택자를 사용하여 스타일을 작성하세요.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p{
color:red;
}
</style>
</head>
<body>
<p>나는 빨간색</p>
</body>
</html>
# 문제 7: 클래스 선택자를 사용하여 여러 개의 태그에 동일한 스타일을 적용하세요.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.my-div {
color:red;
}
</style>
</head>
<body>
<div class="my-div">첫 번째 div</div>
<div class="my-div">두 번째 div</div>
<div class="my-div">세 번째 div</div>
</body>
</html>
# 문제 8: 아이디 선택자를 사용하여 특정 요소에 스타일을 적용하세요.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#my-id {
color: orange;
}
</style>
</head>
<body>
<p id="my-id">오렌지</p>
</body>
</html>
# 문제 9: 클래스 선택자를 사용하여 리스트 아이템()의 텍스트 색상을 초록색으로 변경하세요.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.green-text {
color:green;
}
</style>
<body>
<ul>
<li class="green-text">첫 번째 아이템</li>
<li>두 번째 아이템</li>
<li class="green-text">세 번째 아이템</li>
</ul>
</body>
</head>
</html>