안녕하세요! 오늘은 웹디자인 기능사 실기 연습, 레이아웃을 구성해보겠습니다!
구조를 짜고 CSS 설정하는 연습이 되겠죠!!
웹디자인 기능사 실기
이번에 연습해 볼 화면은 요겁니다!
포토샵으로 필요한 이미지 따오기
포토샵을 이용해 각각 이미지를 자른다음, 새로운 레이어에 복사 붙여넣기 해서 저장해줍니다. 이때, 그냥 jpg로 저장해주기 보단 웹용으로 저장해야 파일 사이즈 등을 확인할 수 있습니다.
포토샵에서 웹용으로 저장하는 단축키: Alt + Shift + Ctrl + S
이 이미지들은 크기가 적당해 최적화 진행을 안해도 괜찮지만, 파일이 큰 이미지들은 꼭 이미지 최적화 작업을 거쳐주셔야합니당.
이미지 최적화 사이트 : https://imagecompressor.com/ko/
이렇게 img 폴더에 저장해주세요!
구조 짜기
전체적인 구조는 이렇게 나눠주겠습니다.
구조를 잘 짜야 CSS 설정하기 좋기 때문에!! 이때 구역마다 class로 이름을 지어줄텐데 누구나 알아보게끔 이름을 지어줘야 하겠죵!
기본 구조와 전체 css
<!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>
<link href="css/style.css" rel="stylesheet" >
</head>
<body>
<div id="wrap">
<header id="header"></header>
<main></main>
<footer id="footer"></footer>
</div>
</body>
</html>기본 3단 구조로 짜주었습니다. wrap안에 헤더와 메인, 푸터로 크게 나누어주고, css도 그냥 간단한 페이지니 style태그를 이용해 css를 줄 수 있지만, 외부 파일로 연결해 설정해주셔도 됩니다.
수업시간엔 그냥 위에다 css를 작업하였지만, 이번엔 css 파일을 만들어 설정해보겠습니다.
/* 전체 */
* {
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;
}전체에 마진 0, 패딩 0을 주고, a태그에 text-decoration을 none으로 설정해주고 컬러도 검정색으로 바꿔주겠습니다.
또 li 리스트 스타일을 none으로 작업해 점을 없애주겠습니당 ㅎㅎ 그리고 전체 구조를 감싸고 있는 wrap에 마진 0 오토를 주고 width값도 설정해주면 작업하기 편하겠쭁!
img도 width값을 100%로 해주고 vertical-align : top을 이용해줍니다.
vertical-align : top
"vertical-align: top"은 CSS에서 사용되는 속성으로, 요소의 수직 정렬 방식을 설정하는 데에 사용됩니다.
이 속성을 "top" 값과 함께 사용하면, 요소의 상단 부분이 부모 요소의 최상단과 맞닿도록 수직 정렬됩니다.
일반적으로, "vertical-align" 속성은 텍스트나 이미지 등의 인라인 요소의 수직 정렬을 조절할 때 사용됩니다.
예를 들어, 텍스트가 있는 한 줄의 요소를 수직 중앙 정렬하려면, 해당 요소와 그 부모 요소 모두에 "display: flex"와 "align-items: center" 속성을 추가한 후, 내부 텍스트 요소에 "vertical-align: middle" 속성을 추가하여 적용할 수 있습니다.
그러나, "vertical-align" 속성은 블록 요소의 수직 정렬에는 영향을 미치지 않습니다. 이 경우, "margin" 속성 등을 사용하여 요소의 위치를 조절해야 합니다.
세부적인 구조 짜기
<body>
<div id="wrap">
<header id="header">
<h1><img src="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>
</header>
<main>
<section id="banner">
<img src="img/banner01.jpg" alt="미라클있수마수">
</section>
<section id="notice">
<div class="not1">
<h3>롯데월드 소식 | <em>뉴스•공지</em></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>
</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 | 통신판매업신고번호 | 송파 | 전화 : 1661-2000
<strong>COPYRIGHT 2022 LOTTEWORLD.ALL.RIGHT RESERVED</strong>
</address>
</footer>
</div>
</body>
이제 안에 들어가는 내용들을 태그를 활용해 넣어줍니다.
목록들은 ul, li태그를 활용하고, 이미지 부분은 img 태그, 링크가 들어가는 곳은 a태그, 글씨를 강조하거나 효과를 주기 위한 em태그와 span 태그, strong태그. 마지막으로 footer에 address 태그를 이용해 정보들을 넣어줍시다!
이때 이미지가 들어갈 부분은 설명을 alt를 활용해 꼭 넣어주어야 합니다! 입력 안 해주면 감점 요소가 있기 때문에 ㅜㅜ
CSS - header
/* header */
#header {
display: flex;
justify-content: space-between;
align-items: flex-end;
}
#header img {
width: 150px;
}
#header nav li {
display: inline-block;
padding: 20px;
}먼저 header부분 부터 CSS를 설정하겠습니다.
전체적인 header에 display: flex와 justyfy-content: space-between을 주겠습니다.
align-items: flex-end
align-items: flex-end는 CSS의 Flexbox 레이아웃에서 사용되는 속성 중 하나입니다.
flex items을 flex container의 바닥에 정렬합니다.
또, header에 이미지는 width값을 150px로 지정해줍니다.
nav안에 li는
display: inline-block과 패딩을 20px씩 주어 간격을 주겟습니당
display: inline-block
"display: inline-block"을 적용하면 해당 요소는 인라인 요소처럼 옆으로 나란히 표시되면서, 동시에 내부 내용에 따라 높이와 너비가 자동으로 조절되는 박스 형태로 표시됩니다.
CSS - banner
/* banner */
#banner {
margin-bottom: 20px;
}배너는 이미지만 들어가기 때문에 따로 CSS 건드릴 부분이 없습니다. 그냥 마진 바텀을 이용해 배너 밑으로 간격을 20px정도 띄워주겠습니다.
CSS - notice
/* notice */
#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: 30px;
top: 35px;
}
#notice .not1 .more img {
width: 20px;
height: 20px;
}
#notice .not1 h3 {
margin-bottom: 10px;
}
#notice .not1 h3 i {
color: #666;
font-style: normal;
font-size: 0.98rem;
}
#notice .not1 li {
display: flex;
padding: 5px 0;
}
#notice .not1 li a {
width: 70%;
}
#notice .not1 li span {
width: 30%;
text-align: right;
}
#notice .not2 {
width: 47%;
}not1과 not2 두 개로 나누어 작업해줍니다.
not1에는 공지사항과 목록들, not2에는 이미지를 넣어주었습니다. 일단 notice에 display: flex를 사용해 정렬해주시고, justify-content: space-between으로 양쪽으로 나뉘게 해줍니다. 이때 not1과 not2에는 width값을 47%로 해주어 가운데 여백이 있게 작업해주세요!
em / rem
상대(relative) 단위란 고정되지 않고 어떤 기준에 따라서 유동적으로 바뀔 수 있는 길이를 나타내는 단위입니다. 본 포스팅에서 다룰 em과 rem을 포함해 %, vw, vh 등이 대표적인 CSS의 상대 단위입니다.
em과 rem 단위의 기준은 font-size 속성값이라고 했는데, 정확히 어디에 있는 font-size 속성값인지에 따라 차이가 발생합니다. em의 경우, 해당 단위가 사용되고 있는 요소의 font-size 속성값이 기준이 됩니다. 반면에 rem에서 r은 root, 즉 최상위 요소를font-size 속성값 의미합니다. HTML에서 최상위 요소는 <html> 입니다. 따라서 rem 경우, html 요소의 font-size 속성값이 기준이 됩니다.
CSS - card
/* card */
#card {}
#card h2 {
margin: 20px 0 10px;
}
.card__inner {
display: flex;
justify-content: space-between;
}
.card__inner > div {
width: 24%;
}
.card__inner > div strong {
display: inline-block;
padding: 10px 0;
color: #666;
}카드부분은 card__inner라는 클래스를 만들어주고 작업해주시면 됩니다!
CSS - footer
/* footer */
#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;
}완성된 페이지와 코드
코드보기
