04/25 21차 웹개발 과제

Noh Sinyoung·2023년 4월 25일
0

과제

목록 보기
21/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="0425 웹개발 과제.css">

</head>
<body>
    <header>
        <svg id="SvgjsSvg1011" width="150px" 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>
        <h4 style="margin:2px;">width 1200px / 아래 메뉴에 hover active 적용하기</h4>
        <ul>
            <li class="menu">메뉴</li>
            <li class="menu">공지사항</li>
            <li class="menu">갤러리</li>
            <li class="menu">웹디자인기능사</li>
            <li class="menu">접수 6월 8일</li>
        </ul>
    </header>
    
    <section>
        <div class="title">
            <h4>section 영역 width: 1200px height 400px</h4>
        </div>
        
        <div class="section_box1">
            <div class="sub">
                <div style="margin-left: 20px;">
                    <h4>width:570px</h4>
                    <h2>메뉴</h2>
                </div>
                <ul>
                    <li class="li1">리스트1</li>
                    <li class="li1">리스트2</li>
                    <li class="li1">리스트3</li>
                    <li class="li2">리스트4</li>
                    <li class="li3">리스트5</li>
                    <li class="li3">리스트6</li>
                </ul>
            </div>
            
            <div class="sub">
                <h4>width:570px height:300px</h4>
                <table>
                    <tr>
                        <td>table 홀수 줄에 색깔 넣기</td>
                        <td>table 홀수 줄에 색깔 넣기</td>
                    </tr>
                    <tr>
                        <td>CSS에 tr:nth-of-type 스타일 사용</td>
                        <td>CSS에 tr:nth-of-type 스타일 사용</td>
                    </tr>
                    <tr>
                        <td>홀수는 odd</td>
                        <td>홀수는 odd</td>
                    </tr>
                    <tr>
                        <td>짝수는 even</td>
                        <td>짝수는 even</td>
                    </tr>
                    <tr>
                        <td>홀수 줄</td>
                        <td>홀수 줄</td>
                    </tr>
                </table>
            </div>
        </div>
    </section>

    <section style="text-align: center;">
        <h4>section 영역 width:1200px height:400px</h4>
        <h4>div로 박스 3개 구현, width:350px height:300px</h4>
        
        <div class="section_box2">
            <div class="box">
                <img src="https://www.bottlehs.com/assets/vue-logo.png" alt="" width="350px">
                <h4></h4>
                <h4>1~2학기 예정</h4>
            </div>
            
            <div class="box">
                <img src="https://cdn.inflearn.com/wp-content/uploads/node.js-1.jpg" alt="" width="350px">
                <h4>노드.js</h4>
                <h4>2학기 예정</h4>
            </div>
            
            <div class="box">
                <img src="https://images.velog.io/images/protect-me/post/63dbafca-0a1a-4918-81d7-556332e62d51/velog_bootstrap.png" alt="" width="350px">
                <h4>부트스트랩</h4>
                <h4>1학기</h4>
            </div>
        </div>
    </section>
    
    <div class="main_box">

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

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

*{box-sizing: border-box;
margin: 0; padding: 0;}

body {
    background-color: antiquewhite;
}

header {
    background-color: white;
    width: 1200px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    padding: 10px;
    margin-top: 20px;
    margin-bottom: 20px;
    border-radius: 20px;
}

.menu {
    display: inline-block;
    border: 2px solid rgb(129, 129, 129);
    border-radius: 15px;
    padding: 7px;
    cursor: pointer;
}

.menu:hover {
    background-color: rgb(226, 226, 226);
}
.menu:active {
    background-color: rgb(194, 194, 194);
}

section {
    background-color: white;
    width: 1200px; height: 400px;
    margin-left: auto;
    margin-right: auto;
    padding: 10px;
    margin-top: 20px;
    margin-bottom: 20px;
    border-radius: 20px;
}

.sub {
    float: left;
    width: 570px; height: 300px;
    background-color: rgb(133, 160, 183);
    border-radius: 10px;
    text-align: left;
    padding: 20px;
    margin: 10px;
}

.title {
    text-align: center;
}

.section_box1 {
    text-align: center;
}

.sub > ul {
    margin-left: 20px;
}

td {
    border: 1px solid black;
    width: 270px;
    padding: 5px;
}

table {
    border-collapse: collapse;
}

tr:nth-of-type(odd) {
    background-color: antiquewhite;
}

.li1::after {
    content: "hot";
    background-color: red;
    border-radius: 4px;
    color: white;
    font-size: 6pt;
    margin-left: 5px;
    padding-left: 5px;
    padding-right: 5px;
}

.li2::after {
    content: "new";
    background-color: blue;
    border-radius: 4px;
    color: white;
    font-size: 6pt;
    margin-left: 5px;
    padding-left: 5px;
    padding-right: 5px;
}

.li3::after {
    content: "♥";
    background-color: rgb(209, 127, 198);
    border-radius: 4px;
    color: white;
    font-size: 6pt;
    margin-left: 5px;
    padding-left: 5px;
    padding-right: 5px;
}

.box {
    float: left;;
    width: 350px; height: 300px;
    margin: 5px;
    text-align: left;
    cursor: pointer;
}

.section_box2 {
    width: 1100px;
    display: inline-block;
}

0개의 댓글