코딩 13일째
jsbin.com
설치 안 하고 코딩연습 가능한 사이트. emmet 사용 가능.
--------------------------------------------------------------------------------------------
http://fontawesome.io/
font-awesome : 개발자용
font-awesome.min : 일반인용
fontawesome DATA 폴더 저장
font 폴더 root에 c&p
css에 font-awesome.min 저장
--------------------------------------------------------------------------------------------
index.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/font-awesome.min.css">
<!--항상 폰트 먼저-->
<link rel="stylesheet" href="http://fonts.googleapis.com/earlyaccess/nanumgothic.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Orbitron">
<!-- <link rel="stylesheet" href="css/normalize.css">-->
<link rel="stylesheet" href="css/main.css">
<script src="js/modernizr-custom.js"></script>
<script src="js/design.js"></script>
</head>
<body>
<!--float
0.block 속성을 유지한채 한줄로(inline) 정렬됨.
1. left와 right로 정렬할 수 있다.-->
<!--div.wrap>h1#logo{float}+ul#gnb>(li>a{$})*5-->
<div class="wrap clearfix">
<h1 id="logo">float</h1>
<ul id="gnb">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
</ul>
</div>
<!--id는 함부로 쓰면 안 됨. class 적용 가능. id와 class 다른 취급!!
list는 a 값을 가져야 한다.-->
</body>
</html>
main.css
@charset "utf-8";
@import url(normalize.css);
/*같은 폴더에 있는 친구*/
/*p237*/
body {
font-family: Orbitron, sans-serif;
font-size: 16px;
background-color: #fff;
color: #333;
}
/* float-layout */
/* float의 원래 기능은 사진을 감싸는 용이었으나 그렇게 사용하지 않음*/
.wrap {
width: 1000px;
margin: auto;
margin-top: 20px;
background-color: #aaa;
}
#logo {
float: left;
/* float 적용시 margin이 안 먹음. margin이 먹는 경우: 브라우저보다 작은 값을 가지고 있을 때. 블럭요소이면서 width값을 가지고 있을 때. margin: auto;*/
}
#gnb {
float: right;
}
#gnb > li {
float: left;
}
/*
블록요소가 떠오르게 되면(float) 부모요소 높이값이 "0"이 된다.
해결방법(.clearfix)
1. height: 값
2. overflow: hidden;
***
<문법임!!!>
.clearfix:before,
.clearfix:after {
content: '';
display: block;
clear: both;
}
*/
.wrap {
/*height: 100px; 부모의 높이값이 생김*/
/* overflow: hidden; 해당 값을 주지 않을경우 부모가 커진다. auto: 커짐 hidden: 숨기기 */
}
/*원래 normalize에 작성해야 함*/
/*단어 하나 잡고 ctrl+b 하면 해당 단어 다 선택*/
.clearfix:before,
.clearfix:after {
content: '';
display: block;
clear: both;
}
/*일직선으로 나오는 이유: block element 이므로 앞으로 갈 수 없다.*/
/*부모의 높이값이 없어진다. 자식을 감싸는 높이로.*/
/* #gnb */
.wrap {height: 50px;}
/*clearfix 값을 줬으므로 밖에 빠져나갈 위험 없음.*/
#logo {
font-size: 50px;
line-height: 50px;
padding-left: 10px;
text-shadow: 0 0 10px #fff;
}
#gnb > li > a {
display: block;
width: 100px; height: 50px;
line-height: 50px;
/*세로 중앙정렬 하기: 부모값과 같은 크기를 준다.*/
text-align: center;
background-color: #eee;
}
/* anchor tag = inline element */
/*글자의 block은 글자값보다 크다.*/
#gnb > li > a:hover,
#gnb > li > a:focus {
background-color: #111;
color: #eee;
}
/*focus값을 꼭 줘야한다.*/
--------------------------------------------------------------------------------------------
normalize.css안에 적기
+) normalize 파일은 layout.css에 불러온다
import url(normalize.css)\
/*reset*/
* {margin: 0;padding: 0;border: 0;}
ul {list-style: none;}
a {text-decoration: none;color: inherit;}
h1 {margin: 0;}
/* .clearfix */
.clearfix:before,
.clearfix:after {
content: '';
display: block;
clear: both;
}
--------------------------------------------------------------------------------------------
layout.css
@charset "utf-8";
@import url(normalize.css);
/*<link rel="stylesheet" href="css/normalize.css">*/
/*float-layout*/
.wrap {
width: 920px;
text-align: center;
text-transform: capitalize;
text-shadow: 1px 1px 6px #333;
}
header {
width: 100%; height: 100px;
/*부모만 따라가는 width*/
background-color: red;
/*축약식은 css에서만 가능. js 불가.*/
}
nav {
width: 100%; height: 100px;
background-color: orange;
}
aside {
width: 30%; height: 400px;
background-color: green;
}
section {
width: 70%; height: 400px;
background-color: blue;
}
footer {
width: 100%; height: 100px;
background-color: hotpink;
}
.wrap {
margin: auto;
/*margin도 축약식임*/
}
header, nav {
/*css에서만 사용되는 font 축약식. 순서있음.*/
font: bold italic 50px/100px Arvo;
/* 효과, 글자크기, 문장간격, 폰트를 한 줄에 작성 가능*/
color: #eee;
}
aside {
float: left;
font: bold italic 50px/400px Arvo;
color: #eee;
}
section {
float: right;
font: bold italic 50px/400px Arvo;
/*line-height(400)을 주면 글자 하나의 높이를 400px로 인식*/
color: #eee;
}
footer {
clear: both;
font: bold italic 50px/100px Arvo;
color: #eee;
}
--------------------------------------------------------------------------------------------
transition.css
@charset "utf-8";
@import url(normalize.css);
div {
width: 100px;height: 100px;
background-color: hotpink;
/*css3*/
border-radius: 50px;
/*100px이므로 50px 주면 완전한 영*/
text-align: center;
line-height: 100px;
/*인라인 요소에서 세로 중앙 정렬을 주는 유일한 방법*/
margin: 10px 0 20px 50px;
/*
margin-top: ;
margin-right: ;
margin-bottom: ;
margin-left: ;
(0,y)를 기준으로 시계방향으로
(0,y), (x, 0), (0, -y), (0, -x)
패딩, 보더에도 적용
*/
/*패딩을 주면 그것까지 width값이 된다.*/
}
div i {
/*인라인 요소*/
color: #fff;
font-size: 50px;
/*사이즈가 적용이 안 됨.*/
display: block;
/*인라인요소이기 때문에 block 요소로 display를 바꿔줌.*/
}
/*모든 div에 똑같은 transition 효과를 줄 거임*/
div {
transition: all 1s;
원 색깔이 서서히 바뀜
cursor: pointer;
}
div:nth-child(1) {background-color: red;}
div:nth-child(2) {background-color: yellow;}
div:nth-child(3) {background-color: green;}
div:nth-child(1):hover {background-color: gray;}
div:nth-child(2):hover {background-color: gray;}
div:nth-child(3):hover {background-color: gray;}
http://fontawesome.io/icons/
아이콘 확인 가능