코딩 24일째
포토샵 browse in bridge 전체선택 -> batch rename -> copy to other folder -> 이름 바꾸기
ctrl + alt + shift + l / ctrl + alt + l 자동 사진 보정
-------------------------------------------------------------------------------------------------------
<!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">
<title>반응형웹디자인</title>
<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>
</head>
<body>
<!-- header+nav+section>article{$$}*12-->
<!--footer를 넣고싶으면 section 안에 넣어야함.그래야 section 중앙에 정렬됨-->
<header>
<!-- h1#logo{logo}+(ul#gnb>(li>a[href=#]>i+{Home})*4)+div.sns>(a[href=#]>img[src=img/sns$.png])*5-->
<h1 id="logo">logo</h1>
<ul id="gnb">
<li>
<a href="#">
<i class="fa fa-home"></i> Home
</a>
</li>
<li>
<a href="#">
<i class="fa fa-desktop"></i> DeskTop
</a>
</li>
<li>
<a href="#">
<i class="fa fa-tablet"></i> Tablet
</a>
</li>
<li>
<a href="#">
<i class="fa fa-mobile"></i> Mobile
</a>
</li>
</ul>
<div class="sns">
<a href="#">
<img src="img/sns1.png" alt="about">
</a>
<a href="#">
<img src="img/sns2.png" alt="contact">
</a>
<a href="#">
<img src="img/sns3.png" alt="facebook">
</a>
<a href="#">
<img src="img/sns4.png" alt="twitter">
</a>
<a href="#">
<img src="img/sns5.png" alt="etc">
</a>
</div>
</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*/
body {
font:bold 16px/1.6 'Poiret One';
/*
color: #fff;
text-shadow: 1px 1px 3px #000;
*/
}
/*전체 layout(1600px)이상*/
header {
width: 20%;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;
text-align: center;
line-height: 260px;
}
/*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;}
/*전환효과 transition*/
header, nav, article {
transition: all 0.5s;
}
article {
animation: scale 1s 1;
/*1이 아닌 1s로 쓰면 1초간 지속. 1만 쓰면 한 번만, 2만 쓰면 두 번 만*/
}
/*아티클 크기 조절 animation*/
@keyframes scale {
0% {transform: scale(0);}
100% {transform: scale(1);}
}
/*header contents*/
header #logo {
width: 180px;height: 136px;
background: url(../img/logo1.png) no-repeat 0 0;
background-size: contain;
/*contain(이미지 위주. 절대로 안 짤림. 빈틈 생길 수도) cover(프레임)*/
text-indent: -9999px;/*들여쓰기*/
position: absolute;
/*높잇값 기준으로 중앙정렬! 세로정렬: top*/
left: 50%;margin-left: -90px;
/*왼쪽 기준으로 50%를 옮기고 로고 넓이의 반값을 마진으로 줘서 중앙정렬*/
top:70px
}
#gnb {
position: absolute;
top: 300px;
right:50%;margin-right:-40px;
}
#gnb a {
display: block;
padding: 5px 15px;
line-height: 2em;
font-weight: bold;
transition: all, .2s;
}
#gnb a:hover,
#gnb a:focus {
color: #227fc3;
}
#gnb i {
margin-right: 5px;
color: #227fc3;
}
.sns {
width: 90px;height: 47px;
position: absolute;
bottom: 50px;
right: 50%;margin-right: -45px;
}
.sns a {
float: left;
}
/* 겹치면 안 돼!!!!!!!!!!!! */
/* 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) {
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: 100%;height:200px}
article:nth-child(3) {display:none;}
article:nth-child(4) {display:none;}
article:nth-child(5) {width:50%;}
article:nth-child(6) {width:50%;}
article:nth-child(7) {display:none;}
article:nth-child(8) {width:50%;}
article:nth-child(9) {width:50%;}
article:nth-child(10) {display:none;}
article:nth-child(11) {width:50%;}
article:nth-child(12) {width:50%;}
}
/* 480px - 639px */
@media screen and (min-width:480px) and (max-width:639px) {
header {
width: 100%;height:130px;
position: relative;
}
nav, section {
width: 100%;margin-left: 0;
}
nav {
display: none;
}
section > article {
height: 150px;
}
article:nth-child(1) {width: 100%;height:300px}
article:nth-child(2) {width: 100%;}
article:nth-child(3) {display:none;}
article:nth-child(4) {display:none;}
article:nth-child(5) {width:50%;}
article:nth-child(6) {width:50%;}
article:nth-child(7) {display:none;}
article:nth-child(8) {width:50%;}
article:nth-child(9) {width:50%;}
article:nth-child(10) {display:none;}
article:nth-child(11) {width:50%;}
article:nth-child(12) {width:50%;}
}
/* -479px : 모바일 */
@media screen and (min-width:0px) and (max-width:479px) {
header {
position: fixed;
width:100%;height:40px;
z-index:5;
background-color: transparent;
}
nav, section {
width: 100%;margin-left: 0;
z-index:4;
}
nav {
display: none;
}
section > article {
display: none;
}
article:nth-child(1) {
display: block;
position: fixed;
width: 100%;height:100%
}
}
-------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------