728x90
반응형
지금까지 만든 사이트유형 들을 넣어서 하나의 사이트를 만들어 보도록 하겠습니다.
📖슬라이드유형 보러가기
https://coding23213.tistory.com/43
📖이미지 유형 보러가기
https://coding23213.tistory.com/38
📖이미지/텍스트 유형 보러가기
https://coding23213.tistory.com/42
📖카드유형 보러가기
https://coding23213.tistory.com/30
📖텍스트 유형 보러가기
https://coding23213.tistory.com/47
📖푸터유형 보러가기
https://coding23213.tistory.com/52
<!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>
<!-- SEO -->
<meta name="author" content="정황우">
<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">
</head>우선 새로운 html을 만들어 사이트에 필요한 정보를 적어 줍니다.
meta 태그
HTML 문서의 헤더 부분에 포함되어 있으며, 웹 페이지의 메타 데이터를 정의하는 데 사용됩니다. 이 메타 데이터는 검색 엔진에서 웹 페이지를 색인화하고, 소셜 미디어에서 페이지를 공유할 때 제목, 설명, 썸네일 이미지 등을 제공합니다.
·<meta charset="utf-8">: 문서의 문자 인코딩을 정의합니다.
·<meta name="viewport" content="width=device-width, initial-scale=1.0">: 반응형 웹 디자인을 위해 뷰포트를 설정합니다.
·<meta name="description" content="페이지 설명">: 페이지에 대한 간략한 설명을 제공합니다.
·<meta name="keywords" content="키워드1, 키워드2, 키워드3">: 페이지와 관련된 키워드를 제공합니다.
·<meta name="author" content="작성자 이름">: 페이지 작성자의 이름을 제공합니다.
·<meta name="robots" content="all">: 검색 엔진 크롤러에게 페이지의 모든 콘텐츠를 색인화하고 링크를 따라 이동할 수 있음을 나타냅니다.
파비콘을 이용해 사이트의 파비콘을 설정 해주고, CSS의 기본값을 따로 만들어서 CSS link를 이용해 font, reset, common, style 를 가져왔습니다.
여기서 style의 css문서에는 "@import " 를 사용합니다.
@import : CSS에서 다른 CSS 파일을 불러와 현재 파일에 포함하는 방법 중 하나입니다.
이때 각 유형의 css의 이미지 파일의 위치는 현재 만들려고 하는 html문서의 위치로 해주셔야 합니다.
@import url(header.css);
@import url(slider.css);
@import url(image.css);
@import url(imagTexgt.css);
@import url(card.css);
@import url(banner.css);
@import url(text.css);
@import url(footer.css);이렇게 각 유형의 css파일을 불러와 html에 적용 시킬수 있습니다.
<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 -->그 후 스킵을 만들어 Tab을 눌럿을때 해당 영역을 바로 갈수 있도록 하기위해 스킵 을 만들어 주었습니다.
이제 지금까지 만든 사이트 유형들을 놓고 싶은 순서대로 html을 가져오면 적용이 되는데 이때 css적용이 안되는 것들이 있으면 common값에 있는 class를 넣어주면 적용이 됩니다.
<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 center">
<h2 class="section__h2">쿠키 만드는 방법</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>
<a href="#" class="btn">자세히 보기</a>
</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">밀가루, 버터, 설탕 등을 사용하여 만들며, 다양한 재료를 넣어 맛과 향을 냅니다.</p>
<a href="#" class="btn">자세히 보기</a>
</div>
</article>
</div>
</section>
<!-- //imageType -->
<section id="imgTextType" class="nexon section gray">
<h2 class="blind">이미지 텍스트 영역</h2>
<div class="imgtext__inner container">
<article class="text">
<span class="section__small">notice</span>
<h3>쿠키의 종류 10가지</h3>
<p>쿠키의 종류는 매우 다양합니다. 아래는 10가지 이상의 쿠키 종류를 알려드리겠습니다</p>
<ul>
<li><a herf="#">초코칩 쿠키 (Chocolate Chip Cookie)</a></li>
<li><a herf="#">오트밀 쿠키 (Oatmeal Cookie)</a></li>
<li><a herf="#">스노우볼 쿠키 (Snowball Cookie)</a></li>
<li><a herf="#">마들렌 (Madeleine)</a></li>
<li><a herf="#">레몬 바 (Lemon Bar)</a></li>
<li><a herf="#">마카롱 (Macaron)</a></li>
<li><a herf="#">쇼트브레드 (Shortbread)</a></li>
<li><a herf="#">스프링클 쿠키 (Sprinkle Cookie)</a></li>
<li><a herf="#">맥아담 쿠키 (Macadamia Nut Cookie)</a></li>
<li><a herf="#">글로스 쿠키 (Gloss Cookie)</a></li>
</ul>
</article>
<article class="img i1">
<a href="#">촉촉한 쿠키</a>
</article>
<article class="img i2">
<a href="#">바삭한 쿠키</a>
</article>
</div>
</section>
<!-- //imgTextType -->
<section id="cardType" class="nexon section">
<div class="container">
<h2 class="blind">카드 영역</h2>
<h2 class="section__h2">쿠키 만드는 방법</h2>
<p class="section__desc">쿠키 만드는 방법은 다양하며, 재료나 조리 방법을 바꿔서 다양한 종류의 쿠키를 만들 수 있습니다. 레시피를 찾아보거나 실험을 해보면서 자신만의 맛있는 쿠키를 만들어보세요!</p>
<div class="card__inner">
<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="https://coding23213.tistory.com/">https://coding23213.tistory.com/</a>
</div>
</section>
<!-- //bannerType -->
<section id="textType" class="nexon section container">
<h2 class="blind">텍스트 영역</h2>
<span class="section__small">notice</span>
<h2 class="section__h2 mb70">쿠키를 만들때 주의점</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">쿠키를 굽은 후에는 오븐에서 꺼내서 식히기 전에 5분 정도 시간을 두세요. 그 후에는 완전히 식히기 전에 쿠키를 빼지 마세요. 쿠키가 완전히 식으면 구리거나 크리스피해집니다.</p>
<a class="text__btn" href="#">더보기</a>
</div>
</div>
</section>
<!-- //textType -->
</main>
<!-- //mainType -->
<footer id="footerType" class="nexon section">
<h2 class="blind">푸터 영역</h2>
<div class="footer__inner container">
<div class="footer__menu">
<div class="footer__text">
<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 class="footer__text">
<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 class="footer__text">
<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 class="footer__text">
<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 class="footer__text">
<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 class="footer__text">
<h3>고객 문의</h3>
<ul>
<li><a href="#">1:1 문의</a></li>
<li><a href="#">자주 물어보는 질문</a></li>
<li><a href="#">광고 문의</a></li>
<li><a href="#">정보 수정 요청</a></li>
</ul>
</div>
</div>
<div class="footer__right">
<p>2023 쿠키관련 사이트 Portfolio is Power</p>
<p>All Right Reserved</p>
</div>
</div>
</footer>
<!-- //footerType -->
</body>
</html>
그후 각 유형의 CSS에 들어가 화면이 일정 크기가 되었을때 깨지는 것을 없애주고 자연스럽게 하기위해 @media를 추가해 해당 크기가 되었을때 스타일이 변경 되도록 합니다.
@media: CSS에서 미디어 타입에 따라 스타일 규칙을 다르게 적용하는 방법 중 하나입니다. 미디어 타입은 화면 크기, 해상도, 기기 방향 등과 같은 미디어 속성에 따라 지정할 수 있습니다.
이때 CSS에 height(높이)값이 없어야 이상하게 적용되는 것을 방지할수 있습니다.
예로 footer유형의 CSS에 @media를 적용 시킨 것을 보면
/* footer__wrap */
.footer__menu {
display: flex;
}
.footer__text {
width: 16.6666%;
}
.footer__text h3 {
font-size: 18px;
margin-bottom: 13px;
}
.footer__text ul li a{
color: #666;
font-size: 14px;
line-height: 1.7;
}
.footer__right {
text-align: center;
font-size: 14px;
line-height: 1.7;
margin-top: 50px;
border-top: 1px solid #d9d9d9;
padding-top: 50px;
color: #666;
}
@media (max-width: 960px){
.footer__menu {
flex-wrap: wrap;
}
.footer__menu > div {
width: 32.3333%;
margin-bottom: 6%;
text-align: center;
}
}
@media (max-width: 600px){
.footer__menu > div {
width: 49%;
}
}max-width 값이 960px일때
.footer__menu 에 flex-wrap: wrap을 추가시키고
.fooer__menu 안에있는 모든 div태그의 width값을 32.3333%으로 변경하고, margin-bottom을 6%로 준후 text-align을 center로 변경 합니다.
max-width 값이 600px일때
.footer__menu 안에 있는 모든 div태그의 width값을 49%로 변경합니다.
이렇게 모든 유형에 반응형을 넣어주어 화면이 작아져도 자연스럽게 보이도록 해줍니다.
HTML소스 보기
https://github.com/jhwangwoo/web2023/blob/main/site/site1/assets/css/index.html
완성 사이트 보러가기
https://jhwangwoo.github.io/web2023/site/site1/assets/css/index.html