04/20 20차 웹개발 과제

Noh Sinyoung·2023년 4월 20일
0

과제

목록 보기
20/27
<!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>Document</title>

    <link rel="stylesheet" href="0420 웹개발 과제.css">

</head>
<body>
    <header>
        <svg id="SvgjsSvg1011" width="400px" xmlns="http://www.w3.org/2000/svg" version="1.1" xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" preserveAspectRatio="xMidYMid meet" viewBox="0.000012221168617543299 0.000007507289410568774 281.1252136230469 147" overflow="visible"><defs id="SvgjsDefs1012"></defs><g id="SvgjsG1013" transform="scale(0.800926460743071)" opacity="1"><g id="SvgjsG1014" class="Aj7gGVPOJ" transform="translate(122.10242048451803, -7.480780029371424) scale(1.0679707545902553)" light-content="false" non-strokable="false" fill="#10b74a"><path d="M98.8 56.7c-1.3-1.9-2.8-4.7-4.2-7.5-1.4-2.7-2.5-7.3-2.5-10.3l-.1-1c-1.2-18-16.9-32.2-35.5-30.8-11 .8-20.6 7.1-26 16.1l6.4 1.8 11.5 12.8 7.2 8.4h-29l-.4-.8c.2 1 .4 2 .6 2.9l27.5.2-19.6 10.3-2.2 1.3c.4.6.9 1.2 1.4 1.7v14.9c0 1.4.9 2.7 2.2 3.1l38.2 13c1.4.5 2.9-.6 2.9-2.1v-8h9.1c3.2 0 5.8-2.6 5.8-5.8V61.1h4.3c2.3 0 3.7-2.5 2.4-4.4zM58.5 46.2l-9.8-11.4 18.9-6.3-4.4 8.4-4.7 9.3zm6.9-9l4.4-8.4 9.4 8.7-13.8-.3zm-41.5 9L.7 28.5l13.3-.3 9.9 18zm2.2-.8l-9.5-17.2-5.9-10.7 19.8 5.6c-2.9 4.8-4.6 10.3-4.8 16.1 0 2.1.1 4.2.4 6.2zm.6 2.9c1.1 4.3 3.1 8.3 5.7 11.8L10.3 72.9l16.4-24.5v-.1z"></path></g><g id="SvgjsG1015" class="text" transform="translate(175.8000030517578, 149.79745061299226) scale(1)" light-content="false" fill="#3b3b3b"><path d="M-165.3 -37.14L-161.52 -37.14C-160.48 -37.14 -159.58 -36.77 -158.82 -36.03C-158.06 -35.29 -157.68 -34.38 -157.68 -33.3L-157.68 -28.5C-157.68 -27.46 -158.06 -26.56 -158.82 -25.8C-159.58 -25.04 -160.48 -24.66 -161.52 -24.66L-165.3 -24.66C-166.38 -24.66 -167.29 -25.04 -168.03 -25.8C-168.77 -26.56 -169.14 -27.46 -169.14 -28.5L-169.14 -33.3C-169.14 -34.38 -168.77 -35.29 -168.03 -36.03C-167.29 -36.77 -166.38 -37.14 -165.3 -37.14ZM-161.52 -43.8L-165.3 -43.8C-166.74 -43.8 -168.1 -43.52 -169.38 -42.96C-170.66 -42.4 -171.77 -41.64 -172.71 -40.68C-173.65 -39.72 -174.4 -38.61 -174.96 -37.35C-175.52 -36.09 -175.8 -34.74 -175.8 -33.3L-175.8 -28.5C-175.8 -27.06 -175.52 -25.7 -174.96 -24.42C-174.4 -23.14 -173.65 -22.03 -172.71 -21.09C-171.77 -20.15 -170.66 -19.41 -169.38 -18.87C-168.1 -18.33 -166.74 -18.06 -165.3 -18.06L-161.52 -18.06C-160.08 -18.06 -158.72 -18.33 -157.44 -18.87C-156.16 -19.41 -155.05 -20.15 -154.11 -21.09C-153.17 -22.03 -152.43 -23.14 -151.89 -24.42C-151.35 -25.7 -151.08 -27.06 -151.08 -28.5L-151.08 -33.3C-151.08 -34.74 -151.35 -36.09 -151.89 -37.35C-152.43 -38.61 -153.17 -39.72 -154.11 -40.68C-155.05 -41.64 -156.16 -42.4 -157.44 -42.96C-158.72 -43.52 -160.08 -43.8 -161.52 -43.8ZM-166.92 -5.1L-166.92 -13.38L-173.64 -13.38L-173.64 1.38L-137.28 1.38L-137.28 -44.04L-144 -44.04L-144 -5.1Z M-112.56 -24.36L-124.8 -24.36L-124.8 -19.08L-83.52 -19.08L-83.52 -24.36L-88.92 -24.36L-86.82 -37.32L-86.82 -43.8L-121.86 -43.8L-121.86 -37.32L-94.02 -37.32L-96.12 -24.36L-105.54 -24.36L-105.54 -33L-112.56 -33ZM-94.08 -15.78L-114.24 -15.78C-115.44 -15.78 -116.56 -15.57 -117.6 -15.15C-118.64 -14.73 -119.54 -14.15 -120.3 -13.41C-121.06 -12.67 -121.66 -11.77 -122.1 -10.71C-122.54 -9.65 -122.76 -8.48 -122.76 -7.2C-122.76 -5.92 -122.54 -4.75 -122.1 -3.69C-121.66 -2.63 -121.06 -1.73 -120.3 -0.99C-119.54 -0.25 -118.64 0.33 -117.6 0.75C-116.56 1.17 -115.44 1.38 -114.24 1.38L-94.08 1.38C-92.88 1.38 -91.76 1.17 -90.72 0.75C-89.68 0.33 -88.78 -0.25 -88.02 -0.99C-87.26 -1.73 -86.66 -2.63 -86.22 -3.69C-85.78 -4.75 -85.56 -5.92 -85.56 -7.2C-85.56 -8.48 -85.78 -9.65 -86.22 -10.71C-86.66 -11.77 -87.26 -12.67 -88.02 -13.41C-88.78 -14.15 -89.68 -14.73 -90.72 -15.15C-91.76 -15.57 -92.88 -15.78 -94.08 -15.78ZM-114.24 -9.72L-94.08 -9.72C-93.52 -9.72 -93.04 -9.48 -92.64 -9C-92.24 -8.52 -92.04 -7.92 -92.04 -7.2C-92.04 -6.48 -92.24 -5.88 -92.64 -5.4C-93.04 -4.92 -93.52 -4.68 -94.08 -4.68L-114.24 -4.68C-114.8 -4.68 -115.28 -4.92 -115.68 -5.4C-116.08 -5.88 -116.28 -6.48 -116.28 -7.2C-116.28 -7.92 -116.08 -8.52 -115.68 -9C-115.28 -9.48 -114.8 -9.72 -114.24 -9.72Z M-53.4 -22.92L-46.74 -37.26L-46.74 -43.8L-71.52 -43.8L-71.52 -37.26L-54.72 -37.26L-72.3 1.2L-64.62 1.2L-57.48 -14.04L-51.9 1.2L-44.28 1.2ZM-33.06 1.38L-33.06 -44.04L-39.72 -44.04L-39.72 1.38Z M-18.6 -6.9C-18.6 -5.74 -18.38 -4.65 -17.94 -3.63C-17.5 -2.61 -16.9 -1.73 -16.14 -0.99C-15.38 -0.25 -14.48 0.33 -13.44 0.75C-12.4 1.17 -11.28 1.38 -10.08 1.38L10.08 1.38C11.28 1.38 12.4 1.17 13.44 0.75C14.48 0.33 15.38 -0.25 16.14 -0.99C16.9 -1.73 17.5 -2.61 17.94 -3.63C18.38 -4.65 18.6 -5.74 18.6 -6.9C18.6 -8.1 18.38 -9.2 17.94 -10.2C17.5 -11.2 16.9 -12.07 16.14 -12.81C15.38 -13.55 14.48 -14.14 13.44 -14.58C12.4 -15.02 11.28 -15.24 10.08 -15.24L-10.08 -15.24C-11.28 -15.24 -12.4 -15.02 -13.44 -14.58C-14.48 -14.14 -15.38 -13.55 -16.14 -12.81C-16.9 -12.07 -17.5 -11.2 -17.94 -10.2C-18.38 -9.2 -18.6 -8.1 -18.6 -6.9ZM-12.06 -6.9C-12.06 -7.5 -11.86 -8 -11.46 -8.4C-11.06 -8.8 -10.56 -9 -9.96 -9L9.96 -9C10.56 -9 11.06 -8.8 11.46 -8.4C11.86 -8 12.06 -7.5 12.06 -6.9C12.06 -6.34 11.86 -5.86 11.46 -5.46C11.06 -5.06 10.56 -4.86 9.96 -4.86L-9.96 -4.86C-10.56 -4.86 -11.06 -5.06 -11.46 -5.46C-11.86 -5.86 -12.06 -6.34 -12.06 -6.9ZM-11.16 -34.44L-11.16 -44.04L-17.64 -44.04L-17.64 -27.96L17.64 -27.96L17.64 -34.44ZM20.64 -24.48L-20.64 -24.48L-20.64 -18.6L20.64 -18.6Z M63.84 -15.12L34.56 -15.12L34.56 1.38L71.04 1.38L71.04 -44.04L63.84 -44.04L63.84 -33.96L54.96 -33.96L54.96 -27.48L63.84 -27.48ZM49.68 -18.36L53.16 -37.62L53.16 -43.8L31.44 -43.8L31.44 -37.32L45.72 -37.32L44.82 -32.34L32.16 -32.34L32.16 -26.34L43.74 -26.34L42.3 -18.36ZM41.58 -4.92L41.58 -8.88L63.96 -8.88L63.96 -4.92Z M122.88 -20.94L122.88 -27.42L116.94 -27.42L116.94 -37.26L122.88 -37.26L122.88 -43.8L85.38 -43.8L85.38 -37.26L91.8 -37.26L91.8 -27.42L85.38 -27.42L85.38 -20.94ZM124.8 -17.16L83.52 -17.16L83.52 -11.16L92.64 -11.16L92.64 1.38L99.36 1.38L99.36 -11.16L108.96 -11.16L108.96 1.38L115.68 1.38L115.68 -11.16L124.8 -11.16ZM99.12 -27.42L99.12 -37.26L109.56 -37.26L109.56 -27.42Z M136.8 -43.8L136.8 1.14L159.12 1.14L159.12 -5.22L143.94 -5.22L143.94 -18.66L157.26 -18.66L157.26 -25.08L143.94 -25.08L143.94 -37.32L158.28 -37.32L158.28 -43.8ZM175.2 1.38L175.2 -44.04L168.36 -44.04L168.36 -25.38L160.92 -25.38L160.92 -18.6L168.36 -18.6L168.36 1.38Z"></path></g><g id="SvgjsG1016" class="text" transform="translate(175.45000274658202, 181.75744962117096) scale(1)" light-content="false" fill="#10b74a"><path d="M-72.54 1.25L-59.59 1.25L-59.59 -0.59L-70.39 -0.59L-70.39 -3.75L-72.54 -3.75ZM-75.37 -4.86L-57.5 -4.86L-57.5 -6.68L-65.31 -6.68L-65.31 -9.84L-67.48 -9.84L-67.48 -6.68L-75.37 -6.68ZM-72.75 -9.2L-59.82 -9.2L-59.82 -10.98L-70.59 -10.98L-70.59 -14.2L-59.92 -14.2L-59.92 -15.98L-72.75 -15.98Z M-47.81 1.5L-34.63 1.5L-34.63 -0.29L-45.66 -0.29L-45.66 -1.91L-35.18 -1.91L-35.18 -6.82L-47.93 -6.82L-47.93 -5.02L-37.32 -5.02L-37.32 -3.48L-47.81 -3.48ZM-37.36 -7.54L-35.18 -7.54L-35.18 -10.76L-32.81 -10.76L-32.81 -12.71L-35.18 -12.71L-35.18 -16.58L-37.36 -16.58ZM-50.94 -8.79L-49.75 -7.34C-48.76 -7.67 -47.76 -8.18 -46.77 -8.88C-45.77 -9.57 -45.05 -10.25 -44.61 -10.92C-44.14 -10.29 -43.44 -9.68 -42.52 -9.07C-41.6 -8.47 -40.71 -8.01 -39.86 -7.71L-38.79 -9.14C-39.9 -9.58 -40.92 -10.17 -41.87 -10.91C-42.83 -11.64 -43.33 -12.43 -43.4 -13.28L-43.42 -13.96L-39.45 -13.96L-39.45 -15.76L-49.9 -15.76L-49.9 -13.96L-45.88 -13.96L-45.88 -13.26C-45.93 -12.6 -46.26 -11.95 -46.86 -11.32C-47.45 -10.69 -48.1 -10.18 -48.78 -9.79C-49.46 -9.39 -50.18 -9.06 -50.94 -8.79Z M-16.86 -7.91L-12.09 -7.91L-12.09 1.78L-9.9 1.78L-9.9 -16.58L-12.09 -16.58L-12.09 -9.98L-16.86 -9.98ZM-24.8 -1.7L-15.96 -1.7L-15.96 -15.27L-18.07 -15.27L-18.07 -10.59L-22.7 -10.59L-22.7 -15.27L-24.8 -15.27ZM-22.7 -3.65L-22.7 -8.61L-18.07 -8.61L-18.07 -3.65Z M-3.79 1.25L9.38 1.25L9.38 -0.64L-1.64 -0.64L-1.64 -4.53L-3.79 -4.53ZM-6.54 -5.82L11.33 -5.82L11.33 -7.64L-6.54 -7.64ZM-3.83 -10.21L9.3 -10.21L9.3 -11.99L-1.66 -11.99L-1.66 -16.29L-3.83 -16.29Z M28.26 0.96L30.23 0.96L30.23 -7.19L32.48 -7.19L32.48 1.78L34.59 1.78L34.59 -16.58L32.48 -16.58L32.48 -9.26L30.23 -9.26L30.23 -16.07L28.26 -16.07ZM18.4 -2.23L20.02 -0.94C24.3 -4.58 26.45 -9.2 26.45 -14.79L19.22 -14.79L19.22 -12.87L24.18 -12.87C24.15 -11.09 23.66 -9.24 22.7 -7.34C21.73 -5.44 20.3 -3.74 18.4 -2.23Z M40.72 1.5L53.89 1.5L53.89 -0.23L42.87 -0.23L42.87 -1.74L53.36 -1.74L53.36 -6.43L40.63 -6.43L40.63 -4.69L51.21 -4.69L51.21 -3.24L40.72 -3.24ZM51.15 -7.17L53.34 -7.17L53.34 -10.7L55.7 -10.7L55.7 -12.68L53.34 -12.68L53.34 -16.58L51.15 -16.58ZM38.57 -7.95L48.05 -7.95L48.05 -16.13L45.94 -16.13L45.94 -13.79L40.68 -13.79L40.68 -16.13L38.57 -16.13ZM40.68 -9.69L40.68 -12.11L45.94 -12.11L45.94 -9.69Z M70.43 1.78L72.62 1.78L72.62 -6.99L75.47 -6.99L75.47 -9.1L72.62 -9.1L72.62 -16.58L70.43 -16.58ZM57.38 -2.34L58.93 -0.96C59.8 -1.54 60.7 -2.42 61.63 -3.58C62.56 -4.75 63.18 -5.81 63.5 -6.78C63.89 -5.83 64.51 -4.84 65.35 -3.81C66.2 -2.78 67.01 -1.97 67.77 -1.39L69.26 -2.75C68.75 -3.13 68.25 -3.58 67.75 -4.09C67.26 -4.61 66.76 -5.22 66.26 -5.93C65.76 -6.64 65.35 -7.44 65.03 -8.35C64.71 -9.25 64.55 -10.18 64.55 -11.11L64.55 -12.85L68.44 -12.85L68.44 -14.86L58.46 -14.86L58.46 -12.85L62.34 -12.85L62.34 -11.05C62.34 -9.99 62.18 -8.97 61.87 -8.02C61.55 -7.06 61.12 -6.22 60.59 -5.51C60.05 -4.79 59.53 -4.19 59.02 -3.69C58.52 -3.2 57.97 -2.75 57.38 -2.34Z"></path></g></g></svg>
        <h1>자기소개 포트폴리오</h1>
        <ul>
            <li>Main</li>
            <li>About</li>
            <li>Top</li>
            <li>Contact</li>
        </ul>
    </header>

    <hr>

    <div class="main">
        <div class="box1">
            <h1 class="title">가상 클래스를 활용한 UI 디자인</h1>
            <p class="p">목표가 없는 사람은 시간을 허투루 쓴다</p>
            <p class="p">물질은 내가 원하는 것을 이루기 위한 수단이지, 목표가 될 수 없다</p>
            <p class="p">꿈과 직업은 서로 다르다. 달라야 한다.</p>
            <p class="p">어디에 가치를 두느냐에 따라 인생이 달라진다</p>
        </div>
        <br>
        <div class="box2">
            <h1>사진 채우기</h1>
            
            <div style="background-image: url(data:image/jpeg;base64,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);" class="img"></div>
            <div style="background-image: url(https://d2x8kymwjom7h7.cloudfront.net/live/application_no/96001/default/COMMUNITY/3b30aba557724eaaa348d5b02fbf8b4b/454d7ad8215d400a929877514289c51d.jpg);" class="img"></div>
            
            <br>
            
            <div class="text">(놀람)</div>
            <div class="text">(감격)</div>
            
            <br>
            
            <div style="background-image: url(https://img.animalplanet.co.kr/news/2020/09/25/700/r2n22s8jn9z712nch75t.jpg);" class="img"></div>
            <div style="background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRLy48vVPAIQRDJsFtqQCjupRoMbHmjUGeuI5Rzj-qldEph3p8cU-h0rFlsMFBdQqJlkAE&usqp=CAU);" class="img"></div>
            
            <br>
            
            <div class="text">(허탈)</div>
            <div class="text">(분노)</div>

        </div>
    </div>

    <hr>

    <footer>
        <p class="footer">본 페이지는 개인 포트폴리오 용도로 작성되었습니다</p>
        <p class="footer">azaz220055@gmail.com | 010-0000-0000</p>
        <p class="footer">Copyright (c) 2023 All rights reserved</p>
    </footer>

</body>
</html>

=========================================================================================================

header {
    text-align: center;
}

ul {
    text-align: center;
    padding: 0;
}

li {
    box-sizing: border-box;
    display: inline-block;
    margin-left: 50px;
    margin-right: 50px;
    margin-top: 10px;
    margin-bottom: 10px;
    width: 100px;
    height: 50px;
    padding: 12px;
    cursor: pointer;
}
li:hover {
    background-color: rgb(219, 218, 218);
}
li:active {
    background-color: rgb(177, 177, 177);
}

.main {
    background-color: rgb(156, 201, 163);
    text-align: center;
    padding: 10px;
}

.box1 {
    width: 700px;
    background-color:white;
    margin-left: auto;
    margin-right: auto;
    padding-top: 10px;
    padding-bottom: 15px;
    border-radius: 20px;
}

.title {
    color: rgb(107, 167, 48);
}

p {
    line-height: 40px;
}

.box2 {
    width: 700px;
    background-color:white;
    margin-left: auto;
    margin-right: auto;
    border-radius: 20px;
    padding-top: 10px;
    padding-bottom: 20px;
}

.img {
    display: inline-block;
    width: 250px; height: 250px;
    background-repeat: no-repeat;
    background-size: cover;
}

.text {
    display: inline-block;
    width: 250px; height: 40px;
    padding-top: 10px;
}

.p {
    cursor: pointer;
    margin-left: 5%;
    margin-right: 5%;
}

.p:hover {
    background-color: rgb(219, 218, 218);
}
.p:active {
    background-color: rgb(177, 177, 177);
}

footer {
    text-align: center;
}

.footer {
    line-height: 15px;
    font-size: 10pt;
    color: rgb(183, 183, 183);
}

hr {
    margin: 15px;
}

0개의 댓글