728x90
반응형
사이트 만들기(미디어 쿼리)
이미지 유형 : https://dongjin6539.tistory.com/28
카드 유형 : https://dongjin6539.tistory.com/31
텍스트 유형 : https://dongjin6539.tistory.com/35
이미지/텍스트 유형 : https://dongjin6539.tistory.com/39
슬라이드 유형 : https://dongjin6539.tistory.com/40
헤더 유형 : https://dongjin6539.tistory.com/44
푸터 유형 : https://dongjin6539.tistory.com/49
각 유형의 HTML코드와 CSS의 코드를 가져와서 한페이지에 만들었습니다.
코드 블럭(HTML)
CSS코드(font.css / reset.css / common.css / style.css)
STYLE CSS(헤더CSS / 슬라이드CSS / 이미지CSS / 이미지/텍스트CSS / 카드CSS / 배너CSS / 텍스트CSS / 푸터CSS)
완성화면(https://dongjin6539.github.io/web2023/site/site1/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>사이트 만들기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/font.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="#headerType">헤더 영역 바로가기</a>
<a href="#sliderType">슬라이드 영역 바로가기</a>
<a href="#imageType">이미지 영역 바로가기</a>
<a href="#imgTextType">이미지/텍스트 영역 바로가기</a>
<a href="#cardType">카드 영역 바로가기</a>
<a href="#bannerType">배너 영역 바로가기</a>
<a href="#textType">텍스트 영역 바로가기</a>
<a href="#footerType">푸터 영역 바로가기</a>
</div>
<!-- //skip -->
<header id="headerType">
<h1 class="blind">사이트 로고</h1>
<div class="header__inner">
<h1 class="header__logo">Need of Exercise</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">
<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="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 class="slider"></div>
<div class="slider"></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>NOTICE</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>
</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="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">무산소 운동은 유산소 운동의 반대말로 뜻은 산소를 활용하지 않고 에너지를 공급하는 무산소 대사가 발생하는, 순간적으로 강한 힘을 내어야 하는 운동이다.</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>
</section>
<!-- //cardType -->
<section id="bannerType" class="banner__wrap nexon section">
<h2 class="blind">배너 영역</h2>
<div class="banner__inner container">
<h3>운동의 시작</h3>
<p>운동을 시작하기에 앞서 자신의 마음먹기가 달렸습니다.<br>목표를 설정하고 시작하는 것이 좋습니다.</p>
<a href="#">https://dongjin6539.tistory.com/</a>
</div>
</section>
<!-- //bannerType -->
<section id="textType" class="nexon section center container">
<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">운동을 하면서 목표를 설정하고 그에 맞는 운동 계획을 세우는 것이 중요합니다. 목표를 설정하면 운동에 대한 동기부여가 생기고, 계획을 세우면 효과적인 운동이 가능합니다.</p>
<a class="text__btn" href="#">더보기</a>
</div>
</div>
</section>
<!-- //textType -->
</main>
<!-- //mainType -->
<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>
<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="#">적절한 스트레칭</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>
</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="#">영상</a></li>
<li><a href="#">커뮤니티</a></li>
</ul>
</div>
</div>
<address class="footer__right">
2023 Shin D.J. 운동 사이트 Portifolio is Power<br>
All Right Reserved
</address>
</div>
</footer>
<!-- //footerType -->
</body>
</html>코드 블럭 구성
- head태그 부분에 SEO로 작성자, 사이트 정보, 사이트 키워드를 입력했습니다.
- 홈페이지의 아이콘을 입력하기 위해 파비콘 이미지를 만들어서 입력했습니다.
- 필요한 CSS를 유용하게 사용하기 위해 링크 태그를 통해 CSS 폴더를 가져왔습니다.
- skip 태그는 사이트의 내용이 많을 경우 필요한 부분에 바로 이동하게 하기 위해 입력했습니다.
- 이전에 작업했던 각 유형의 HTML 코드 블럭의 필요한 부분을 가져왔습니다.
CSS코드 구성
- CSS 코드는 이전에 작업했던 각 유형의 style 태그 코드의 필요한 부분을 가져왔습니다.
반응형(미디어 쿼리) 구성
미디어 쿼리는 반응형 웹 디자인의 핵심 부분이다.
지정한 규칙에 브라우저 및 장치 환경이 일치하는 경우에만 CSS를 적용할 수 있는 방법을 제공합니다.
브라우저 화면의 최대 크기별로 나뉘어서 스타일 속성을 변경을 했습니다.
화면이 변경되면 구조가 깨지지 않게 입력했습니다.
미디어 쿼리 코드는 간결하게 필요한 속성만 쓰는게 좋습니다.
완성화면 링크에 들어가서 화면의 크기를 줄여서 보면 확인할 수 있습니다.
https://developer.mozilla.org/ko/docs/Learn/CSS/CSS_layout/Media_queries
common.css
/* common.css 미디어쿼리 */
@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;
}
}
이미지CSS
/* 이미지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: 10px;
}
.image__body .btn {
padding: 10px 20px;
font-size: 14;
}
}
이미지/텍스트CSS
/* 이미지/텍스트CSS 미디어쿼리 */
@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;
word-break: keep-all;
}
}
카드CSS
/* 카드CSS 미디어쿼리 */
@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;
}
}
배너CSS
/* 배너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;
}
}
텍스트CSS
/* 텍스트CSS 미디어쿼리 */
@media (max-width: 960px){
.text__inner .text {
width: 49%;
}
}
@media (max-width: 600px){
.text__inner .text {
width: 100%;
}
}
푸터CSS
/* 푸터CSS 미디어쿼리 */
@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%;
}
}
참고
SEO
검색 엔진 최적화를 의미합니다.
검색 엔진으로부터 웹사이트나 웹페이지에 대한 웹사이트 트래픽의 품질과 양을 개선하는 과정입니다.
웹 페이지 검색엔진이 자료를 수집하고 순위를 매기는 방식에 맞게 웹 페이지를 구성해서 검색 결과의 상위에 나올 수 있게 한다. 웹 페이지와 관련된 검색어로 검색한 검색 결과 상위에 나오게 된다면 방문 트래픽이 늘어나기 때문에 효과적인 인터넷 마케팅 방법 중의 하나이며 비용처리 없는 마케팅이라고 할 수 있습니다.
기본적인 작업 방식은 특정한 검색어를 웹 페이지에 적절하게 배치하고 다른 웹 페이지에서 링크가 많이 연결되도록 하는 것이다. 구글 등장 이후 검색 엔진들이 콘텐츠의 신뢰도를 파악하는 기초적인 지표로 다른 웹사이트에 얼마나 인용되었나를 사용하기 때문에 타 사이트에 인용되는 횟수를 늘리는 방향으로 최적화한다.
https://ko.wikipedia.org/wiki/%EA%B2%80%EC%83%89_%EC%97%94%EC%A7%84_%EC%B5%9C%EC%A0%81%ED%99%94
skip 태그
웹접근성을 위한 건너뛰기 링크입니다.
비장애인은 눈으로 보고 마우스를 이용하여 핵심 콘텐츠를 쉽게 확인할수 있겠지만 몸이 불편하거나 눈이 보이지 않는 장애인으로써는 스크린 리더기를 이용 그 글을 귀로 들어야 합니다.
반복되는 대메뉴 부분을 필요이상으로 들을 수 밖에 없다고 합니다.
이 부분을 보완하기 위해 건너뛰기 링크를 제공하여 바로 핵심 콘텐츠 부분으로 넘어갈수 있도록 페이지 상단에 건너뛰기 링크를 제공함으로써 장애인들이 보다 사이트를 편히 이용하게 만들어주는 기능입니다.
https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=tkdgus830416&logNo=70173673009
728x90
반응형
