카테고리 없음

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>