코딩 공부/레이아웃

웹디자인 기능사 실기 A유형 1번 레이아웃

천서리 2023. 4. 29. 22:35
QUOTE THE DAY

“ 당신이 6개월 이상 한 번도 보지 않은 코드는 다른 사람이 다시 만드는 게 훨씬 더 나을 수 있다. ”

- 이글슨 (Eagleson)
반응형

웹디자인 기능사 실기 A유형 1번 레이아웃

 


코드

<!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>웹디자인 기능사 실기 A유형 1번 레이아웃</title>

    <link href="https://webfontworld.github.io/gmarket/GmarketSans.css" rel="stylesheet">

    <style>
        * {
            margin: 0;
            padding: 0;
            font-family: 'GmarketSans';
        }
        #wrap {
            width: 1200px;
            margin: 0 auto;
        }
        #header {
            width: 100%;
            height: 100px;
            display: flex;
        }
        .header {
            width: 20%;
            background-color: #eae4e9;
        }
        .nav {
            width: 80%;
            background-color: #fff1e6;
        }
        #section {
            width: 100%;
            height: 300px;
            background-color: #fde2e4;
        }
        #article {
            width: 100%;
            height: 200px;
            display: flex;
        }
        .a1 {
            width: 33.333%;
            background-color: #fad2e1;
        }
        .a2 {
            width: 33.333%;
            background-color: #e2ece9;
        }
        .a3 {
            width: 33.333%;
            background-color: #bee1e6;
        }
        #footer {
            width: 100%;
            height: 100px;
            display: flex;
        }
        .f1 {
            width: 20%;
            background-color: #f0efeb;
        }
        .f2 {
            width: 60%;
            background-color: #dfe7fd;
        }
        .f3 {
            width: 20%;
            background-color: #cddafd;
        }
    </style>
</head>
<body>
    <div id="wrap">
        <header id="header">
            <header class="header">로고</header>
            <nav class="nav">메뉴</nav>
        </header>
        <section id="section">이미지 슬라이드</section>
        <article id="article">
            <article class="a1">공지사항/갤러리</article>
            <article class="a2">배너</article>
            <article class="a3">바로가기</article>
        </article>
        <footer id="footer">
            <footer class="f1">로고</footer>
            <footer class="f2">COPYRIGHT</footer>
            <footer class="f3">SNS</footer>
        </footer> 
    </div>
</body>
</html>

 

반응형
Adventure Time - BMO