...
728x90
반응형
웹디자인 기능사 실기를 대비해 기본적인 레이아웃 짜기
여러가지 유형의 레이아웃을 기본적인 틀 구성만 한번 해보도록 하겠습니다.
A 유형 HTML + CSS (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>
</head>
<style>
* {
padding: 0;
margin: 0;
}
#wrap {
width: 1200px;
margin: 0 auto;
}
#header {
height: 100px;
display: flex;
}
#header .left {
width: 30%;
background-color: #9FCEDF;
}
#header .right {
width: 70%;
background-color: #94BEDB;
}
#main {
height: 500px;
}
#main .top {
height: 300px;
background-color: #8CAFD9;
}
#main .bottom {
height: 200px;
display: flex;
}
#main .bottom .notice {
width: 33.33%;
background-color: #8898D7;
}
#main .bottom .banner {
width: 33.33%;
background-color: #8189D5;
}
#main .bottom .link {
width: 33.33%;
background-color: #7B79D2;
}
#footer {
height: 100px;
display: flex;
}
#footer .logo {
width: 20%;
background-color: #8375D1;
}
#footer .copyright {
width: 60%;
background-color: #9F71D0;
}
#footer .sns {
width: 20%;
background-color: #7F58B6;
}
</style>
<body>
<div id="wrap">
<header id="header">
<div class="left"></div>
<div class="right"></div>
</header>
<main id="main">
<div class="top"></div>
<div class="bottom">
<div class="notice"></div>
<div class="banner"></div>
<div class="link"></div>
</div>
</main>
<footer id="footer">
<div class="logo"></div>
<div class="copyright"></div>
<div class="sns"></div>
</footer>
</div>
</body>
</html>B유형 HTML + CSS (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>웹디자인 기능사 실기 B유형 1번 레이아웃</title>
<style>
* {
margin: 0;
padding: 0;
}
#wrap {
width: 100%;
margin: 0 auto;
}
.container {
width: 1200px;
margin: 0 auto;
}
#header {
width: 100%;
height: 100px;
background-color: #e4c0c0;
}
#header .container {
height: inherit;
display: flex;
}
#header .header1 {
width: 20%;
background-color: #ffe8e8;
}
#header .header2 {
width: 80%;
background-color: #ffd0d0;
}
#main .main1 {
height: 300px;
background-color: #ffb6b6;
}
#main .main2 {
height: 200px;
display: flex;
background-color: #ccc;
}
#main .main2 .main2-1 {
width: 33.33%;
height: inherit;
background-color: #ffd9d9;
}
#main .main2 .main2-2 {
width: 33.33%;
height: inherit;
background-color: #ffcdcd;
}
#main .main2 .main2-3 {
width: 33.33%;
height: inherit;
background-color: #ffbebe;
}
#footer {
width: 100%;
height: 100px;
background-color: #cab0b0;
}
#footer .container {
height: inherit;
display: flex;
}
#footer .footer1 {
width: 20%;
height: inherit;
background-color: #ffadad;
}
#footer .footer2 {
width: 80%;
height: inherit;
}
#footer .footer2 .footer2-1 {
height: 50%;
background-color: rgb(235, 175, 175);
}
#footer .footer2 .footer2-2 {
height: 50%;
background-color: #ffb9b9;
}
</style>
</head>
<body>
<div id="wrap">
<header id="header">
<div class="container">
<div class="header1"></div>
<div class="header2"></div>
</div>
</header>
<div class="container">
<main id="main">
<div class="main1"></div>
<div class="main2">
<article class="main2-1"></article>
<article class="main2-2"></article>
<article class="main2-3"></article>
</div>
</main>
</div>
<footer id="footer">
<div class="container">
<div class="footer1"></div>
<div class="footer2">
<div class="footer2-1"></div>
<div class="footer2-2"></div>
</div>
</div>
</footer>
</div>
</body>
</html>C유형 HTML + CSS (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>웹디자인 기능사 실기 C유형 1번 레이아웃</title>
<style>
* {
margin: 0;
padding: 0;
}
#wrap {
width: 1000px;
height: 650px;
display: flex;
}
#aside {
width: 30%;
}
#aside .aside1 {
height: 20%;
background-color: #f7ffe3;
}
#aside .aside2 {
height: 80%;
background-color: #ebffb8;
}
.container {
width: 70%;
}
#main .main1 {
height: 350px;
background-color: #e5fda8;
}
#main .main2 {
height: 200px;
display: flex;
}
#main .main2 .main2-1 {
width: 33.33%;
height: inherit;
background-color: #ddff87;
}
#main .main2 .main2-2 {
width: 33.33%;
height: inherit;
background-color: #d7f195;
}
#main .main2 .main2-3 {
width: 33.33%;
height: inherit;
background-color: #d1e798;
}
#footer {
height: 100px;
display: flex;
}
#footer .footer1 {
width: 20%;
height: inherit;
background-color: #e0f3af;
}
#footer .footer2 {
width: 80%;
height: inherit;
}
#footer .footer2 .footer2-1 {
height: 50%;
background-color: #d6ff6d;
}
#footer .footer2 .footer2-2 {
height: 50%;
background-color: #c5ee5d;
}
</style>
</head>
<body>
<div id="wrap">
<aside id="aside">
<div class="aside1"></div>
<div class="aside2"></div>
</aside>
<div class="container">
<main id="main">
<div class="main1"></div>
<div class="main2">
<div class="main2-1"></div>
<div class="main2-2"></div>
<div class="main2-3"></div>
</div>
</main>
<footer id="footer">
<div class="footer1"></div>
<div class="footer2">
<div class="footer2-1"></div>
<div class="footer2-2"></div>
</div>
</footer>
</div>
</div>
</body>
</html>D유형 HTML + CSS (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>웹디자인 기능사 실기 D유형 1번 레이아웃</title>
<style>
* {
margin: 0;
padding: 0;
}
#wrap {
display: flex;
flex-wrap: wrap;
}
#aside {
width: 200px;
height: 850px;
}
#aside h1 {
width: 100%;
height: 150px;
background-color: #ffeded;
}
#aside nav {
width: 100%;
height: 700px;
background-color: #fdcfcf;
}
#main {
width: calc(100% - 200px);
height: 850px;
background-color: #ffc1c1;
}
#slider {
width: 100%;
height: 400px;
background-color: #ffbebe;
position: relative;
}
#slider .link {
position: absolute;
width: 100px;
height: 300px;
right: 0;
top: 0;
background-color: #ccc;
}
#banner {
width: 100%;
height: 200px;
background-color: #ffa9a9;
}
#contents {
width: 100%;
height: 250px;
background-color: #ffa1a1;
}
#footer {
width: 100%;
height: 100px;
display: flex;
}
#footer .footer1 {
width: 15%;
height: inherit;
background-color: #ffb0b0;
}
#footer .footer2 {
width: 60%;
height: inherit;
background-color: #ee9d9d;
}
#footer .footer3 {
width: 25%;
height: inherit;
background-color: #e98888;
}
</style>
</head>
<body>
<div id="wrap">
<aside id="aside">
<h1></h1>
<nav></nav>
</aside>
<main id="main">
<article id="slider">
<div class="link"></div>
</article>
<article id="banner"></article>
<article id="contents"></article>
</main>
<footer id="footer">
<div class="footer1"></div>
<div class="footer2"></div>
<div class="footer3"></div>
</footer>
</div>
</body>
</html>E유형 HTML + CSS (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>웹디자인 기능사 실기 E유형 1번 레이아웃</title>
<style>
* {
margin: 0;
padding: 0;
}
#wrap {
width: 100%;
height: 100vh;
display: flex;
flex-wrap: wrap;
}
#main {
width: 100%;
height: calc(100vh - 120px);
display: flex;
background-color: #d8dbff;
}
#aside {
width: 200px;
height: inherit;
background-color: #959be2;
}
#aside .aside1 {
height: 10%;
background-color: #b0b6f8;
}
#aside .aside2 {
height: 90%;
background-color: #9aa2fd;
}
#article {
width: 400px;
height: inherit;
}
#article .article1 {
height: 15%;
background-color: #5c63b1;
}
#article .article2 {
height: 35%;
background-color: #6973dd;
}
#article .article3 {
height: 35%;
background-color: #434ca7;
}
#article .article4 {
height: 15%;
background-color: #505ce2;
}
#section {
width: calc(100% - 600px);
height: inherit;
background-color: #323777;
}
#footer {
width: 100%;
height: 120px;
display: flex;
}
#footer .footer1 {
width: 200px;
height: inherit;
background-color: #bcc2ff;
}
#footer .footer2 {
width: calc(100% - 200px);
height: inherit;
}
#footer .footer2 .footer2-1 {
height: 50%;
background-color: #b3b8ec;
}
#footer .footer2 .footer2-2 {
height: 50%;
background-color: #8c94e9;
}
</style>
</head>
<body>
<div id="wrap">
<main id="main">
<aside id="aside">
<div class="aside1"></div>
<div class="aside2"></div>
</aside>
<article id="article">
<div class="article1"></div>
<div class="article2"></div>
<div class="article3"></div>
<div class="article4"></div>
</article>
<section id="section"></section>
</main>
<footer id="footer">
<div class="footer1"></div>
<div class="footer2">
<div class="footer2-1"></div>
<div class="footer2-2"></div>
</div>
</footer>
</div>
</body>
</html>728x90
반응형