html과 css를 이용하여 웹 화면 구현해보기(1)

[참조사이트] https://dinfree.com/lecture/frontend/122_css_exam.html

Quiz-1) 소스코드 설명 페이지 만들기

이번 문제는 실행 결과와 같은 화면을 그대로 구현해 보는것을 목표로 합니다.
본문에 학과, 학번, 이름 등을 넣고 작성 합니다.
소스 코드 부분은 <xmp> 태그를 활용.

✅실행 결과

굉장히 쉬워보였는데 1시간 정도 걸려서 만들었다.
★reset의 중요성을 깨달았다★ 다음 실습엔 reset을 필수로 실행한 후 코드를 짜야겠다!!
다음 실습엔 CSS파일을 따로 만들어서 코드를 짜봐야겠다. 너무 지저분해보임.
margin과 padding의 차이를 막연하게 알고 있었는데, 실습을 통해 확실하게 알게 되었다.
마지막 블럭의 버튼 부분을 처음엔 input 태그로 했었는데 active 속성을 써보고 싶어서 a 태그로 바꿔서 코딩해봤다.

✅코드

<!DOCTYPE html>
<html lang="ko">
<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>css-proj1</title>
    <style>
        #all div {
            margin: 40px 50px;
        }

        #main p {
            margin: 0;
            color: white;
        }

        #header {
            text-align: center;
            color: white;
            background-color: rgb(70, 166, 245);
        }

        #main {
            background-color: rgb(241, 115, 98);
            padding: 40px;
        }

        #example {
            padding: 20px;
            background-color: rgb(233, 233, 233);
        }

        #example>h3 {
            font-size: 30px;
            margin-top: 0;
        }

        #example>div {
            background-color: white;
            margin: 20px 0;
            padding: 10px 30px;
            border-left: 8px solid rgb(6, 243, 6);
        }

        #example>a {
            background-color: rgb(95, 201, 95);
            border: none;
            color: white;
            padding: 8px 15px;
            font-size: 15px;
            cursor: pointer;
            text-decoration: none;
        }

        #example>a:active { background-color: green;}

    </style>
</head>
<body>
<div id="all">
     <div id="header">
        <h1>CSS Quize-1</h1>
     </div>

     <div id="main">
        <P>Department: Computer Engineering</P>
        <p>Sudent Name: ddd </P>
        <p>Student ID: 202300000</P>
    </div>

    <div id="example">

        <h3>Example</h3>

        <div>
            <xmp><h1>Hello World</h1></xmp>
            <xmp><p>Lorem ipsum...</p></xmp>
        </div>

        <!-- <input type="button" value="Try it Yourself>>"> -->
        <a href="#">Try it Yourself>></a>

    </div>
</div>
</body>
</html>