반응형
웹디자인 기능사 실기 홈페이지 만들어보기
시험 실기를 위해 연습을 해봤습니다.
VSCode
<!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>
* {
padding: 0;
margin: 0;
}
#wrap {
width: 1000px;
margin: 0 auto;
}
#header {
display: flex;
justify-content: space-between;
/* font-style: none; */
padding: 20px 0;
align-items: flex-end;
}
a {
text-decoration: none;
color: #000;
font-style: normal;
}
img {
width: 100%;
vertical-align: top;
}
#header h1 img {
width: 150px;
}
#header h2 img {}
#header nav {
/* margin-top: 100px; */
}
#header nav ul li {
list-style: none;
display: inline-block;
}
#header nav ul li a {
color: #000;
padding:10px;
font-size: 20px;
}
#banner img {
width: 100%;
margin-bottom: 50px;
}
#notice {
display: flex;
justify-content: space-between;
margin-bottom: 50px;
}
#notice .not1 {
display: block;
width: 47%;
padding: 12px;
border: 1px solid #666;
position: relative;
}
#notice .not1 ul li a {
display: inline-block;
width: 70%;
}
#notice .not1 li span {
display: inline-block;
width: 30%;
text-align: right;
color: #555;
}
.not1 .more {
position: absolute;
top: 15px;
right: 20px;
display: flex;
}
.not1 .more img {
width: 20px;
height: 20px;
padding: 2px;
}
.not1 ul li {
list-style: none;
padding-top: 10px;
padding-bottom: 5px;
}
.not1 span {
color: #555;
}
#notice .not2{
width: 47%;
}
.card-inner {
display: flex;
justify-content: space-between;
}
#card > h2 {
display: inline-block;
margin-bottom: 20px;
}
#card a {
background-color: #555;
}
.card-inner .cardimg {
width: 24%;
}
.card-inner .cardimg strong {
display: inline-block;
padding-top: 20px;
}
#footer {
border-top: 1px solid #b8b8b8;
padding-top: 50px;
margin-top: 50px;
margin-bottom: 50px;
color: #666;
}
#footer address {
font-style: normal;
}
#footer strong {
display: block;
margin-top: 50px;
}
</style>
</head>
<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>
<section id="banner">
<img src="img/banner.jpg" alt="">
</section>
<section id="notice">
<div class="not1">
<strong>롯데월드 소식 | <span>뉴스 공지</span></strong>
<ul>
<li><a href="#">그럴싸진관 미라클</a><span>2018.11.19</span></li>
<li><a href="#">드림스테이지'힘내 소중한 너'</a><span>2018.11.30</span></li>
<li><a href="#">'힘내 소중한 너' 음원 발배</a><span>2018.11.19</span></li>
<li><a href="#">이용 요금 조정 안내</a><span>2018.11.19</span></li>
</ul>
<div class="more">더보기<img src="img/plus.jpg" alt=""></div>
</div>
<div class="not2">
<img src="img/banner02.jpg" alt="">
</div>
</section>
<section id="card">
<h2>특별한 경험</h2>
<div class="card-inner">
<div class="cardimg">
<img src="img/notice01.jpg" alt="">
<strong>연간회원안내</strong>
</div>
<div class="cardimg">
<img src="img/notice02.jpg" alt="">
<strong>연간회원안내</strong>
</div>
<div class="cardimg">
<img src="img/notice03.jpg" alt="">
<strong>연간회원안내</strong>
</div>
<div class="cardimg">
<img src="img/notice04.jpg" alt="">
<strong>연간회원안내</strong>
</div>
</div>
</section>
<footer id="footer">
<address>서울특별시 송파구 올림픽로 240 호텔롯데 롯데월드 | 대표자: 박동기<br>
사업자등록번호:219-85-00014 | 통신판매업신고번호: 송파 제 5513호 | 전화:1661-2000
<strong>COPYRIGHT 2018 LOTTEWORLD. ALL RIGHTS RESERVED.</strong>
</address>
</footer>
</div>
</body>
</html>완벽하게 만든건 아니지만 일단은 만족입니다...
해당 코드는 HTML과 CSS로 작성된 웹페이지 코드입니다.
해당 웹페이지는 코딩시험1이라는 이름을 가지고 있으며, 상단에는 로고와 메뉴, 그리고 배너가 위치하고 있습니다.
하단에는 롯데월드 소식과 관련된 공지사항이 위치하고 있으며, 이에 대한 더 자세한 내용을 보기 위해서는 "더보기" 버튼을 클릭해야 합니다. 또한 하단에는 카드 형식의 정보와 운영시간, 위치 등이 있는 푸터가 위치하고 있습니다.
"align-items"는 CSS 속성 중 하나로, flexbox 레이아웃을 사용할 때 플렉스 컨테이너 내부의 플렉스 아이템들을 수직 축에서 정렬하는 방법을 지정합니다.
이 속성은 플렉스 아이템들이 플렉스 컨테이너의 교차 축(수평축) 방향으로 어떻게 정렬될지를 설정합니다. "align-items" 속성의 값에 따라, 플렉스 아이템들은 컨테이너의 교차 축 방향의 위쪽, 아래쪽, 가운데, 또는 여러 줄에 걸쳐 분산되어 정렬될 수 있습니다.
"align-items" 속성의 값으로는 다음과 같은 것들이 있습니다:
- stretch: 플렉스 아이템들의 높이를 플렉스 컨테이너의 높이에 맞춰 늘립니다.
- center: 플렉스 아이템들을 수직 방향으로 가운데 정렬합니다.
- flex-start: 플렉스 아이템들을 플렉스 컨테이너의 교차 축 시작점에 정렬합니다.
- flex-end: 플렉스 아이템들을 플렉스 컨테이너의 교차 축 끝점에 정렬합니다.
- baseline: 플렉스 아이템들을 텍스트의 기준선(baseline)에 맞춰 정렬합니다.
예를 들어, 위 코드에서 "#header" 요소의 "align-items" 속성 값으로 "flex-end"가 설정되어 있으므로, "nav" 요소가 "#header" 요소의 하단에 위치하도록 정렬됩니다.