코딩 23일째
반응형 웹 레이어웃 필수 구문
mediaquery?
:화면 해상도(폭)에 따라 해당하는 css 실행해줌.
1.html문서
<meta name="viewoport" content="width=device-width,initial-scale=1.0">
2.css
@media screen and (최소크기) and (최대크기) {}
nth-child()
: class 추가 없이 가기 다른 요소 선택.
box-sizing
: padding, border를 width에 포함시킴.
transition
: 콬텐츠 박스에 마우스오버 시, 전환효과 구현.
webfont
:구글 웹폰트 적용
transform(2d)
: 주 메뉴, 텍스트 박스의 글자를 확대함.
animation
: 페이지 로딩 시, 콘텐츠 박스의 모션을 만듦.
----------------------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<!-- viewport 설정이 없으면 반응형 페이지는 없다!-->
<meta http-equiv="X-UA-Compatible" content="IE-Edge">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poiret+One">
<link rel="stylesheet" href="css/font-awesome.min.css">
<!-- capitalising: Pascal case / javascript: camel case-->
<link rel="stylesheet" href="css/main.css">
<script src="js/modernizr-custom.js"></script>
<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/script.js"></script>
<title>Document</title>
</head>
<body>
<!-- header+nav+section>article{$$}*12-->
<!--footer를 넣고싶으면 section 안에 넣어야함.그래야 section 중앙에 정렬됨-->
<header></header>
<nav></nav>
<section>
<article>01</article>
<article>02</article>
<article>03</article>
<article>04</article>
<article>05</article>
<article>06</article>
<article>07</article>
<article>08</article>
<article>09</article>
<article>10</article>
<article>11</article>
<article>12</article>
</section>
</body>
</html>
----------------------------------------------------------------------------------------------------------
@charset "utf-8";
@import url(normalize.css);
/*hadaboni.net/ex2*/
/*전체 layout(1600px)이상*/
body {font:bold 56px/1.6 'Poiret One';}
header {
width: ;height: 100%;
background:#fff;
position: fixed;
/* 반응형은 브라우저의 크기를 따른다. 따라서 fixed를 준다.*/
left:0;top:0;
}
nav {
width: 80%;height:35px;
/* 이런 작은 부분 효과 주자고 웹폰트 불러오는 것은 미련한 짓이므로 그냥 이미지 처리하자*/
background: #222;
position: relative;
}
/*계산이 복잡해지므로 nav는 꼭 안 해도 된다(?)*/
section {
width:80%;
position: relative;
}
nav, section {
margin-left: 20%;
/* 왼편 20% 자리가 보장됨*/
}
section > article {
height: 260px;
float: left;
}
/*article = 100% section*/
article:nth-child(1) {background:#ddd; width:60%; height:520px;}
article:nth-child(2) {background:#ccc; width:40%; height:260px;}
article:nth-child(3) {background:#bbb; width:20%; height:260px;}
article:nth-child(4) {background:#aaa; width:20%; height:260px;}
article:nth-child(5) {background:#999; width:20%; height:260px;}
article:nth-child(6) {background:#888; width:40%; height:260px;}
article:nth-child(7) {background:#777; width:20%; height:260px;}
article:nth-child(8) {background:#666; width:20%; height:260px;}
article:nth-child(9) {background:#555; width:40%; height:260px;}
article:nth-child(10) {background:#444; width:20%; height:260px;}
article:nth-child(11) {background:#333; width:20%; height:260px;}
article:nth-child(12) {background:#222; width:20%; height:260px;}
/* 겹치면 안 돼!!!!!!!!!!!! */
/* 1280px - 1599px */
@media screen and (min-width:1280px) and (max-width:1599px) {
/* 최소크기, 최대크기 필요: 2개 씀. 띄어쓰기 꼭 해야함*/
header {
position:relative;
/* 꼭 바꿔줘야함. 헤더 기준으로 정렬해야 하기 때문임.*/
width: 100%;height: 80px;
}
nav, section {
width: 100%;margin-left: 0;
/* margin 값을 안 주면 상기 margin이 계속 남아있음*/
}
}
/* 1024px - 1279px */
/* 가로 5칸 컨텐츠를 4칸으로 나누는 작업 */
@media screen and (min-width:1024px) and (max-width:1279px) {
header {
width:100%;height:80px;
position:relative;
}
nav, section {
width: 100%;margin-left: 0;
}
article:nth-child(1) {width: 75%;}
article:nth-child(2) {width: 25%;}
article:nth-child(3) {width: 25%;}
article:nth-child(4) {width: 25%;}
article:nth-child(5) {width: 25%;}
article:nth-child(6) {width: 50%;}
article:nth-child(7) {width: 50%;}
article:nth-child(8) {width: 25%;}
article:nth-child(9) {width: 25%;}
article:nth-child(10) {width: 50%;}
article:nth-child(11) {width: 25%;}
article:nth-child(12) {width: 25%;}
}
/* 780px - 1023px */
/* 모든걸 right 기준으로 정렬한다.*/
@media screen and (min-width:780px) and (max-width:1023px) {
header {
width: 100%;height: 80px;
position: relative;
}
nav, section {
width: 100%;margin-left: 0;
}
article:nth-child(1) {width: 100%;height:400px}
article:nth-child(2) {width: 33.3333%;}
article:nth-child(3) {width: 33.3333%;}
article:nth-child(4) {display:none;}
article:nth-child(5) {width: 33.3333%;}
article:nth-child(6) {width: 33.3333%;}
article:nth-child(7) {display:none;}
article:nth-child(8) {width: 33.3333%;}
article:nth-child(9) {width: 33.3333%;}
article:nth-child(10) {display:none;}
article:nth-child(11) {width: 33.3333%;}
article:nth-child(12) {display:none;}
/* 소수점 4자리까지 쓰면 거의 잘 맞음.*/
}
}
/* 640px - 779px */
@media screen and (min-width:640px) and (max-width:779px) {
}
/* 480px - 639px */
@media screen and (min-width:480px) and (max-width:639px) {
}
/* -479px : 모바일 */
@media screen and (min-width:0px) and (max-width:479px) {
}
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------------------------