“ 지연되는 프로젝트에 인력을 더 투입하면 오히려 더 늦어진다. ”
- Frederick Philips Brooks
Mythical Man-Month 저자
728x90
설명:
이미 만들어 놓은 사이트 부분들을 종합해서 하나의 사이트로 만들어 보았습니다.
html 과 css 를 나눠서 만들어 봤습니다.
html 은 body 부분을 설명하고, css 는 이전에 작업했던 내용과 같기 때문에 따로 보여드리지는 않겠습니다.
css 는 반응형을 고려한 media query 부분을 더했을 뿐, 이전에 style sheet 에 입력한 내용과 같지만,
공통적으로 들어간 내용들 예를 들어서, 글씨체나 여백 등의 부분들은 모아서 따로 정리했습니다.
css 는 이 부분들을 common, font, 그리고 reset 으로 나눠서 설명하겠습니다.
html 의 body
<body>
<div id="skip">
<a href="#">헤더 영역 바로가기</a>
<a href="#">슬라이드 영역 바로가기</a>
<a href="#">이미지 영역 바로가기</a>
<a href="#">이미지/텍스트 영역 바로가기</a>
<a href="#">카드 영역 바로가기</a>
<a href="#">베너 영역 바로가기</a>
<a href="#">텍스트 영역 바로가기</a>
<a href="#">푸터 영역 바로가기</a>
</div>
<!-- skip -->
<header id="headerType" style="display: none;">
<h1>사이트 로고</h1>
</header>
<!-- headerType -->
<main id="mainType">
<section id="sliderType" class="nexon">
<h2 class="blind">슬라이드 영역</h2>
<div class="slider__inner">
<div class="slider">
<div class="slider__info container">
<span class="small">event</span>
<h3 class="title">이탈리아로 떠나는 여행</h3>
<p class="desc">이탈리아로 떠나는 여행이 궁금하시지 않으세요? 지금부터 이탈리아로 떠나는 여행이 얼마나 즐거울지 소개합니다.</p>
<div class="btn">
<a href="#">자세히 보기</a>
<a href="#">상담 신청</a>
</div>
</div>
<div class="slider__arrow">
<a href="#"><span class="blind">이전 이미지</span></a>
<a href="#"><span class="blind">다음 이미지</span></a>
</div>
<div class="slider__dot">
<a href="#" class="dot active"><span class="blind"></span></a>
<a href="#" class="dot"><span class="blind"></span></a>
<a href="#" class="dot"><span class="blind"></span></a>
<a href="#" class="play"><span class="blind"></span></a>
<a href="#" class="stop"><span class="blind"></span></a>
</div>
</div>
</div>
</section>
<!-- sliderType -->
<section id="imageType" class="nexon section">
<h2 class="blind">이미지 영역</h2>
<div class="image__inner container">
<article class="image">
<figure class="image__inner">
<img src="assets/img/imageType_01.jpg" alt="이탈리아">
</figure>
<div class="image__body">
<h3 class="title">이탈리아</h3>
<p class="desc">해외 여행이 생각나요?<br> 이탈리아를 소개합니다.</p>
<a href="#" class="btn1">자세히 보기</a>
</div>
</article>
<article class="image">
<figure class="image__header">
<img src="assets/img/imageType_02.jpg" alt="이집트">
</figure>
<div class="image__body">
<h3 class="title">이집트</h3>
<p class="desc">해외여행 가고 싶지 않나요?<br>이집트를 소개합니다.</p>
<a href="#" class="btn2">자세히 보기</a>
</div>
</article>
</div>
</section>
<!-- imageType -->
<section id="imgTextType" class="nexon section gray">
<h2 class="blind">이미지텍스트 영역</h2>
<div class="inner container">
<article class="desc">
<span class="notice">NOTICE</span>
<h3 class="title">음식점과 기념품 가게 고르는 Tip</h3>
<p class="tips">맛있는 음식을 맛보고 싶은 마음은 누구나 있습니다.<br>
그리고 기념품을 사서 보관하거나 선물하는 일도 많죠.</p>
<div class="li">
<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>
<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>
<li><a href="#">시샤 도구</a></li>
</div>
</article>
<article class="img food">
<a href="#">음식점</a>
<figure>
<img src="assets/img/food.jpg" alt="food">
</figure>
</article>
<article class="img souvenir">
<a href="#">기념품 가게</a>
<figure>
<img src="assets/img/souvenir.jpg" alt="souvenir">
</figure>
</article>
</div>
</section>
<!-- imgTextType -->
<section id="cardType" class="nexon section">
<h2 class="blind">카드 영역</h2>
<div class="card__inner">
<article class="card">
<figure>
<img src="assets/img/square.jpg" alt="광장">
</figure>
<div class="card__body">
<h3 class="title">광장</h3>
<p class="desc">쇼핑과 거리 구경을 할 수 있는 쇼핑몰의 광장을 소개합니다. 장인들의 전통이 녹아 있는 가게들부터 명품을 살 수 있는 거리까지 전부 놓칠 순 없죠. 전통과 문화를 즐겨보세요. </p>
<a href="#" class="btn">자세히 보기</a>
</div>
</article>
<article class="card">
<figure>
<img src="assets/img/street.jpg" alt=" 거리 축제">
</figure>
<div class="card__body">
<h3 class="title"> 거리 축제</h3>
<p class="desc">거리에서 시간마다 마차를 몰고 소공연을 펼치고 있습니다. 작은 축제이지만 그곳이 아니면 볼 수 없는 기회를 놓치지 마세요. 어디에서 사진을 찍든 아름다운 추억을 남길 수 있습니다.</p>
<a href="#" class="btn">자세히 보기</a>
</div>
</article>
<article class="card">
<figure>
<img src="assets/img/hotel.jpg" alt="호텔">
</figure>
<div class="card__body">
<h3 class="title">호텔</h3>
<p class="desc">그 나라의 전통과 현대 양식이 함께 어우러져 있는 이색 호텔들을 경험 해보세요. 일반적인 호텔보다 더 기억에 남고 즐거운 여행의 추억을 만들어 줄겁니다. </p>
<a href="#" class="btn">자세히 보기</a>
</div>
</article>
</div>
</section>
<!-- cardType -->
<section id="bannerType" class="nexon section banner__wrap center">
<h2 class="blind">배너 영역</h2>
<div class="banner__inner container">
<h3 class="title">좋은 추억 남기시길 바랍니다</h3>
<p class="p">새로운 환경이 주어지면, 새로운 추억을 쌓고 싶은 마음은 누구에게나 있습니다.<br>
그런 의미에서 여행은 좋은 기회가 되기도 합니다.</p>
<a href="#">https://jongyung.tistory.com</a>
</div>
</section>
<!-- bannerType -->
<section id="textType" class="nexon section">
<h2 class="blind">텍스트 영역</h2>
<div class="text__inner">
<div class = "text t1">
<h3 class="text__title">여행 가방 꾸리기</h3>
<p class="text__desc">여행의 가장 기본은 짐을 잘 챙기는 것입니다. 필요한 물건들을 빠짐없이 챙기는 것은 물론이고, 혹시 모를 비상사태를 대비해서 상비약 같은 물품들도 챙기는 것이 좋습니다. 잊지 말고 잘 챙기세요. </p>
<a class="text__btn" href="#">더보기</a>
</div>
<div class="text t2">
<h3 class="text__title">휴대용 물건 챙기</h3>
<p class="text__desc">휴대용 손전등 같은 물건을 챙기면 좋습니다. 여행을 하다 보면, 길을 잃을 수도 있기 때문에 늦은 시간에 길을 비춰보거나 도움을 요청하는 신호를 보낼 수도 있는 유용한 도구이기 때문입니다. </p>
<a class="text__btn" href="#">더보기</a>
</div>
<div class="text t3">
<h3 class="text__title">여행 계획 세우기</h3>
<p class="text__desc">여행지의 어디를 갈 지를 정하는 일이 여행의 질을 결정합니니다. 여행지의 분위기와 음식, 숙소소 등을 고려해서 계획을 세운다면, 조금 더 만족스러운 여행이 될 수 있습니다. </p>
<a class="text__btn" href="#">더보기</a>
</div>
<div class="text t4">
<h3 class="text__title">여행지 탐방하기 </h3>
<p class="text__desc">여행의 계획을 따르는 것도 좋지만, 가끔은 계획과 관련없는 탐방을 즐기는 것도 좋습니다. 계획 이외의 부분들을 발견할 수 있기 때문입니다. 의외인 만큼 더 새롭게 와닿을 수 있습니다. </p>
<a class="text__btn" href="#">더보기</a>
</div>
<div class="text t5">
<h3 class="text__title">여행지에서 추억 남기기</h3>
<p class="text__desc">여행은 추억으로 남는 것입니다. 새로운 문화를 경험해보기 위해 가는 것도, 새로운 사람들을 만나러 가는 것도 모두 추억으로 남기 마련입니다. 좋은 추억을 바란다면, 사진으로 남기는 것도 좋습니다. </p>
<a class="text__btn" href="#">더보기</a>
</div>
<div class="text t6">
<h3 class="text__title">길 숙지 하기</h3>
<p class="text__desc">여행지에서 길을 잃는 다면, 절망적인 기분을 느낄 수 있습니다. 낯선 곳에서 언어도 잘 통하지 않는다면 도움을 청하기조차 어려울 수도 있게 됩니다. 따라서 미리 정보를 알아보는 것이 중요합니다. </p>
<a class="text__btn" href="#">더보기</a>
</div>
</div>
</section>
<!-- textType -->
</main>
<!-- main -->
<footer id="footerType" class="nexon section gray">
<h2 class="blind">푸터 영역</h2>
<div class="footer__inner container">
<div class="footer__menu">
<div>
<h3>여행 가방 꾸리기</h3>
<ul>
<li><a href="#">체계적으로 물건 담는 법</a></li>
<li><a href="#">최소한의 물건 담기</a></li>
<li><a href="#">가벼운 물건 위주로 챙기기</a></li>
<li><a href="#">체크 리스트 작성하기</a></li>
</ul>
</div>
<div>
<h3>휴대용 물건 챙기기</h3>
<ul>
<li><a href="#">휴대용품 챙기기</a></li>
<li><a href="#">필수로 챙겨야 하는 물건</a></li>
<li><a href="#">현지에서 구하기 힘든 물건</a></li>
<li><a href="#">위급한 상황 대비하기</a></li>
</ul>
</div>
<div>
<h3>여행 계획 세우기</h3>
<ul>
<li><a href="#">가고 싶은 여행지 꼽기</a></li>
<li><a href="#">관광 장소 알아보기</a></li>
<li><a href="#">숙소 알아보기</a></li>
<li><a href="#">숙소 근처 식당 알아보기</a></li>
</ul>
</div>
<div>
<h3>여행지 탐방하기</h3>
<ul>
<li><a href="#">계획에서 조금 벗어나보기</a></li>
<li><a href="#">현지인에게 추천 받기</a></li>
<li><a href="#">숙소 근처에서 산책하기</a></li>
<li><a href="#">시장 구경하기</a></li>
</ul>
</div>
<div>
<h3>여행지의 추억 남기기</h3>
<ul>
<li><a href="#">사진 찍기</a></li>
<li><a href="#">현지인과 어울리기</a></li>
<li><a href="#">여행객과 어울리기</a></li>
<li><a href="#">자연을 즐겨보기</a></li>
</ul>
</div>
<div>
<h3>길 숙지하기</h3>
<ul>
<li><a href="#">계획한 곳들 위치 숙지</a></li>
<li><a href="#">숙소 주소 외우기</a></li>
<li><a href="#">숙소 근처 위치 숙지</a></li>
<li><a href="#">대사관 위치 숙지</a></li>
</ul>
</div>
</div>
<div class="footer__sitename">2023 jongyung travel site</div>
</div>
</footer>
<!-- footer -->
</body>body 부분은 이전에 작업했던 내용들을 정렬에 맞춰서 붙여줬을 뿐, 사실상 달라진 내용이 없습니다.
보이는 것처럼 길지만, 사실은 이전에 썼던 내용의 반복입니다.
사이트를 부분적으로 나눠서 만들면서 입력했던 내용들을 같은 형식과 내용으로 입력했습니다.
css 의 common
/* skip */
#skip {
position: relative;
z-index: 1000000;
}
#skip a {
background-color: #000;
color: #fff;
position: absolute;
left: -400px;
top: 0;
padding: 20px 40px;
}
#skip a:active,
#skip a:focus {
left: 0;
}
/* container */
.container {
width: 1160px;
margin: 0 auto;
padding: 0 20px;
/* background-color: rgba(0, 0, 0, 0.1); */
}
/* bg */
.gray {
background-color: #F5F5F5;
}
/* section */
.section {
padding: 120px 0;
}
.center {
text-align: center;
}
.section__small {
font-size: 14px;
border-radius: 50px;
padding: 1px 23px;
background-color: #8179E1;
color: #fff;
text-transform: uppercase;
display: inline-block;
margin-bottom: 20px;
}
.section__h2 {
font-size: 50px;
font-weight: 400;
margin-bottom: 30px;
line-height: 1;
}
.section__desc {
font-size: 22px;
line-height: 25px;
color: #666666;
margin-bottom: 70px;
font-weight: 300;
line-height: 1.5;
}
/* 미디어쿼리 */
@media (max-width: 1200px){
.container {
width: 100%;
box-sizing: border-box;
}
}
@media (max-width: 960px){
.section {
padding: 100px 0;
}
.section__h2 {
font-size: 40px;
margin-bottom: 10px;
}
.section__desc {
font-size: 18px;
margin-bottom: 40px;
}
}
@media (max-width: 600px) {
.section {
padding: 80px 0;
}
.section__h2 {
font-size: 30px;
}
.section__desc {
font-size: 16px;
}
}공통적으로 들어갔던 container 와 section 부분을 따로 common.css 로 정리했습니다.
이렇게 정리하면서 다시 사이트의 모양에 맞게 수정하고, 반응형을 고려해서 미디어 쿼리도 입력했습니다.
css 의 font
@font-face {
font-family: 'NexonLv1Gothic';
font-weight: 300;
font-style: normal;
src: url('https://cdn.jsdelivr.net/gh/webfontworld/NexonLv1Gothic/NexonLv1GothicLight.eot');
src: url('https://cdn.jsdelivr.net/gh/webfontworld/NexonLv1Gothic/NexonLv1GothicLight.eot?#iefix') format('embedded-opentype'),
url('https://cdn.jsdelivr.net/gh/webfontworld/NexonLv1Gothic/NexonLv1GothicLight.woff2') format('woff2'),
url('https://cdn.jsdelivr.net/gh/webfontworld/NexonLv1Gothic/NexonLv1GothicLight.woff') format('woff'),
url('https://cdn.jsdelivr.net/gh/webfontworld/NexonLv1Gothic/NexonLv1GothicLight.ttf') format("truetype");
font-display: swap;
}
@font-face {
font-family: 'NexonLv1Gothic';
font-weight: 400;
font-style: normal;
src: url('https://cdn.jsdelivr.net/gh/webfontworld/NexonLv1Gothic/NexonLv1GothicRegular.eot');
src: url('https://cdn.jsdelivr.net/gh/webfontworld/NexonLv1Gothic/NexonLv1GothicRegular.eot?#iefix') format('embedded-opentype'),
url('https://cdn.jsdelivr.net/gh/webfontworld/NexonLv1Gothic/NexonLv1GothicRegular.woff2') format('woff2'),
url('https://cdn.jsdelivr.net/gh/webfontworld/NexonLv1Gothic/NexonLv1GothicRegular.woff') format('woff'),
url('https://cdn.jsdelivr.net/gh/webfontworld/NexonLv1Gothic/NexonLv1GothicRegular.ttf') format("truetype");
font-display: swap;
}
@font-face {
font-family: 'NexonLv1Gothic';
font-weight: 700;
font-style: normal;
src: url('https://cdn.jsdelivr.net/gh/webfontworld/NexonLv1Gothic/NexonLv1GothicBold.eot');
src: url('https://cdn.jsdelivr.net/gh/webfontworld/NexonLv1Gothic/NexonLv1GothicBold.eot?#iefix') format('embedded-opentype'),
url('https://cdn.jsdelivr.net/gh/webfontworld/NexonLv1Gothic/NexonLv1GothicBold.woff2') format('woff2'),
url('https://cdn.jsdelivr.net/gh/webfontworld/NexonLv1Gothic/NexonLv1GothicBold.woff') format('woff'),
url('https://cdn.jsdelivr.net/gh/webfontworld/NexonLv1Gothic/NexonLv1GothicBold.ttf') format("truetype");
font-display: swap;
}
.nexon {
font-family: 'NexonLv1Gothic';
font-weight: 400;
}사이트를 만들면서 사용했던 글씨체를 따로 font.css 로 정리했습니다.
같은 글씨체를 적용했기 때문에 보이는 것처럼 입력한 내용이 적습니다.
css 의 reset
/* 여백 초기화 */
body, div, dl, dd, dt, ul, li, ol, h1, h2, h3, h4, h5, h6, pre, code,
form, fieldset, legend, p, table, th, td, input,
figure, figcaption, blockquote {
margin: 0;
padding: 0;
}
/* 폰트 초기화 */
body, button, input, select, table, textarea {
font-family: 'NexonLv1Gothic', 'AppleSDGothicNeo-Regular', 'Malgun Gothic', '맑은 고딕', 'dotum', '돋움';
}
/* 링크 초기화 */
a {
text-decoration: none;
color: #000;
}
/* 목록 초기화 */
li, ol, ul {
list-style: none;
}
/* 제목 초기화 */
h1, h2, h3, h4, h5, h6 {
font-weight: normal;
font-size: 1rem;
}
/* 폰트 스타일 */
em, address {
font-style: normal;
}
/* 이미지 초기화 */
img {
width: 100%;
vertical-align: top;
}
/* 보더 초기화 */
img, fieldset, button {
border: 0;
}
/* 클리어픽스 : 구조 깨지지 않도록*/
.clearfix::before,
.clearfix::after {
content: '';
display: block;
line-height: 0;
}
.clearfix::after {
clear: both;
}
/* 블라인드 효과 */
.blind {
position: absolute;
clip: rect(0,0,0,0);
width: 1px;
height: 1px;
margin: -1px;
overflow: hidden;
}
/* ir 효과 */
.ir {
display: block;
overflow: hidden;
font-size: 0;
line-height: 0;
text-indent: -9999px;
}
/* 간격설정 */
.mt10 {margin-top: 10px !important;}
.mt20 {margin-top: 20px !important;}
.mt30 {margin-top: 30px !important;}
.mt40 {margin-top: 40px !important;}
.mt50 {margin-top: 50px !important;}
.mt60 {margin-top: 60px !important;}
.mt70 {margin-top: 70px !important;}
.mb10 {margin-bottom: 10px !important;}
.mb20 {margin-bottom: 20px !important;}
.mb30 {margin-bottom: 30px !important;}
.mb40 {margin-bottom: 40px !important;}
.mb50 {margin-bottom: 50px !important;}
.mb60 {margin-bottom: 60px !important;}
.mb70 {margin-bottom: 70px !important;}
/* hide */
.hide {
display: none;
}사이트를 만들면 자동적으로 적용되어 있는 설정들이 있습니다.
이런 설정들을 초기화해주기 위해서 reset.css 를 따로 만들었습니다.
이렇게 하면 만들었던 모양이 깨지지 않고 유지할 수 있습니다.