레이아웃 유형(A-1)

<!DOCTYPE html>
<html lang="kr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>A-1 유형</title>
    <style>
        *{padding:1; margin:0;}
        #wrap{width: 1200px; margin:0 auto;}
        header{width:100%; height: 100px; background-color: #ccc;}
        header .logo{background-color: #ccca22; width: 20%; height: 100px;}
        header .nav{background-color: #867aa3; width: 80%; height: 100px;}
        #slider{width: 100%; height: 300px; background-color: #f2aeae;}
        #contents{width: 100%; height: 200px; background-color: #867979; display: flex;}
        .notice{width: 33.3333%; height: 200px; background-color: #38203e;}
        .banner{width: 33.3333%; height: 200px; background-color: #a172a1;}
        .forward{width: 33.3333%; height: 200px; background-color: #fcc3ff;}
        footer{width: 100%; height: 100px; background-color: #989891; display: flex;}
        .footer1{width: 20%; height: 100px; background-color: #d6d6d6;}
        .footer2{width: 60%; height: 100px; background-color: #9c9696;}
        .footer3{width: 20%; height: 100px; background-color: #cdcdcd;}
    </style>
</head>
<body>
  <div id="wrap">
    <header>
        <div class="logo"></div>
        <div class="nav"></div>
    </header>
    <!-- header -->
    <div id="slider"></div>
    <div id="contents">
        <div class="notice"></div>
        <div class="banner"></div>
        <div class="forward"></div>
    </div>
    <!-- contents -->
    <footer>
        <div class="footer1"></div>
        <div class="footer2"></div>
        <div class="footer3"></div>
    </footer>
  </div>  
</body>
</html>

출처 :

https://www.youtube.com/watch?v=gm4YGPv6jR0&list=PL4UVBBIc6giK95pWwwoTQP82aI9iGNo-g

https://webstoryboy.github.io/webstoryboy/w_webd/index.html

2023 웹디자인 기능사 실기

webstoryboy.github.io

https://www.figma.com/file/iD3Ehm4HRhe16Vx6kxz3ob/%5B%ED%8F%AC%ED%8A%B8%ED%8F%B4%EB%A6%AC%EC%98%A4%EA%B0%80-%EC%8B%A4%EB%A0%A5%EC%9D%B4%EB%8B%A4%5D-%EC%82%AC%EC%9D%B4%ED%8A%B8-%EC%A0%9C%EC%9E%91%ED%8E%B8?type=design&node-id=26248-1098&mode=design

'유튜브 영상 > 웹디자인기능사-webstoryboy' 카테고리의 다른 글

레이아웃 유형(B-2) (0)	2024.03.14
레이아웃 유형(B-1) (1)	2024.03.14
레이아웃 유형(A-4) (1)	2024.03.14
레이아웃 유형(A-3) (0)	2024.03.14
레이아웃 유형(A-2) (0)	2024.03.14