“ 지연되는 프로젝트에 인력을 더 투입하면 오히려 더 늦어진다. ”
728x90
오늘은 웹디자인기능사 실기시험 연습을 해 보았습니다.
html
<!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>
</head>
<body>
<div id="wrap">
<header id="header">
<h1><img src="img/logo.jpg" alt="롯데월드"></h1>
<ul>
<nav>
<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>
</nav>
</ul>
</header>
<!-- //header -->
<section id="banner">
<h1><img src="img/banner.jpg" alt="미라클있수마수"></h1>
</section>
<section id="notice">
<div class="not1">
<h3>롯데 월드 소식</h3>
<ul>
<li><a href="#">그럴씨진관 미라클</a><span>2022.09.03</span></li>
<li><a href="#">드림스테이지'히내 소중한 너'</a><span>2022.09.03</span></li>
<li><a href="#">'히내 소중한 너'음원 발매</a><span>2022.09.03</span></li>
<li><a href="#">이용요금 조정안내</a><span>2022.09.03</span></li>
</ul>
<a href="#" class="more">더보기</a>
</div>
<div class="not2">
<h1><img src="img/banner02.jpg" alt="온종일 혜택 0n"></h1>
</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>
<footer id="footer">
<address>
서울 송파구 올림픽로 240 호텔롯데 롯데월드 | 대표자 : 박동기<br>
사업자 등록 번호 : 2129-85-00014 | 통신판매업신고번호 | 송파 | 전화 : 1661-2000<br>
<br><br>
<strong>COPYRIGHT 2018 LOTTEWORLD.ALL RIGHTSRESERVED</strong>
</address>
</footer>
</div>
</body>
</html>우선
header안에 로고와 네비게이션이 속해 있고
첫번째 section은 베너를 두번째 section은 notice로 소식과 이벤트 베너를 속하게 하였습니다.
두번째 section은 카드유형을 둡니다.
footer에는 address를 사용해서 정보을 넣습니다.
평소에는 alr같은건 신경도 안쓰지만 채우지 않으면 안됩니다. 만약 안 넣으면 감점사항이기 때문에 채워야합니다.
<style>
* {
margin: 0;
padding: 0;
}
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;
/* 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;
font-weight: bold;
}
#banner {
margin-bottom: 20px;
}
#notice {
display: flex;
justify-content: space-between;
}
#notice .not1 {
width: 49%;
border: 1px solid #ccc;
padding: 20px;
position: relative;
margin-right: 1%;
}
#notice .not1 h3 {
margin-bottom: 10px;
}
#notice .not1 li {
list-style: none;
display: flex;
padding: 5px 0;
}
#notice .not1 li a {
width: 70%;
}
#notice .not1 li span {
width: 30%;
text-align: right;
}
#notice .not1 .more {
position: absolute;
right: 30px;
top: 35px;
}
#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;
}
#footer address {
font-style: normal;
}
#footer address strong {
display: block;
padding-top: 30px;
color: #666;
}
</style>css는 반복되는 부분이 많습니다.
그래서 그중 잘 기억이 나지 않거나 처음보는 것들을 정리하도록 하겠습니다.
"vertical-align: top;": 이는 인라인 요소나 테이블 셀 요소의 수직 정렬을 해당 요소를 포함하는 요소의 맨 위쪽으로 설정합니다. 다시 말해, 요소가 인라인이거나 테이블 셀에 있으면 해당 요소는 행이나 셀의 맨 위쪽에 정렬됩니다.
"align-items: flex-end;": 이 속성은 플렉스박스 레이아웃에서 사용되며, 플렉스 항목을 메인 축과 수직으로 교차하는 교차 축을 따라 정렬합니다. 이 경우, 항목들이 컨테이너 끝 부분에 정렬됩니다.
"letter-spacing: normal;": 이 속성은 텍스트에서 문자 사이의 간격을 제어합니다. "normal"로 설정하면 글꼴의 기본 간격이 사용됩니다.
"font-weight: bold;": 이는 글꼴의 굵기를 진하게 설정합니다.
"position: absolute;": 이 속성은 요소를 가장 가까운 위치 지정 조상 요소(또는 위치 지정된 조상 요소가 없는 경우 초기 포함 블록)에 상대적으로 배치합니다. 요소가 절대 위치로 배치되면, 일반 문서 흐름에서 제거되어 다른 요소의 위치에 영향을 주지 않습니다.