728x90
지금까지 html로 만들어본 사이트를 종합해서 만들거에요 + 반응형
위 이미지처럼 그동안 만들었던 css와 html을 이용해서 만들거에요
👇👇👇이전 포스팅 보러가기 👇👇👇
meta데이터 이용하기 & 파비콘설정 & css 그룹화 & skip
이전 포스팅에서는 하지않은 설정을 했어요
웹표준을 최대한 지키려고 했습니다.
meta 데이터를 적어 검색엔진에서 노출될때 화면에 노출될 설명을 설정하였고
파비콘도 같은 의미로 설정해줬어요
그리고 css를 그룹화 하여 html에서 css는 link만 모여요 소스가독성은 덤 !
skip태그를 설정하여 접근성이 떨어질경우 접근성을 향상시켰어요 !
<!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 데이터를 이용해서 검섹에 노출될 부분을
설정해봤습니다.
-->
<meta name="author" content="나야나정희석">
<meta name="description" content="나 오늘 듀토리얼 사이트 만든거야 ">
<meta name="keyword" content="사이트, 사이트만들기, 튜토리얼, getgrovy">
<meta name="robots" content="all">
<!-- 파비콘
파비콘을 설정하였습니다. 화면으로 들어가면 title 옆에 잘보여요 !
-->
<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
css를 각각의 화면 스타일에 따라 분산시켰어요
sytle.css 엔
@import url("header.css");
....
@import url("footer.css");
모든 화면 스타일의 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">
<!-- //skip
웹접근성을 위해 tab키로 각각의 화면으로 이동할수 있게 했어요 !
이를 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 -->
....
</body>반응형 웹사이트란 .. ? ?
@midia를 이용해서 브라우져의 크기에 따라서 레이아웃이 변경되는 사이트를 말해요 !
아래 gif를 먼저 보고 갈게요 !
위처럼 브라우저의 넓이 값이 달라질때마다 레이아웃이 달라지는게 보이죠 ? ?
내용은 같지만 width 가로 길이의 비율에 따라 media쿼리를 이용 하면 다르게 한 화면을 다양하게 표현가능해요
max-width값에 따라 width 값이 33%로 3개 뿌려주던걸 100%로 1개씩 뿌려주거나
타이틀 과 설명이 있지만 화면 사이즈가 작아질경우 타이틀만 남겨놓기도 했어요
이모든걸 하는 이유는 가독성&웹디자인을 위해 하겠쬬 .. ?
아래는 공통 media 쿼리에요
공통에선 화면별 기능이 다르기 때문에 설정을 못하여 각각의 화면의 css에 다르게 코딩했어요
소스보기상세히 보시려면 git에서 보셔요 !
@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;
}
}오늘은 요기까지 ! 내일도 ..열공해요 😆