728x90
SITE 만들기
헤더유형, 슬라이드유형, 이미지유형, 이미지/텍스트 유형, 카드유형, 배너유형, 텍스트유형, 푸터유형
지금까지 배운 여러 타입들의 페이지를 합쳐 하나의 사이트를 만들어줍니다.
< 사이트 링크: https://lee3ll.github.io/web2023/site/css/index.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>Document</title>
<!-- 파비콘 -->
<link name="shortcut icon" type="image/x-icon" href="assets/ico/Frame 1.png"/>
<link name="apple-touch-icon" sizes="114x114" href="assets/ico/Frame 1.png"/>
<link name="apple-touch-icon" href="assets/ico/Frame 1.png"/>
<!-- SEO -->
<meta name="author" content="lee3ll">
<meta name="description" content="lee3ll">
<meta name="keyword" content="lee3ll, 사이트, 사이트 만들기, 튜토리얼">
<meta name="robots" content="all">
<!-- 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>
<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"></header>
<main id="mainType">
<section id="sliderType" class="nexon">
<h2>슬라이드 영역</h2>
<div class="slider__inner">
<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>
</div>
</section>
<!-- sliderType -->
<section id="imageType" class="nexon section center gray">
<h2 class="section__h2">이미지 영역</h2>
<p class="section__desc">이미지 영역</p>
<div class="image__inner container">
<div class="image__inner">
<article class="image">
<figure class="image__header">
<img src="../asset/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="../asset/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>
</div>
</section>
<!-- imageType -->
<section id="imgTextType" class="nexon section">
<h2 class="blind">이미지텍스트 영역</h2>
<div class="imgText__inner container">
<div class="imgtext__inner">
<article class="text">
<span class=>notice</span>
<h3>오사카 먹거리의 종류</h3>
<p>오사카에는 타코야키, 가츠동, 오꼬노미야키, 교자, 라멘 등등 여러가지 먹거리가 있습니다.</p>
<ul>
<li><a href="#">타코야키(Takoyaki)</a>></li>
<li><a href="#">가츠동(カツ丼)</a>></li>
<li><a href="#">오꼬노미야키(Okonomiyakki)</a>></li>
<li><a href="#">교자(交子)</a>></li>
<li><a href="#">라멘(Ramen)</a>></li>
<li><a href="#">유카쿠(Yakitori)</a>></li>
<li><a href="#">꼬치야키(Kushikatsu)</a>></li>
</ul>
</article>
<article class="img i1">
<a href="#">타코야키</a>
</article>
<article class="img i2">
<a href="#">가츠동</a>
</article>
</div>
</div>
</section>
<!-- imgTextType -->
<section class="card__wrap nexon section">
<div class="container">
<h2 class="section__h2">오사카 관광지</h2>
<p class="section__desc">오사카시는 일본 오사카부에 있는 도시로 일본에서 도쿄 다음으로 규모가 큽니다. 도시 단위의 경제 규모로 세계 3위. 도시권 인구로 세계 12위의 메가 시티로 평가됩니다.</p>
<h2 class="blind">카드 영역</h2>
<div class="card__inner">
<article class="card">
<figure class="card__header">
<img src="../asset/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="../asset/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="../asset/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>
</div>
</section>
<!-- cardType -->
<section id="bannerType" class="nexon section banner__wrap">
<h2 class="blind">배너 영역</h2>
<div class="banner__inner container">
<div class="banner__inner">
<h3>오사카 먹거리 간접체험</h3>
<p>다양한 오사카의 먹거리를<br>간접체험 해봅시다</p>
<a href="#">youtube.com/webstoryboy</a>
</div>
</div>
</section>
<!-- bannerType -->
<section id="textType" class="nexon section">
<h2 class="blind">텍스트 영역</h2>
<div class="text__inner container">
<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">오사카에서는 '톤코츠 라멘(Tonkotsu Ramen)'이 유명합니다. 돼지 뼈와 고기 등을 오랫동안 끓여 깊은 맛을 낸 스프에, 탄탄면을 넣어 먹습니다.</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">'츠네오'는 1675년부터 이어져 온 오사카에서 가장 오래된 찻집 중 하나입니다. 경치가 아름다운 가든에서 일본 전통차와 전통간식을 함께 즐길 수 있습니다.</p>
<a class="text__btn" href="#">더보기</a>
</div>
</div>
</section>
<!-- textType -->
</main>
<!-- mainType -->
<footer id="footerType">
<h2 class="blind">푸터영역</h2>
<div class="footer__inner container">
<div class="footer__inner">
<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>
<li><a href="#">전통찻집 소개</a></li>
<li><a href="#">포장마차 거리 소개</a></li>
</ul>
</div>
<div>
<h3>오사카 쇼핑</h3>
<ul>
<li><a href="#">오사카 쇼핑리스트 100</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="#">오사카 Airbnb 안내</a></li>
<li><a href="#">오사카 게스트하우스 안내</a></li>
<li><a href="#">오사카 지하철 노선도</a></li>
</ul>
</div>
</div>
</div>
</div>
</footer>
</body>
</html>보충설명
✨각 유형별로 CSS 파일을 만들어줍니다. 또 공통 적용 CSS파일로 common파일과 style파일을 만들어 줍니다.
✨ 각 유형별 inner 정보(본문내용) 를 container 박스(width값 1160px 마진0 패딩0 설정)안에 넣어줍니다
✨Skip link : 웹 페이지의 주요 내용을 건너뛰고 바로 본문 내용으로 이동할 수 있는 링크를 의미합니다. Skip link는 일반적으로 웹페이지 상단에 위치하며, 사용자가 포커스를 주요 내용으로 이동시키기 전에 나타나도록 구현됩니다. 이를 통해 웹 페이지 내용에 집중하고자 하는 사용자들은 스킵 링크를 클릭하여 본문 내용으로 바로 이동할 수 있습니다.
✨ 각 유형별 정보에 section class를 주어 페이지의 폰트 사이즈, 제목사이즈 두께 마진값 등을 넣어 전체적으로 일관성있는 페이지로 꾸며줍니다.
전체 공통 CSS
/* skip */
#skip {
position: relative;
z-index: 100000;
}
#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: #eceaea;
}
/* section */
.section {
padding: 120px 0;
}
.section.center {
text-align: center;
}
.section__small {
font-size: 14px;
border-radius: 50px;
background-color: #ff7c7c;
color: #fff;
padding: 1px 23px;
text-transform: uppercase;
margin-bottom: 20px;
display: inline-block;
}
.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;
}
}reset CSS
/* 여백초기화 (*표시보다 과부하 걸리지 않고 효율적으로 사용가능)*/
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;}@import로 html과 연결해주는 CSS
@import url("header.css");
@import url("slider.css");
@import url("image.css");
@import url("imageText.css");
@import url("card.css");
@import url("banner.css");
@import url("text.css");
@import url("footer.css");배너유형 미디어쿼리
@media (max-width: 960px){
.banner__inner h3 {
font-size: 40px;
}
}
@media (max-width: 600px){
.banner__inner h3 {
font-size: 30px;
}
.banner__inner p {
margin-bottom: 50px;
}미디어쿼리
미디어 쿼리(Media Query)는 CSS에서 사용되는 기술로, 특정 장치나 미디어 유형(스크린, 프린터 등)에 따라 웹페이지의 스타일을 다르게 적용할 수 있는 방법입니다.
미디어 쿼리를 사용하면, 사용자의 디바이스 해상도, 화면 크기, 방향 등에 따라 다른 스타일을 적용할 수 있습니다. 이를 통해 반응형 웹디자인을 구현할 수 있습니다.
미디어 쿼리는 @media 규칙을 사용하여 정의할 수 있으며, CSS에서는 다양한 미디어 쿼리를 제공합니다. 예를 들어, @media screen and (max-width: 600px) {...}는 화면 너비가 600px 이하인 경우에만 해당 스타일을 적용하게 됩니다.
미디어 쿼리를 사용하여 반응형 웹디자인을 구현하면, 하나의 웹페이지에서 다양한 디바이스에서 최적화된 레이아웃을 제공할 수 있으며, 사용자 경험을 향상시킬 수 있습니다.
카드유형 미디어쿼리
@media (max-width: 960px){
.card__inner .card {
width: 49%;
}
.card__inner .card:last-child {
display: none;
}
}
@media (max-width: 600px){
.card__inner {
flex-wrap: wrap;
}
.card__inner .card {
width: 100%;
margin-bottom: 3%;
}
.section__h2 {
text-align: center;
}
.section__desc {
text-align: center;
word-break: keep-all; /* 단어별로 끊김 */
}
}푸터유형 미디어쿼리
@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%;
}
}이미지유형 미디어쿼리
@media (max-width: 960px){
.image__body .desc {
display: none;
}
}
@media (max-width: 600px){
.image__inner {
flex-direction: column;
}
.image__inner .image {
width: 100%;
margin-bottom: 3%;
}
.image__body .title {
font-size: 22px;
}
.image__body .btn {
padding: 10px 20px;
font-size: 14px;
}
}이미지/텍스트유형 미디어쿼리
@media (max-width: 960px){
.imgText__inner .text {
width: 100%;
text-align: center;
}
.imgText__inner .img {
width: 49%;
}
.imgText__inner .text h3 {
font-size: 40px;
margin-bottom: 10px;
}
.imgText__inner .text p {
font-size: 18px;
margin-bottom: 40px;
font-weight: 300;
}
.imgText__inner .text ul {
display: none;
}
}
@media (max-width: 600px){
.imgText__inner .img {
width: 100%;
margin-bottom: 3%;
}
.imgText__inner .text h3 {
font-size: 30px;
}
.imgText__inner .text p {
font-size: 16px;
}
}보충설명