“ 당신이 6개월 이상 한 번도 보지 않은 코드는 다른 사람이 다시 만드는 게 훨씬 더 나을 수 있다. ”
웹디자인 기능사 실기
웹디자인 기능사 실기는 웹디자인 분야에서 실무 능력을 검증하는 시험으로, HTML/CSS를 이용한 웹 페이지 제작, 이미지 및 동영상 처리, 웹 접근성 및 검색 엔진 최적화 등의 기술을 평가합니다.
완성된 사이트
<head>
<!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>코딩시험1</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
a {
text-decoration: none;
color: #000;
}
img {
width: 100%;
vertical-align: top;
}
#wrap {
width: 1000px;
margin: 0 auto;
}
#header {
display: flex;
justify-content: space-between;
align-items: flex-end;
}
#header h1 img {
width: 150px;
}
#header nav li {
display: inline-block;
letter-spacing: normal;
}
#header nav li a {
display: inline-block;
padding: 20px;
}
#banner {
margin-bottom: 20px;
}
#notice {
display: flex;
justify-content: space-between;
}
#notice .not1 {
width: 49%;
border: 1px solid #ccc;
padding: 30px;
position: relative;
}
#notice .not1 h3 {
margin-bottom: 10px;
}
#notice .not1 li {
list-style: none;
display: flex;
padding: 2px 0;
}
#notice .not1 li a {
width: 70%;
}
#notice .not1 li span {
width: 30%;
text-align: right;
}
#notice .not1 .more {
position: absolute;
right: 60px;
top: 35px;
}
#notice .not1 img {
width: 25px;
position: absolute;
right: 29px;
top: 33px;
}
#notice .not2 {
width: 49%
}
#card h2 {
margin: 20px 0 10px;
}
.card-inner {
display: flex;
justify-content: space-between;
}
.card-inner > div {
width: 24%;
}
.card-inner > div strong {
padding: 10px 0;
display: inline-block;
color: #666;
}
#footer {
border-top: 1px solid #ccc;
margin-top: 50px;
padding: 50px 0;
}
#footer address {
font-style: normal;
}
#footer address strong {
display: block;
padding-top: 50px;
color: #666;
}
</style>
</head>
align-items
Flexbox 레이아웃에서 사용되는 CSS 속성 중 하나로, Flex 컨테이너 내부의 Flex 아이템들을 수직 축을 기준으로 정렬하는 역할을 합니다.
"align-items" 속성은 다음과 같이 사용할 수 있습니다.
.flex-container {
display: flex;
align-items: [값];
}
"align-items" 속성은 Flex 컨테이너인 ".flex-container"의 수직 축을 기준으로 내부 Flex 아이템들을 정렬하는데 사용됩니다. "값"은 다음과 같은 여러 옵션들 중 하나를 사용할 수 있습니다.
1. stretch (기본값) : Flex 아이템들을 수직 축 방향으로 늘려서 컨테이너의 높이와 맞춥니다.
2. flex-start : Flex 아이템들을 수직 축 시작 부분으로 정렬합니다.
3. flex-end : Flex 아이템들을 수직 축 끝 부분으로 정렬합니다.
4. center : Flex 아이템들을 수직 축을 기준으로 중앙으로 정렬합니다.
5. baseline : Flex 아이템들의 기준선을 맞춥니다. (아이템들이 여러 줄일 경우에만 유효합니다.)
<body>
<body>
<div id="wrap">
<header id="header">
<h1><img src="img/logo.jpg" alt="롯데월드"></h1>
<nav>
<ul>
<li><a href="#">즐길거리</a></li>
<li><a href="#">요금/우대혜택</a></li>
<li><a href="#">참여프로그램</a></li>
<li><a href="#">이용가이드</a></li>
<li><a href="#">소통서비스</a></li>
</ul>
</nav>
</header>
<!-- //header -->
<main>
<section id="banner">
<img src="img/banner.jpg" alt="미라클있수마수">
</section>
<section id="notice">
<div class="not1">
<h3>롯데월드 소식</h3>
<ul>
<li><a href="#">그럴싸진관 미라클</a><span>2018.11.19</span></li>
<li><a href="#">드림스테이지 '힘내 소중한 너'</a><span>2018.11.20</span></li>
<li><a href="#">'힘내 소중한 너' 음원 발매</a><span>2018.11.13</span></li>
<li><a href="#">이용 요금 조정 안내</a><span>2018.11.12</span></li>
</ul>
<a href="#" class="more">더보기</a>
<img src="img/button.jpg" alt="더보기">
</div>
<div class="not2">
<img src="img/banner02.jpg" alt="온종일 혜택 ON">
</div>
</section>
<section id="card">
<h2>특별한 경험</h2>
<div class="card-inner">
<div>
<img src="img/notice01.jpg" alt="연간회원안내">
<strong>연간회원안내</strong>
</div>
<div>
<img src="img/notice02.jpg" alt="프리미엄투어">
<strong>프리미엄투어</strong>
</div>
<div>
<img src="img/notice03.jpg" alt="공연참여프로그램">
<strong>공연참여프로그램</strong>
</div>
<div>
<img src="img/notice04.jpg" alt="단체프로그램">
<strong>단체프로그램</strong>
</div>
</div>
</section>
</main>
<footer id="footer">
<address>
서울특별시 송파구 올림픽로 240 호텔롯데 롯데월드 | 대표자: 박동기<br>
사업자등록번호: 219-85-00014 | 통신판매업신고번호: 송파 제 5513호 | 전화: 1661-2000
<strong>COPYRIGHT 2022 LOTTEWORLD.ALL.RIGHT RESERVED</strong>
</address>
</footer>
</div>
</body>
전체 구조는 body 태그 안에 div 태그로 감싸진 header, main, footer 3개의 영역으로 구분됩니다.
header
h1 태그 안에 롯데월드 로고 이미지가 들어있고, nav 태그 안에 메뉴 목록이 ul, li, a 태그로 구성되어 있습니다.
main
main 영역에는 section 태그로 감싸진 3개의 영역이 있습니다.
1. 첫 번째 section은 id가 banner인 영역으로, img 태그로 배너 이미지가 들어있습니다.
2. 두 번째 section은 id가 notice인 영역으로, div 태그로 감싸진 not1, not2 2개의 영역으로 구성되어 있습니다.
not1 영역에는 롯데월드의 소식 목록이 ul, li, a, span, img 태그로 구성되어 있고, not2 영역에는 img 태그로 이미지가 들어있습니다.
3. 세 번째 section은 id가 card인 영역으로, h2 태그 안에 특별한 경험을 나타내는 카드 목록이 div, img, strong 태그로 구성되어 있습니다.
footer
footer 영역에는 주소와 회사 정보가 address 태그 안에 들어있고, strong 태그 안에 저작권 정보가 들어있습니다.
