“ 지연되는 프로젝트에 인력을 더 투입하면 오히려 더 늦어진다. ”
- Frederick Philips Brooks
Mythical Man-Month 저자
오늘은 학원에서 했던 웹디자인 기능사 연습 문제를 정리해보겠습니다.
💜웹디자인 기능사 연습
주어진 완성 화면을 보고 만들었습니다.
사진은 포토샵으로 자르기를 사용해
하나씩 잘라내고 저장해서 사용했습니다.
body
<body>
<div id="wrap">
<div id="header">
<h1>
<img src="https://hyunmijin.github.io/web2023/webd/img/logo01.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>
</div>
<div id="main">
<section id="banner">
<img src="https://hyunmijin.github.io/web2023/webd/img/banner01.jpg" alt="미라클있수마수">
</section>
<section id="notice">
<div class="not1">
<h3>롯데월드 소식 | 뉴스, 공지</h3>
<ul>
<li><a href="#">그럴싸진관 미라클</a><span>23.03.19</span></li>
<li><a href="#">드림스테이지 '힘내 소중한 너'</a><span>23.03.19</span></li>
<li><a href="#">'힘내 소중한 너'음원 발매</a><span>23.03.19</span></li>
<li><a href="#">이용 요금 조정 안내</a><span>23.03.19</span></li>
<p class="more">더보기</p>
</ul>
</div>
<div class="not2">
<img src="https://hyunmijin.github.io/web2023/webd/img/banner02.jpg" alt="온종일 혜택ON">
</div>
</section>
<section id="card">
<h2>특별한 경험</h2>
<div class="card-inner">
<div>
<img src="https://hyunmijin.github.io/web2023/webd/img/notice01.jpg" alt="연간회원안내">
<strong>연간회원안내</strong>
</div>
<div>
<img src="https://hyunmijin.github.io/web2023/webd/img/notice02.jpg" alt="프리미엄투어">
<strong>프리미엄투어</strong>
</div>
<div>
<img src="https://hyunmijin.github.io/web2023/webd/img/notice03.jpg" alt="공연참여프로그램">
<strong>공연참여프로그램</strong>
</div>
<div>
<img src="https://hyunmijin.github.io/web2023/webd/img/notice04.jpg" alt="단체프로그램">
<strong>단체프로그램</strong>
</div>
</div>
</section>
</div>
<div id="footer">
<address>
서울특별시 송파구 올림픽로 240 호텔롯데월드 | 대표자:박동기<br>
사업자등록번호:219-85-00014 | 통신판매업신고번호 : 송파 제 5513호
<strong>COPYTIGHT 2018 LOTTEWORD.ALL RIGHTS RESERVED.</strong>
</address>
<!-- -->
</div>
</div>
</body>body안에 섹션을 나눠 영역을 지정해주고 작업했습니다.
완성화면을 보고
레이아웃에 맞게 섹션을 나눠놓고 작업합니다.
header, main, footer로 크게 나눠 작업해줬습니다.
style
<style>
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: #000;
}
img {
width: 100%;
/* vertical-align: top; */
}
li {
list-style: none;
}
#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;
}
#header nav li a {
display: inline-block;
padding: 10px;
}
#banner {
margin-bottom: 20px;
}
#notice {
display: flex;
justify-content: space-between;
}
#notice .not1 {
width: 47%;
border: 1px solid #ccc;
padding: 23px;
position: relative;
}
#notice .not1 .more {
position: absolute;
right: 40px;
top: 35px;
}
#notice .not1 .more::after {
content: '';
position: absolute;
width: 20px;
height: 20px;
background-image: url("https://hyunmijin.github.io/web2023/webd/img/+.jpg");
background-size: cover;
margin-right: 5px;
}
#notice .not1 h3 {
margin-bottom: 10px;
}
#notice .not2 {
width: 47%;
}
#notice .not1 li {
display: flex;
padding: 5px 0;
}
#notice .not1 li a {
width: 70%;
}
#notice .not1 li span {
width: 30%;
text-align: right;
}
#card {
padding-top: 40px;
}
.card-inner {
display: flex;
justify-content: space-between;
}
.card-inner > div {
width: 24%;
}
.card-inner > div >strong {
display: inline-block;
color: #666;
/* padding: 10px; */
margin-top: 10px;
}
#card h2 {
margin: 20px 0 10px;
}
#footer {
border-top: 1px solid #ccc;
margin-top: 50px;
padding: 50px 0;
}
#footer address {
font-style: normal;
/* margin-top: 40px; */
}
#footer address strong {
display: block;
padding-top: 50px;
color: #666;
/* margin-bottom: 40px; */
}
</style>/* reset */
*는 전체 지정을 말합니다.
전체 구역을
margin:0;, padding:0;으로 지정하고
a, img, li 태그를 기본 reset설정으로 지정해주고 작업해줍니다.
a 태그엔 기본적으로 들어가는 밑줄 style이 있는데
이 스타일을 빼주기 위해 text-deciration: none;을 설정해줬습니다.
li에도 list style이 자동으로 들어가는데
이것도 빼주기 위해 list-style: none;을 설정해줍니다.
/* wrap */
wrap에서 전체 사이즈를 지정해주고
가운데 정렬을 위해 margin:0 auto;로 설정해줍니다.
/* header */
header구역에 로고와 메뉴를 넣어줬는데
이걸 양쪽으로 정렬하기 위해
justify-content: space-between;
수평으로 정렬하기위해
display: flex;를,
li를 한줄로 배치시키기 위해
display: inline block;을 설정해줍니다.
메뉴글씨를 끝부분으로 위치하기 위해
align-items: flex-end;를 설정해줍니다.
/* notice */
💜 position: absolute;
요소는 문서의 일반적인 흐름에서 벗어나 상위 요소 중 가장 가까운 position속성이
relative, absolute, fixed, sticky인 부모 요소를 기준으로 위치가 결정된다.
top, right, bottom, left 속성을 사용해 절대적인 위치를 이동시킬 수 있다.
더보기를 설정한 more, more::after요소에
position: absolute를
💜 ::after /::before 가상요소
특정 요소의 뒤/앞에 콘텐츠를 생성한다.
이 가상요소를 사용하면 HTML에 따로 요소를 추가하지 않아도 CSS로 요소의 뒤에 콘텐츠를 추가할 수 있다.
보여지게 할 not1에 position: relative를 설정해줍니다.
그럼 absolute를 설정한 요소를 relative 를 설정한 요소에 보여지게 합니다.
disply:flex;로 not li을 양쪽으로 배치되게 해줍니다.
span에 text-align: right를 넣어 오른쪽 끝쪽으로 배치되게해줍니다.
/* card */
사진 4개를 한줄로 배치하기 위해
notice와 같이 display: flex;와
justify-content: space-beween;을 설정해줍니다.
/* footer */
border-top으로 위에 줄을 만들어주고
address에도 폰트 스타일이 자동으로 설정되어 있는데
이걸 없애주기 위해
font-style: none;을 설정해줍니다.
display: block;을 줘서
글씨를 블록 단위로 맞춰마무리해줍니다.