웹사이트 만들기(미디어 쿼리)
이미지 유형: https://dongjin6539.28
메모리 카드 유형: https://dongjin6539.31
텍스트 유형: https://dongjin6539.35
'추천 관련글,
이미지/텍스트 유형: https://dongjin6539.39
포일 유형: https://dongjin6539.40
헤더 유형: https://dongjin6539.44
바닥글 종류 : https://dongjin6539.49
나는 모든 종류의 html 코드와 css 코드를 가져와 페이지를 만들었습니다.
코드 블록(HTML)
CSS 코드(글꼴.css / 리셋.css / common.css / 스타일.css)
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="http://dongjin6539.m/assets/ico/favicon.png"/>
<link rel="apple-touch-icon" sizes="114x114" href="http://dongjin6539.m/assets/ico/favicon.png"/>
<link rel="apple-touch-icon" href="http://dongjin6539.m/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.</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>코드 블록 구성
- 헤드 태그 부분에 작성자, 사이트 정보, 사이트 키워드를 SEO로 넣었습니다.
- 홈페이지 아이콘을 입력하기 위해 favicon 이미지를 생성하여 입력했습니다.
- 필요한 CSS를 사용할 수 있도록 링크 태그를 통해 CSS 폴더를 가져왔습니다.
- 웹사이트에 콘텐츠가 많을 때 원하는 부분으로 바로 건너뛰기 위해 스킵 태그를 입력했습니다.
- 이전에 작업한 각 유형의 HTML 코드 블록에서 필요한 부분을 가져왔습니다.
CSS 코드 구성
- CSS 코드는 이전에 작업한 각 스타일 태그 유형에 필요한 코드 조각을 취했습니다.
반응형 구성(미디어 쿼리).
미디어 쿼리는 반응형 웹 디자인의 중요한 부분입니다.
브라우저 및 디바이스 환경이 지정한 규칙을 준수하는 경우에만 CSS를 적용하는 방법을 제공합니다.
브라우저 화면의 최대 크기에 따라 스타일 속성이 변경되었습니다.
화면이 바뀔 때 구조가 깨지지 않도록 입력했습니다.
미디어 쿼리 코드는 간결해야 하며 필수 속성만 작성해야 합니다.
완성된 화면 링크로 이동하여 화면 크기를 줄여서 확인할 수 있습니다.
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://en.wikipedia.org/wiki/%EA%B2%80%EC%83%89_%EC%97%94%EC%A7%84_%EC%B5%9C%EC%A0%81%ED %99%94
태그 건너뛰기
웹 접근성을 위한 건너뛰기 링크입니다.
비장애인은 마우스로 쉽게 핵심 내용을 확인하고 눈으로 볼 수 있으며, 장애가 있거나 시각 장애인은 스크린 리더를 사용하여 귀로 텍스트를 들어야 합니다.
필요 이상으로 메뉴의 많은 부분을 반복해서 듣는 수밖에 없다고 한다.
이 부분을 보완하기 위해 페이지 상단에 건너뛰기 링크를 제공하여 메인 콘텐츠 부분으로 바로 이동할 수 있도록 하여 장애가 있는 분들이 보다 편리하게 사이트를 이용할 수 있도록 하였습니다.https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=tkdgus830416&logNo=70173673009