“ 지연되는 프로젝트에 인력을 더 투입하면 오히려 더 늦어진다. ”
- Frederick Philips Brooks
Mythical Man-Month 저자
728x90
반응형
웹사이트 만들기
유형별로 나누어 만들었던 웹페이지의 HTML, CSS를 합쳐 하나의 웹사이트로 만들어 보려고 합니다.
그동안 공통css와 reset.css는 같은 걸로 작업해 왔기에 잘 조합만 하면 쉽게 만들 수 있겠죠?.
아직 좀 더 다듬어야 하지만 @media 태그를 적용하여 반응형으로도 만들 예정 입니다.
🏁. 완성화면
✈. HTML
<!DOCTYPE html>
<html lang="en">
<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>
<!-- SEO -->
<meta name="author" content="aimee">
<meta name="description" content="프론트앤드 개발 공부 사이트 입니다">
<meta name="keyword" content="프론트앤드, 자바스크립트, 사이트만들기">
<meta name="robots" content="all">
<!-- 파비콘 -->
<link rel="shortcut icon" type="image/x-icon" href="assets/ico/favicon.png"/>
<link rel="apple-touch-icon" sizes="114x114" href="assets/ico/favicon.png"/>
<link rel="apple-touch-icon" href="assets/ico/favicon.png"/>
<!-- CSS -->
<link rel="stylesheet" href="assets/css/fonts.css">
<link rel="stylesheet" href="assets/css/reset.css">
<link rel="stylesheet" href="assets/css/common.css">
<link rel="stylesheet" href="assets/css/style.css">
<!-- CSS섹션별 -->
</head>
<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>
<header id="headerType">
</header>
<!-- //header -->
<main id="mainType">
<section id="sliderType" class="nexon hide">
<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">이번 식물은 죽이지 마세요. 건강하게 오래오래 잘 키울 수 있어요.<br>
처음 보는 식물도 잘 키울 수 있어요! </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></span>
<a href="#" class="play"><span class="blind">플레이</span></a>
<a href="#" class="stop"><span class="blind">정지</span></a>
</div>
</div>
<!-- <div class="slider"></div>
<div class="slider"></div> -->
</div>
</section>
<!-- //sliderType -->
<section id="imageType" class="nexon section center">
<h2 class="blind">이미지영역</h2>
<h2 class="section_h2">PLANT</h2>
<p class="section_desc">반려 식물 건강하게 키우기</p>
<div class="image__inner container">
<article class="image">
<figure class="image__header">
<img src="assets/img/imageType01_01.jpg" alt="">
</figure>
<div class="image__body">
<h3 class="title">품종에 맞는 흙과 비료</h3>
<p class="desc">다양한 식물이 가지는 특성에 맞춰 잘 자랄 수 있도록 조건에 맞는 흙과 비료를 알아두세요.</p>
<button class="btn_1 btn"><a href="">자세히보기</a></button>
</div>
</article>
<article class="image">
<figure class="image__header">
<img src="assets/img/imageType01_02.jpg" alt="">
</figure>
<div class="image__body">
<h3 class="title">적당한 빛과 바람, 물 </h3>
<p class="desc">적당한 햇볕과 통풍이 잘되는 환경이 필요합니다.<br>
때에 따라 일정한 주기로 물을 주시는 것도 중요합니다</p>
<button class="btn"><a href="">자세히보기</a></button>
</div>
</article>
</div>
</section>
<!-- //imageType -->
<section id="imgTextType" class="nexon section gray center">
<h2 class="blind">이미지텍스트영역</h2>
<div class="imgtext__inner container">
<article class="imgtext__text">
<span class="notice">NOTICE</span>
<h3>플랜테리어<br>: 식물과 인테리어</h3>
<p class="desc">플랜테리어란 식물 ‘플랜트’와 실내장식 ‘인테리어’의
합성어입니다. </p>
<span class="desc_p">
소품으로 식물이나 화분을 접목해 포인트를 주는 인테
리어를 의미한다. 도시에서 자연친화적인 삶을 추구하
는 것이 하나의 유행인 요즘, 플랜테리어 문화가 트렌
드로 자리잡고 있다. 희귀식물이나 이색적인 화분을 활
용하면 자신의 감성 라이프에 최적화된 공간을 연출할 수 있다.
식물은 인테리어 소품으로 미적인 만족감을 주기도 하
지만 공기정화 역할도 한다. 인체에 해로운 오염 물질이
있는 밀폐된 공간에 식물을 넣어두면 실내 공기오염 물질
들이 제거된다. 특히 아레카야자, 관음죽, 대나무야자,
인도고무나무, 레몬라임, 여인초 등은 공기
</span>
</article>
<article class="imgtext__img">
<div class="img i1"><a href="#">플랜테리어</a></div>
</article>
<article class="imgtext__img">
<div class="img i2"><a href="#">홈가드닝</a></div>
</article>
</div>
</section>
<!-- //imgTextType -->
<section id="cardType" class="nexon section center">
<div class="container">
<h2 class="section__h2">식물 건강하게 키우기</h2>
<p class="section_desc">적당한 햇볕과 통풍이 잘되는 환경이 필요합니다. <br>때에 따라 일정한 주기로 물을 주시는 것도 중요합니다.<br>
다양한 식물이 가지는 특성에 맞춰 잘 자랄 수 있도록 조건에 맞는 흙과 비료를 알아두세요.</p>
<div class="card__inner container">
<article class="card">
<figure class="card__header">
<img src="assets/img/cardType01_01.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 class="card__header">
<img src="assets/img/cardType01_02.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 class="card__header">
<img src="assets/img/cardType01_03.jpg" alt="가끔씩은 창을 활짝 열어주세요">
</figure>
<div class="card__body">
<h3 class="title">가끔씩은 창을 활짝 열어주세요</h3>
<p class="desc">"통풍을 꼭 해줘야 하나..?"
싶겠지만, 실내 가드너라면 통풍을 잘 해주는것
만으로도 식물의 해충 피해를 예방할 수 있어요.
환기를 꾸준히 해 주면 식물 뿐만 아니라 가드 ...</p>
<a href="#" class="btn">자세히보기
</a>
</div>
</article>
</div>
</div>
</section>
<!-- //cardType -->
<section id="bannerType" class="nexon section center">
<h2 class="blind">배너영역</h2>
<div class="banner__inner container">
<h3>우리 집으로 숲을 가져오는 방법 </h3>
<p>숲을 일상 공간으로 가져오고 싶은 마음에 식물 키우기를 시작합니다.<br>
일상 공간에서 식물과 함께 하는 방법을 알아볼까요? </p>
<a href="">youtube.com/plenty</a>
</div>
</section>
<!-- //bannerType -->
<section id="textType" class="nexon section center">
<h2 class="blind">텍스트영역</h2>
<span class="section__small">NOTICE</span>
<h2 class="section__h2 mb70">나에게 맞는 반려식물 고르기</h2>
<div class="text__inner container">
<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">평소 알고 있던 잎의 모양과 달리 몬스테라의 잎
은 구멍이 듬성듬성~ 독특하게 생겼죠. 생소한 잎
의 모양 때문에 라틴어 'monstrum(이상하다)'에
서 유래되었으며, 잎에 난 구멍이 스위스 치즈와..</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">반려식물은 식물을 인생의 동반자로 생각해 붙여
진 이름입니다. 반려동물을 키우는 것과 비교해
상대적으로 비용과 노력이 적게 들지만 비슷한 효과를
가져온다고 해요. 전국 만 19~59세...</p>
<a class="text__btn" href="#">더보기</a>
</div>
</div>
</section>
<!-- //textType -->
</main>
<!-- //main -->
<footer id="footerType" class="nexon section center">
<h2 class="blind">푸터영역</h2>
<div class="footer__menu container">
<div class="foot f1">
<h1>플랜테리어</h1>
<ul>
<li><a>소개하기</a></li>
<li><a>공유하기</a></li>
<li></li>
<li></li>
</ul>
</div>
<div class="foot f2">
<h1>식물마켓</h1>
<ul>
<li><a>시작하기</a></li>
<li><a>식물의종류</a></li>
<li></li>
<li></li>
</ul>
</div>
<div class="foot f3">
<h1>식물고르기</h1>
<ul>
<li><a>식물검색</a></li>
<li><a>식물도감</a></li>
<li><a>식물의종류</a></li>
<li></li>
</ul>
</div>
<div class="foot f4">
<h1>플랜드가이드</h1>
<ul>
<li><a>식물플래너</a></li>
<li><a>식물영양제</a></li>
<li><a>식물의종류</a></li>
<li><a>식물이야기</a></li>
</ul>
</div>
<div class="foot f5">
<h1>플랜티</h1>
<ul>
<li><a>인스타그램</a></li>
<li><a>네이버블로그</a></li>
<li></li>
<li></li>
</ul>
</div>
<div class="foot f6">
<h1>Q&A</h1>
<ul>
<li><a>문의하기</a></li>
<li><a>F&A</a></li>
<li></li>
<li></li>
</ul>
</div>
</div>
<address class="footer__right">
2023 PLENTY<br>ALL RIGHT RESERVED
</address>
</div>
</footer>
<!-- //footerType -->
</body>
</html>🏴.
01. SEO : 검색 최적화 작업 > 먼저 상단에 meta태그를 통해 홈페이지의 정체성에 대해 작성합니다.
02. FAVICON : 사이트 브랜딩 및 사용자 신뢰도 등을 이유로 파비콘을 적용해 줍니다.
03. link -CSS : css파일들을 연결합니다. 각 유형별 css파일은 또 하나의 style.css파일에 모아줍니다.
| style.css | @import url("header.css");
@import url("slider.css");
@import url("image.css");
@import url("imgText.css");
@import url("card.css");
@import url("banner.css");
@import url("text.css");
@import url("footer.css");
|
04. index.html파일에 header/ slider / imgtype/ imgtextType 등 각 유형의 구조를 합쳤습니다.
✈. CSS
css코드는 너무 많습니다.
깃 링크를 걸어놓아 확인할 수 있도록 해놓겠습니다,
| 파일명 | |
| reset.css | 대중적인 태그의 기본값을 세팅할 항목을 작성합니다. |
| font.css | 적용할 폰트들은 따로 정리 합니다. |
| common.css | 공통적으로 많이 쓰일 태그들을 정리하여 가져다 쓰기 좋게 정리합니다. |
| style.css | 아래 각 유형별 css의 링크를 모아 놓는 파일 입니다. |
| header.css | 헤더유형에만 적용할 css |
| slider.css | 슬라이더유형에만 적용할 css |
| image.css | 이미지유형에만 적용할 css |
| imgText.css | 이미지텍스트유형에만 적용할 css |
| card.css | 카드유형에만 적용할 css |
| banner.css | 배너유형에만 적용할 css |
| text.css | 텍스트유형에만 적용할 css |
| footer.css | 푸터유형에만 적용할 css |
🏴.