2023년 웹디자인 기능사 레이아웃 : B-3
소개
안녕하세요! 웹스토리보이입니다.
이번 유형도 전체 유형과 가운데 유형이 혼합된 레이아웃입니다.
B-1, B-2에서는 각각 세션의 container유형을 각각 만들어서 속성을 설정했습니다.
하지만 이번에는 container 속성을 재활용해서 사용해보겠습니다.
재활용를 한다는 것은 여러번 쓸 수 있다는 얘기입니다. 즉 class를 적극적으로 사용한다는 의미입니다.
가령 id라는 선택자는 한번만 사용할 수 있고, class라는 선택자는 여러번 재사용이 가능합니다.
그래서 사이트 제작시 큰 틀을 작업할 때에는 id를 많이 사용하고 세부적인 부분은 class를 많이 사용하게 됩니다.
그럼 만들어 보면서 이해하도록 합시다. 렛츠 기릿😇
1. 기본 구조 만들기
웹 문서 만들기 : VSCODE를 실행하고 B-3.html파일을 만들겠습니다.
!를 치고 tab버튼을 누르면 다음과 같이 나타납니다.
lang는 ko로 변경하고 title은 웹디자인기능사 레이아웃 B-3으로 변경해주겠습니다.
상단에 디자인 보기 버튼을 누르면 전체적인 레이아웃을 한 눈에 볼 수 있으니 참고해주세요!
<!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-3</title>
</head>
<body>
</body>
</html>
전체적인 레이아웃을 먼저 만들겠습니다.
<body>
<div id="wrap">
<header id="header"></header>
<article id="slider"></article>
<main id="contents"></main>
<footer id="footer"></footer>
</div>
</body>
해당 영역을 확인하기 위해 width, height, background-color를 설정하였습니다.
width값을 100%를 설정하고, height값과 background-color을 넣어서 영역을 확인하겠습니다.
<style>
* {
margin: 0;
padding: 0;
}
#wrap {
width: 100%;
}
#header {
width: 100%;
height: 100px;
background-color: #efefef;
}
#slider {
width: 100%;
height: 300px;
background-color: #e3e3e3;
}
#contents {
width: 100%;
height: 200px;
background-color: #d9d9d9;
}
#footer {
width: 100%;
height: 100px;
background-color: #d1d1d1;
}
</style>
2. 컨테이너 작업하기
각 섹션의 전체영역과 가운데 영역을 만들겠습니다. 재활용이 가능한 클래스를 사용하여 가운데 영역을 만들겠습니다.
<body>
<div id="wrap">
<header id="header">
<div class="container"></div>
</header>
<!-- //header -->
<article id="slider">
<div class="container"></div>
</article>
<!-- //slider -->
<main id="contents">
<div class="container"></div>
</main>
<!-- //contents -->
<footer id="footer">
<div class="container"></div>
</footer>
<!-- //footer -->
</div>
<!-- //wrap -->
</body>
container영역은 재활용 되는 부분이기 때문에
height 값은 부모 박스한테 상속을 받고
가운데 정렬을 위하여 margin: 0 auto;를 사용합니다.
영역 확인을 위해 백그라운드는 rgba를 이용하여 작업하면 투명도 설정이 가능합니다.
컨테이너 박스 자식들은 가로 정렬이 필요하기 때문에 flex도 미리 넣어주겠습니다.
.container {
width: 1200px;
height: inherit;
margin: 0 auto;
background-color: rgba(0,0,0,0.2);
display: flex;
}
3. 각 섹션 작업하기
헤더 영역은 전체 영역과 가운데 영역을 설정해야 합니다.
container속성은 재사용이 가능하니 한번만 쓰면 됩니다.
헤더 영역에는 로고 영역과 메뉴 영역을 설정합니다.
<header id="header">
<div class="container">
<h1 class="logo"></h1>
<nav class="nav"></nav>
</div>
</header>
<!-- //header -->
#header {
width: 100%;
height: 100px;
background-color: #efefef;
}
#header .logo {
width: 20%;
height: 100px;
background-color: #c7c7c7;
}
#header .nav {
width: 80%;
height: 100px;
background-color: #bcbcbc;
}
슬라이드 영역은 width값과 height을 설정하면 됩니다.
<article id="slider">
<div class="container"></div>
</article>
<!-- //slider -->
#slider {
width: 100%;
height: 300px;
}
컨텐츠 영역도 전체 색만 빼주고 작업하겠습니다. 처음에는 전체 영역과 가운데 영역을 나누어서 작업을 했지만, 여기서 색만 빼서 티 안나게 하겠습니다. 컨텐츠 영역에는 자식 요소 3개를 만들고 영역을 만들겠습니다.
<main id="contents">
<div class="container">
<section class="content1"></section>
<section class="content2"></section>
<section class="content3"></section>
</div>
</main>
<!-- //contents -->
#contents {
width: 100%;
}
#contents .content1 {
width: 33.3333%;
height: 200px;
background-color: #bcbcbc;
}
#contents .content2 {
width: 33.3333%;
height: 200px;
background-color: #b1b1b1;
}
#contents .content3 {
width: 33.3333%;
height: 200px;
background-color: #a3a3a3;
}
푸터 영역도 전체 영역과 가운데 영역으로 나누어서 작업하겠습니다.
container를 설정하고 자식으로 3개의 박스를 넣겠습니다.
이미 flex가 설정되어 있으니 width와 height만 설정하면 영역이 잡힐것입니다.
<footer id="footer">
<div class="container">
<div class="footer1"></div>
<div class="footer2"></div>
<div class="footer3"></div>
</div>
</footer>
<!-- //footer -->
#footer {
width: 100%;
background-color: #d1d1d1;
}
#footer .footer1 {
width: 20%;
height: 100px;
background-color: #9d9d9d;
}
#footer .footer2 {
width: 60%;
height: 100px;
background-color: #929292;
}
#footer .footer3 {
width: 20%;
height: 100px;
background-color: #838383;
}
3. 마무리
B-3유형은 기존의 B-2, B-1유형과 다르게 container를 재사용하여 만들었습니다.
이렇게 하면 중복된 소스를 줄일 수 있어서 소스가 더 깔끔해집니다.
이 레이아웃은 그렇게 복잡한 구조가 아니기 때문에 별로 차이가 없을 수 있지만,
복잡한 레이아웃을 작업하다 보면 재활용하는 소스가 더 효율적일 것입니다.
여러분들은 편한 것을 선택하셔서 작업하시면 될 것 같습니다.
PDF 샘플
레이아웃
- A1 유형
- A2 유형
- A3 유형
- A4 유형
- B1 유형
- B2 유형
- B3 유형
- B4 유형
- C1 유형
- C2 유형
- C3 유형
- C4 유형
- D1 유형
- D2 유형
- D3 유형
- D4 유형
- E1 유형
- E2 유형
- E3 유형
- E4 유형
댓글