3/29 오전수업 css코드

@charset "utf-8";

/* 구글폰트 사용 */

@import url(http://fonts.googleapis.com/css?family=Poiret+One);

/* 모든 엘리먼트의 기본 마진, 패딩 없앰. 브라우저 기본값 삭제 */

* { margin:0;  padding:0;}

/* li 태그의 기호.숫자 없애기  */

ol,ul { list-style: none; }

/* 링크의 밑줄 없애기. 색지정*/

a { outline:0; text-decoration:none; color:#555; }

/* 이미지 테두리 없애기 */

img { border:0;}

/* 기본글씨크기. 줄간격. 폰트. 글자색 지정 */

body { font:12px/1.6 'Poiret One'; color:#555; } 

/*레이아웃------------------------------------------------------*/

/* 헤더 */

header { 

    position:fixed; /* 위치고정 */

    width:15%; 

    height:100%; 

    background:#fff; 

    top:0px; /* 위쪽 위치 */

    left:0px; /* 왼쪽 위치*/

}

/* 네비게이션 */

nav { 

    position:relative; 

    width:85%; 

    height:35px; 

    background:#212121; 

    margin-left:15%; 

}

/* 섹션 */

section { 

    width:85%; 

    position:relative; 

    margin-left:15%;

}

/* 아티클 */

article { 

    float:left; /* 왼쪽으로 흐르게. 반응형 */

    height:260px; 

}

/* 각각 박스 크기지정*/

article:nth-child(1) { width:60%; height:520px; background:#ddd;}

article:nth-child(2) { width:40%; background:#ccc;}

article:nth-child(3) { width:20%; background:#bbb;}

article:nth-child(4) { width:20%; background:#aaa;}

article:nth-child(5) { width:20%; background:#999;}

article:nth-child(6) { width:40%; background:#888;}

article:nth-child(7) { width:20%; background:#777;}

article:nth-child(8) { width:20%; background:#666;}

article:nth-child(9) { width:40%; background:#555;}

article:nth-child(10) { width:20%; background:#444;}

article:nth-child(11) { width:20%; background:#333;}

article:nth-child(12) { width:20%; background:#222;}

/* header 컨텐츠 */

header h1 { 

    width:180px; 

    height:136px; 

    background:url(../img/logo1.png) no-repeat 0px 0px;/* 배경이미지 */

    background-size:contain; /* 내용에 맞게 */

    position:absolute; 

    top:70px;

    left:50%; 

    margin-left:-90px;

    text-indent:-99999px;

}

#gnb { 

    position:absolute; 

    top:300px; 

    right:57px;

}

#gnb a { 

    display:block; 

    padding:8px 30px;

    font-size:17px; 

    font-weight:bold; 

    color:#555; 

    text-align:left; 

    line-height:1.8; 

    transition:all .5s; /* 0.5초간 트랜지션 */

}

/* 마우스오버시 */

#gnb a:hover { 

    color:skyblue; /* 글자색 변경*/

}

#gnb a i { margin-right:13px;}

.snsSet { 

    width:90px;

    height:47px;

    position:absolute; 

    bottom:50px; 

    right:50%; 

    margin-right:-45px;}

.snsSet a { 

    float:left; /* 왼쪽으로 흐르도록.*/

}

/*nav*/

nav a:nth-child(1) { position:absolute; top:5px; left:10px;}

nav a:nth-child(2) { position:absolute; top:5px; left:150px;}

nav a:nth-child(3) { position:absolute; top:5px; right:90px;}

nav a:nth-child(4) { position:absolute; top:5px; right:10px;}

article>div { 

    position:relative; 

    width:100%; 

    height:100%; 

    overflow:hidden; /* 영역을 벗어난 컨텐츠는 안보이게 */

    cursor:pointer; /* 커서모양을 손모양으로. 링크에 마우스오버될 때 아이콘 */

}

/* 배경이미지 삽입*/

article .bg1 { background-image:url(../img/pic1.jpg);}

article .bg2 { background-image:url(../img/pic2.jpg);}

article .bg3 { background-image:url(../img/pic3.jpg);}

article .bg4 { background-image:url(../img/pic4.jpg);}

article .bg5 { background-image:url(../img/pic5.jpg);}

article .bg6 { background-image:url(../img/pic6.jpg);}

article .bg7 { background-image:url(../img/pic7.jpg);}

/* 이미지박스 */

article .bg { 

    background-size:cover; 

    background-position:center center; 

}

article .bg span { 

    font-size:60px; 

    color:#fff;

    position:absolute; 

    bottom:0px; 

    right:20px; 

    transform:scale(10); /* 10배 확대 */

    opacity:0;

    transition:all 0.6s;

}

article .bg1 span { 

    font-size:170px; 

    bottom:-76px;

    right:-6px; 

    opacity:1; 

    transform:scale(1); /* 1배 */

    transition:all 0.5s;

}

/*이미지박스 호버효과*/

article:hover .bg span { 

    opacity:1; /* 투명도. 보이게 */

    transform:scale(1); /* 크기. 1배 */

}

article .bg1:hover span { 

    transform:rotateY(360deg); /* 360도 회전 */

    color:#222; 

}

/* 텍스트박스 */

article .txt { color:#666; background:#fff; box-sizing:border-box; padding:40px 30px; transition:all 1s;}

article:nth-child(3) .txt { background:#bff7fa;}

article:nth-child(11) .txt { background:#e3f1fb;}

article .txt i { font-size:300px; color:#b2effc; opacity:0; position:absolute; bottom:-70px; right:-200px; transition:all 0.7s;}

article:nth-child(3) .txt i { position:absolute; bottom:-20px; right:-15px; font-size:200px; color:#fff; opacity:0.7;}

article .txt strong { font-size:30px; font-weight:normal; line-height:1.6; color:#444; margin-bottom:20px; transition:all 1s;}

/*텍스트박스 호버효과*/

article:hover .txt { background:#6ce2fb; color:#fff;}

article:hover .txt i { right:0px; opacity:0.5;}

article:hover .txt strong { color:#fff;}

/* 미디어쿼리를 이용해서 화면크기에 따라 박스의 크기가 달라지도록 조정 */

@media screen and (min-width:1280px) and (max-width:1599px) {  

header { position:relative; width:100%; height:80px;}

nav { width:100%; margin-left:0%;}

section { width:100%; margin-left:0px;}

    

    /* header 컨텐츠도 변경. */

header h1 { 

        width:200px; 

        height:40px; 

        background-image:url(../img/logo2.png); /* 이미지를 변경 */

        top:20px; 

        left:20px; 

        margin-left:0px;

    }

#gnb { top:20px; right:200px;}

#gnb li { float:left;}

.snsSet { bottom:20px; right:80px;}

}

@media screen and (min-width:1024px) and (max-width:1279px) {  

header { position:relative; width:100%; height:80px;}

nav { width:100%; margin-left:0%;}

section { width:100%; margin-left:0px;}

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%;}

    

        

    /* header 컨텐츠 */

header h1 { width:200px; height:40px; background-image:url(../img/logo2.png); top:20px; left:20px; margin-left:0px;}

#gnb { top:20px; right:30px;}

#gnb li { float:left;}

.snsSet {

        display:none; /* sns관련 메뉴 안보이게 */

    }

 

}

@media screen and (min-width:780px) and (max-width:1023px) {  

    /* 12개중 4개는 안보이게. */

header { position:relative; width:100%; height:80px;}

nav { width:100%; margin-left:0%;}

section { width:100%; margin-left:0px;}

article:nth-child(1) { width:100%; height:400px;}

    

article:nth-child(2) { width:66.6666%;}

article:nth-child(3) { width:33.3333%;}

    

article:nth-child(4) { width:33.3333%; display:none;}

article:nth-child(5) { width:33.3333%;}

article:nth-child(6) { width:66.6666%;}

    

article:nth-child(7) { width:66.6666%; display:none;}

article:nth-child(8) { width:33.3333%;}

article:nth-child(9) { width:33.3333%;}

article:nth-child(10) { width:66.6666%; display:none;}

article:nth-child(11) { width:33.3333%;}

article:nth-child(12) { width:33.3333%; display:none;}

    

    /* header 컨텐츠 */

header h1 { width:200px; height:40px; background-image:url(../img/logo2.png); top:20px; left:20px; margin-left:0px;}

#gnb { top:20px; right:10px;}

#gnb li { float:left;}

#gnb a { padding:10px 10px;}

.snsSet { 

        display:none; /* sns관련 메뉴 안보이게 */

    }

}

@media screen and (min-width:640px) and (max-width:779px) {  

/* 12개중 4개는 안보이게. */

header { position:relative; width:100%; height:80px;}

nav { width:100%; margin-left:0%;}

section { width:100%; margin-left:0px;}

article:nth-child(1) { width:100%; height:400px;}

    

article:nth-child(2) { width:100%;}

    

article:nth-child(3) { width:33.3333%; display:none;}

article:nth-child(4) { width:100%; display:none;}

article:nth-child(5) { width:50%;}

article:nth-child(6) { width:50%;}

    

article:nth-child(7) { width:66.6666%; display:none;}

article:nth-child(8) { width:50%;}

article:nth-child(9) { width:50%;}

    

article:nth-child(10) { width:66.6666%; display:none;}

article:nth-child(11) { width:50%;}

article:nth-child(12) { width:50%;}

    

    /* header 컨텐츠 */

header h1 { width:200px; height:40px; background-image:url(../img/logo2.png); top:20px; left:20px; margin-left:0px;}

#gnb { top:20px; right:10px;}

#gnb li { float:left;}

#gnb a { padding:10px 10px;}

.snsSet { display:none;}

    

}

@media screen and (min-width:480px) and (max-width:639px) {  

/* 12개중 4개는 안보이게. */

header { position:relative; width:100%; height:130px;}

nav { display:none;}

section { width:100%; margin-left:0px;}

article { height:150px;}

article:nth-child(1) { width:100%; height:300px;}

    

article:nth-child(2) { width:100%;}

    

article:nth-child(3) { width:33.3333%; display:none;}

article:nth-child(4) { width:100%; display:none;}

article:nth-child(5) { width:50%;}

article:nth-child(6) { width:50%;}

    

article:nth-child(7) { width:66.6666%; display:none;}

article:nth-child(8) { width:50%;}

article:nth-child(9) { width:50%;}

    

article:nth-child(10) { width:66.6666%; display:none;}

article:nth-child(11) { width:50%;}

article:nth-child(12) { width:50%;}

    

    /* header 컨텐츠 */

header h1 { position:relative; top:20px; left:0px; width:200px; height:45px; background-image:url(../img/logo2.png); margin:0px auto;}

#gnb { width:100%; height:40px; top:80px; right:0px;}

#gnb li { float:left; width:25%;}

#gnb a { padding:4px; text-align:center;}

.snsSet { display:none;}

}

@media screen and (max-width:479px){

header { position:fixed; width:100%; height:40px; background-color:transparent; z-index:5;}

    /* 네비게이션 안보이게 */

nav { display:none;}

    

section { width:100%; margin-left:0px; z-index:4;}    

article { display:none;}

    

    /* 첫번째 아티클만 보이게 */

article:nth-child(1) { display:block; position:fixed; width:100%; height:100%;}

    

    /* header 컨텐츠 */

header h1 { top:20px; width:140px; margin-left:-70px;}

#gnb { width:250px; top:140px; right:50%; margin-right:-125px;}

    /* 가장크기가 작은 화면에서는 메뉴를 둥근버튼으로 화면 전체에 배치 */

#gnb a { 

        width:100%; 

        background:#000; 

        box-sizing:border-box; 

        margin:8px 0px; 

        border-radius:10px; /* 둥근버튼 */

        opacity:0.5; 

        color:#fff;

    }

#gnb a:hover { 

        opacity:1; 

        transform:scale(1.1); /* 1.1배확대*/

    }

}