데일리 코딩

코딩 13일째

파푸가 2016. 11. 2. 18:06

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;

}


--------------------------------------------------------------------------------------------

float_Layout.html

<!DOCTYPE html>
<html lang="ko">
<head>
 <meta charset="UTF-8">
 <title>float를 이용한 레이아웃</title>
 <link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Arvo">
<!-- <link rel="stylesheet" href="css/normalize.css">-->
 <link rel="stylesheet" href="css/layout.css">
 <script src="js/modernizr-custom.js"></script>
 <script src="js/design.js"></script>
</head>
<body>
<!-- div.wrap>header{header}+nav{nav}+aside{aside}+section{section}+footer{footer}-->
 <div class="wrap">
  <header>header</header>
  <nav>nav</nav>
  <aside>aside</aside>
  <section>section</section>
  <footer>footer</footer>
</div>
</body>
</html>

--------------------------------------------------------------------------------------------


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.html

<!DOCTYPE html>
<html lang="ko">
<head>
 <meta charset="UTF-8">
 <title>transition</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=Abril+Fatface">
 <link rel="stylesheet" href="css/transition.css">
 <script src="js/modernizr-custom.js"></script>
 <script src="js/design.js"></script>
</head>
<body>
<!--
font-awesome 사용법
i 태그로 클래스를 만들어 놓음(예약어가 있다.)
사용할 아이콘 이름을 찾아 쓰면 됨.
i-em 기울임
b-strong 굵게
-->
<!-- (div>i.fa.fa-facebook)*3-->
 <div><i class="fa fa-facebook"></i></div>
 <div><i class="fa fa-twitter"></i></div>
 <div><i class="fa fa-instagram"></i></div> 
<!--딩벳폰트 같은 것-->
</body>
</html>

--------------------------------------------------------------------------------------------


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/


아이콘 확인 가능