...
728x90
반응형
레이아웃 실전 종합
이번에는 만들어놓은 레이아웃들을 한 곳에 합쳐 웹페이지를 만들어보도록 하겠습니다. (슬라이드 제외)
슬라이드 유형은 다음에 따로 만들도록 하겠습니다.
만들어진 페이지 보러가기
https://dlgnsrb227.github.io/web2023/site/site1/index.html
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>사이트 만들기1</title>
<!-- SEO -->
<meta name="author" content="Hooong">
<meta name="description" content="Hooong's 사이트 튜토리얼">
<meta name="keyword" content="Hooong, 사이트, 사이트 만들기, 튜토리얼, 코딩, 웹디자인">
<meta name="robots" content="all">
<!-- 파비콘 -->
<link rel="shortcut icon" type="image/x-icon" href="asset/ico/favicon.png">
<link rel="apple-touch-icon" sizes="114x114" href="asset/ico/favicon.png">
<link rel="apple-touch-icon" href="asset/ico/favicon.png">
<!-- CSS -->
<link rel="stylesheet" href="asset/css/fonts.css">
<link rel="stylesheet" href="asset/css/reset.css">
<link rel="stylesheet" href="asset/css/common.css">
<link rel="stylesheet" href="asset/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" style="display : none">
<h1 class="blind">사이트 로고</h1>
<div class="header__inner">
<h1 class="header__logo">Han-River.</h1>
<nav class="header__menu">
<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>
</nav>
<div class="header__member">
<a href="#">로그인</a>
</div>
</div>
</header>
<!-- headerType -->
<main id="mainType">
<section id="sliderType" class="nexon hide">
<div class="slider__inner">
<div class="slider">
<div class="slider__info container">
<span class="small">EVENT</span>
<h3 class="title">한강 무료 아메리카노</h3>
<p class="desc">여의도 한강공원 여의나루역 5번출구로 나와 전방 300m 부근에서 무료 아메리카노
시식 이벤트가 진행됩니다.</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 class="slider"></div>
<div class="slider"></div> -->
</div>
</section>
<!-- sectionType -->
<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="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>
</section>
<!-- imageType -->
<section id="imgTextType" class="nexon section gray">
<h2 class="blind">한강을 끼고있는 공원</h2>
<div class="container">
<div class="imgText__inner">
<article class="text">
<span>PARK</span>
<h3>한강을 끼고있는 공원</h3>
<p>한강 주변에는 다양한 공원이 있습니다. 여기에 몇 가지 추천 공원을 알려드리겠습니다.</p>
<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>
<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>
</article>
<article class="img i1">
<a href="#">한강공원 리스트</a>
</article>
<article class="img i2">
<a href="#">한강공원 리스트</a>
</article>
</div>
</div>
</section>
<!-- imgTextType -->
<section id="cardType" class="nexon section">
<h2 class="blind">카드 영역</h2>
<div class="container">
<h2 class="section__h2">한강 소개</h2>
<p class="section__desc">한강은 낮에도 밤에도 아름다운 광경이 펼쳐지지만, 특히 맑은날 저녁 노을이 지는 무렵의 한강의 모습은 하루의 고단함을
저절로 잊게 만들어주곤 합니다.</p>
<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">한강 주변에는 대표적으로 한강공원이 위치하며, 주요 관광지로는 남산타워, 경복궁, 국립중앙박물관, 63빌딩, 덕수궁 등이 있습니다. 또한, 한강을 따라 자전거도로와 산책로가 조성되어 ...</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">한강은 또한 한반도의 역사와 문화를 반영하는 중요한 상징 중 하나입니다. 특히, 1950년대 한국전쟁에서 중요한 전장으로 사용되었던 곳으로, 이 곳에서는 자유를 지키기 위한 투쟁과 ...</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">한강은 총길이 514.5km, 유역면적은 약 25,805km²로 대한민국에서 가장 긴 강 중 하나입니다. 또한, 서울특별시를 중심으로 인구 밀집 지역을 지나가며 수도권의 주요한 물길로 ...</p>
<a href="#" class="btn">자세히 보기</a>
</div>
</article>
</div>
</div>
</section>
<!-- cardType -->
<section id="bannerType" class="banner__wrap nexon section center">
<h2 class="blind">배너 영역</h2>
<article class="banner__inner container">
<h3>한강을 제대로 즐기는 방법</h3>
<p>한강에서 보내는 시간을 더 아름다운 추억으로 남길 수 있는 방법을 알려드립니다.<br>
아래 블로그를 참고하여 한강에서의 추억을 더욱 값지게 만들어보세요.</p>
<a href="#">https://hoong-co.tistory.com/</a>
</article>
</section>
<!-- bannerType -->
<section id="textType" class="nexon section center">
<h2 class="blind">텍스트 영역</h2>
<div class="container">
<span class="section__small">HISTORY</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">20세기 초반에는 한강이 국내 산업과 교통의 중심지가 되어 활기를 띄었습니다. 그러나 일제강점기에는 일본의 수도인 도쿄와 대구를 연결하는 국제적인 수송선으로 전락하여 ...</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">2021년 현재 한강 주변 지역에는 한강공원, 반포한강공원, 여의도 한강공원 등 여러 공원과 수목원, 문화센터, 미술관, 박물관 등 다양한 문화시설이 조성되어 있습니다.</p>
<a class="text__btn" href="#">더보기</a>
</div>
</div>
</div>
</section>
<!-- textType -->
</main>
<!-- mainType -->
<footer id="footerType" class="nexon gray">
<section class="section nexon gray">
<h2 class="blind">푸터 영역</h2>
<div class="container">
<div class="footer__inner">
<article class="footer__menu">
<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>
</article>
<article class="footer__menu">
<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>
</article>
<article class="footer__menu">
<h3>한강공원 화장실</h3>
<ul>
<li><a href="#">위치보기</a></li>
<li><a href="#">안내보기</a></li>
<li><a href="#">시설보기</a></li>
<li><a href="#">가까운 시설 안내</a></li>
</ul>
</article>
<article class="footer__menu">
<h3>한강 배달존</h3>
<ul>
<li><a href="#">위치보기</a></li>
<li><a href="#">배달점 검색</a></li>
<li><a href="#">주소받기</a></li>
<li><a href="#">가까운 자리 보기</a></li>
</ul>
</article>
<article class="footer__menu">
<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>
</ul>
</article>
<article class="footer__menu">
<h3>신고하기</h3>
<ul>
<li><a href="#">불법행위</a></li>
<li><a href="#">소란행위</a></li>
<li><a href="#">민원안내</a></li>
<li><a href="#">안내소 위치</a></li>
</ul>
</article>
</div>
<address class="address">
<p>2023 한강공원 나들이 프로젝트 HanRiver Picnic</p>
<p>All Right Reserved</p>
</address>
</div>
</section>
</footer>
<!-- footerType -->
</body>
</html>HTML 정리해보기
- 앞서 게시한 레이아웃 게시물에서 만들었던 각각의 레이아웃을 가져왔습니다.
- 소스가 깔끔한 것이 중요하기 때문에 각각의 css는 따로 css파일을 만들어 링크를 걸어 주었습니다.
- 이번 페이지 에서는 파비콘을 추가하고, 사이트의 정보도 기재해 주었습니다. (SEO, 파비콘 부분)
추가된 CSS (미디어쿼리)
이미지 유형
@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;
margin-bottom: 10%;
}
.image__body .btn {
padding: 10px 20px;
font-size: 14px;
}
}이미지 유형
- max-width 값이 960px일 때 : 이미지를 한 장 줄여 이미지 두 장만 사용했습니다.
- max-width 값이 600px일 때 : 이미지를 세로로 정렬하고 각각의 이미지를 width 100%를 적용했습니다. 주제와 설명부분의 폰트 사이즈를 줄여주었습니다.
이미지/텍스트 유형
@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;
}
}이미지/텍스트 유형
- max-width 값이 960px일 때 : 텍스트 부분은 width값 100%를 적용하여 단독으로 올리고 목록은 보이지 않도록 설정했습니다. 이미지들은 width 49%로 나란히 정렬되도록 했습니다. 각각의 폰트사이즈를 줄여주었습니다.
- max-width 값이 600px일 때 : 이미지 부분도 width값 100%를 적용하고 나란히 나오도록 했습니다.
카드 유형
@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;
}
}카드 유형
- max-width 값이 960px일 때 : 카드 한 장을 지우고 두장의 width값을 49%로 설정하여 정렬했습니다.
- max-width 값이 600px일 때 : 카드 두 장에 width 값 100%로 일렬로 나오도록 설정 했습니다. 제목과 설명을 가운데 정렬해주었습니다.
배너 유형
@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;
}
}배너 유형
- max-width 값이 960px일 때 : 제목의 폰트만 줄여주었습니다.
- max-width 값이 600px일 때 : 마찬가지로 제목의 폰트만 줄여주었습니다.
텍스트 유형
@media (max-width : 960px){
.text__inner .text {
width: 49%;
}
}
@media (max-width : 600px){
.text__inner .text {
width: 100%;
}
}텍스트 유형
- max-width 값이 960px일 때 : width 값을 49%로 설정해 2열로 정렬되도록 했습니다.
- max-width 값이 600px일 때 : width 값을 100%로 설정해 1열로 정렬되도록 했습니다.
푸터 유형
@media (max-width : 960px){
.footer__inner {
flex-wrap: wrap;
}
.footer__menu {
width: 32.3333%;
margin-bottom: 6%;
}
}
@media (max-width : 600px){
.footer__menu {
width: 49%;
}
}푸터 유형
- max-width 값이 960px일 때 : 각각의 footer__menu의 width 값을 32.3333%로 설정하여 3열로 정렬되도록 했습니다.
- max-width 값이 600px일 때 : 각각의 footer__menu의 width 값을 49%로 설정하여 2열로 정렬되도록 했습니다.
이상으로 레이아웃을 합쳐 미디어쿼리 작업까지 마친 웹페이지를 만들어 보았습니다 !
728x90
반응형