본문 바로가기
프로그램/HTML5 & JavaScript 1000제

HTML5 25제] HTML & CSS for Beginner Chapter 07. MINI PROJECT 07 크리스마스 이벤트 페이지 만들기

by 건티 2021. 11. 12.
728x90

문제]

 

1. 배경 이미지를 화면에 한 번만 출력되게 하고, 페이지의 모든 글자는 글꼴을 맑은 고딕으로 지정하시오.

2. 이벤트 날짜의 글자 색상은 노란색(#ffff00), 크기는 28px, 두께는 일반으로 지정하시오.

3. '겨울을 맞이하여 --- 해택을 받으세요.'의 글자 색상은 희색(#ffffff). 크기는 14px로 지정하시오.

4. 배경이미지의 출처는 크리스천투데이(https://www.christiantoday.co.kr/news/306991)를 참조하시오.

 

 

참고풀이]

<!DOCTYPE html>
<html lang="kor">
    <head>
        <meta charset="utf-8">
        <title>크리스마스 이벤트</title>
        <style>
            body{
                background-image:url("christmas_bg.png");
                background-repeat:no-repeat;
                font-family:"맑은 고딕";
            }

            h2{
                font-size:28px;
                font-weight:normal;
                color:#ffff00;
            }
           
            p{
                font-size:14px;
                color:#ffffff
            }
        </style>
    </head>
    <body>
        <h2>2021.12.22 - 2022.1.20</h2>
        <p>
            겨울을 맞이하여 크리스마스 이벤트를 준비하였습니다.<br>
            참여하여 다양한 혜택을 받으세요.
        </p><br>
        <p>
        &nbsp;&nbsp;&nbsp;&nbsp; <img src="emo_button.png" width=200 height=50>
        <br><br><br><br><br><br><br><br><br>
        </p>
        배경이미지 출처 : 크리스천투데이(<a href="https://www.christiantoday.co.kr/news/306991">크리스마스의 유래</a>)

       
    </body>
</html>

 

 

 

대한민국의 아름다운 영토, 독도의 여름

 

반응형

댓글