728x90
반응형
웹디자인 기능사 시험 연습
오늘 웹디자인 기능사 시험을 연습해봤습니다.
웹디자인 기능사 중 레이아웃만 연습을 해봤습니다.
연습 문제는 Q-Net에 올라와있는 시험 문제를 활용해서 시도해봤습니다.
(https://www.q-net.or.kr/cst006.do?id=cst00602&gSite=Q&brdId=Q006&code=1204&artlSeq=5199079)
그 중 A타입 유형, B타입 유형, C타입 유형을 연습했습니다.
다행히 레이아웃 만드는 방법은 수업시간에 잘 가르쳐 주시고 연습을 많이 해서 엄청 어렵진 않았습니다.
방법 중에는 flex를 사용해서 했습니다.
각 유형을 확인해보니 유형 내에서 지정해 놓은 footer 구역이 서로 변화가 있습니다.
A타입 유형
<!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>
<style>
* {
margin: 0;
padding: 0;
}
#header .container {
display: flex;
}
#header .container .logo {
width: 20%;
height: 100px;
background-color: #edcaca;
}
#header .container .nav {
width: 80%;
height: 100px;
background-color: #df7171;
}
#slider .container {
height: 300px;
background-color: #894141;
}
#contnets .container {
display: flex;
}
#contnets .container .cont1 {
width: 33.3333%;
height: 200px;
background-color: #cc8686;
}
#contnets .container .cont2 {
width: 33.3333%;
height: 200px;
background-color: #692222;
}
#contnets .container .cont3 {
width: 33.3333%;
height: 200px;
background-color: #aa7777;
}
#footer .container {
display: flex;
}
#footer .container .foot1 {
width: 20%;
height: 100px;
background-color: #b85e5e;
}
#footer .container .foot2 {
width: 60%;
height: 100px;
background-color: #987878;
}
#footer .container .foot3 {
width: 20%;
height: 100px;
background-color: #6c2e2e;
}
.container {
width: 1200px;
margin: 0 auto;
}
</style>
</head>
<body>
<header id="header">
<div class="container">
<div class="logo">로고</div>
<nav class="nav">메뉴</nav>
</div>
</header>
<!-- //header -->
<article id="slider">
<div class="container">
이미지 슬라이드
</div>
</article>
<!-- //slider -->
<section id="contnets">
<div class="container">
<article class="cont1">공지사항/갤러리</article>
<article class="cont2">배너</article>
<article class="cont3">바로가기</article>
</div>
</section>
<!-- //contents -->
<footer id="footer">
<div class="container">
<div class="foot1">로고</div>
<div class="foot2">Copyright</div>
<div class="foot3">SNS</div>
</div>
</footer>
<!-- //footer -->
</body>
</html>
B타입 유형
<!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;
}
#header {
width: 100%;
height: 100px;
background-color: #ccc;
}
#header .container {
display: flex;
}
#header .container .logo {
width: 20%;
height: 100px;
background-color: #edcaca;
}
#header .container .nav {
width: 80%;
height: 100px;
background-color: #df7171;
}
#slider .container {
height: 300px;
background-color: #894141;
}
#contnets .container {
display: flex;
}
#contnets .container .cont1 {
width: 33.3333%;
height: 200px;
background-color: #cc8686;
}
#contnets .container .cont2 {
width: 33.3333%;
height: 200px;
background-color: #692222;
}
#contnets .container .cont3 {
width: 33.3333%;
height: 200px;
background-color: #aa7777;
}
#footer {
width: 100%;
height: 100px;
background-color: #ccc;
}
#footer .container {
height: 100px;
display: flex;
flex-wrap: wrap;
flex-direction: column;
}
#footer .container .foot1 {
width: 20%;
height: 100px;
background-color: #b85e5e;
}
#footer .container .foot2 {
width: 80%;
height: 50px;
background-color: #987878;
}
#footer .container .foot3 {
width: 80%;
height: 50px;
background-color: #6c2e2e;
}
.container {
width: 1200px;
margin: 0 auto;
}
</style>
</head>
<body>
<header id="header">
<div class="container">
<div class="logo">로고</div>
<nav class="nav">메뉴</nav>
</div>
</header>
<!-- //header -->
<article id="slider">
<div class="container">
이미지 슬라이드
</div>
</article>
<!-- //slider -->
<section id="contnets">
<div class="container">
<article class="cont1">공지사항/갤러리</article>
<article class="cont2">배너</article>
<article class="cont3">바로가기</article>
</div>
</section>
<!-- //contents -->
<footer id="footer">
<div class="container">
<div class="foot1">로고</div>
<div class="foot2">하단 메뉴</div>
<div class="foot3">Copyright</div>
</div>
</footer>
<!-- //footer -->
</body>
</html>
C타입 유형
<!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;
display: flex;
}
#header {
width: 20%;
height: 650px;
}
#header .logo {
height: 20%;
background-color: #945454;
}
#header .nav {
height: 80%;
background-color: #713838;
}
#section {
width: 80%;
height: 650px;
}
.slider {
width: 100%;
height: 350px;
background-color: #794d4d;
}
.contents {
width: 100%;
height: 200px;
display: flex;
}
.contents .cont1 {
width: 33.3333%;
background-color: #9d4d4d;
}
.contents .cont2 {
width: 33.3333%;
background-color: #902626;
}
.contents .cont3 {
width: 33.3333%;
background-color: #f77777;
}
.footer {
width: 100%;
height: 100px;
display: flex;
flex-wrap: wrap;
flex-direction: column;
}
.footer .foot1 {
width: 20%;
height: 100px;
background-color: #f80e0e;
}
.footer .foot2 {
width: 80%;
height: 50px;
background-color: #dc8585;
}
.footer .foot3 {
width: 80%;
height: 50px;
background-color: #930a0a;
}
</style>
</head>
<body>
<div id="wrap">
<header id="header">
<div class="logo">로고</div>
<nav class="nav">메뉴</nav>
</header>
<!-- //header -->
<section id="section">
<article class="slider">이미지 슬라이드</article>
<article class="contents">
<div class="cont1">공지사항<br>갤러리</div>
<div class="cont2">배너</div>
<div class="cont3">바로가기</div>
</article>
<footer class="footer">
<div class="foot1">로고</div>
<div class="foot2">하단 메뉴</div>
<div class="foot3">Copyright</div>
</footer>
</section>
</div>
</body>
</html>
참고
- 참고할 속성
| 속성 | 속성 설명 |
| display: flex; | 플렉스 컨테이너에서 사용 가능한 공간에 맞게 늘어나거나 축소되는 방식을 설정 합니다. |
| flex-wrap | 플렉스 항목을 한 줄로 강제 적용할지 또는 여러 줄로 줄 바꿈할 수 있는지 여부를 설정합니다. |
| flex-direction | 기본 축과 방향(정상 또는 역방향)을 정의하는 플렉스 컨테이너에 플렉스 항목을 배치하는 방법을 설정합니다. row : 순서대로 왼쪽 -> 오른쪽 정렬, row-reverse : 순서대로 오른쪽 -> 왼쪽 정렬 column : 순선대로 위쪽 -> 아래쪽 정렬, column-reverse : 순선대로 아래쪽 -> 위쪽 정렬 |
728x90
반응형
