웹디자인기능사 A-3유형 레이아웃

by 데브수달 2023. 8. 30. 21:16

728x90

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>강화천문대</title>
    <link rel="stylesheet" href="css/common.css">
    <script src="js/jquery-1.12.3.js"></script>
    <script src="js/java script.js"></script>
</head>
<body>
    <div class="header">
        <h1>로고</h1>
        <div class="gnb">메인메뉴</div>
    </div>
    <div class="main"></div>
    <div class="contents">
        <div class="board"></div>
        <div class="banner"></div>
        <div class="now"></div>
    </div>
    <div class="footer">
        <h1>로고</h1>
        <div class="fwrap">
            <div class="fnav">하단메뉴</div>
            <p>카피라이트</p>
        </div>
    </div>
</body>
</html>

@charset "UTF-8"

*{
    padding: 0; margin: 0;
    font-family: "맑은 고딕", sans-serif;
    color: #333;
    font-size: 14px;
    box-sizing: border-box;
}

li{
    list-style: none;
}
a{text-decoration: none;}
img{
    display: block;
    border: none;
}

.header{
    width: 1200px; height: 100px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    
}
.header h1{
    width: 250px; height: 100px;
    background-color: pink;
}
.gnb{
    width: 600px; height: 40px;
    background-color: blue;
}
.main{
    width: 1200px; height: 300px;
    margin: 0 auto;
}

.contents{
    width: 1200px; height: 200px;
    margin: 0 auto;
    
}

.board{
    width: 400px; height: 200px;
    background-color: blanchedalmond0;
}
.banner{
    width: 400px; height: 200px;
    background-color: blanchedalmond0;
}
.now{
    width: 400px; height: 200px;
    background-color: blanchedalmond0;
}
.footer{
    width: 1200px; height: 100px;
    margin: 0 auto;
   
}
.footer h1{
    width: 250px; height: 100px;
    background-color: rgb(109, 115, 121);
}
.fwrap{
    width: 950px; height: 100px;
    background-color: aliceblue;
}

.fnav{
    width: 100px; height: 50px;
    background-color: rgb(37, 116, 185);
}

.footer p1{
    width: 100px; height: 50px;
    background-color: rgb(77, 136, 187);
}

728x90

'[자격증 준비] > 웹디자인기능사' 카테고리의 다른 글

웹디자인기능사 슬라이드 효과(좌우,상하,페이드인아웃) (2)	2024.03.05
실전코딩 1. 공지사항- 글자줄임 기능 (0)	2023.11.30
[웹디자인기능사 실기 준비] A-1유형 레이아웃 (1)	2023.10.09
2023년 웹디자인기능사A유형 레이아웃 (0)	2023.04.01