1. TTF폰트를 받아 변환하기
: 아래 프로그램을 다운받은 후 ttf파일과 같은 폴더에 넣고 드래그하면 됨

- eot변환프로그램: - woff변환프로그램:
@font-face{
 font-family:  seoulNSEB;
 src: url(font/SeoulNamsanEB.eot);/* ie6~8 */
 src: local(※), url(font/SeoulNamsanEB.woff) format('woff');/* ie9, Chrom, safari, opera, firefox */
  }
  body{
 font-family: seoulNSEB;
 }

IE 6~8 브라우저는 EOT 형식만 지원한다.

크롬, 사파리, 파이어폭스, 오페라 브라우저는 WOFF 형식만 지원한다.

IE 9 브라우저는 EOT, WOFF 형식을 모두 지원한다.

2. 외부링크걸기
 <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=폰트명">
    <style>
      body { font-family: '폰트명', serif; }
    </style>

3. 내부스타일
@import url(http://fonts.googleapis.com/css?family=Kavoon);
 <style>
   body { font-family: '폰트명', serif; }
</style>


※ 폰트다운받기
- 모빌리언스
http://api.mobilis.co.kr/webfonts/
http://api.mobilis.co.kr/webfonts/css/?fontface=

- 구글 영문폰트
http://www.google.com/webfonts
http://fonts.googleapis.com/css?family=

이미지를 감싸고 있는 태그에 넓이값을 주고,
이미지에서 %로 넓이값 조절하기

figure{width:100%;}
figure img{width:50%;}
/* 이미지에 넓이 높이 준경우 height:auto; */

- 박스에 그림자 효과주기
box-shadow: 0px 2px 3px rgba(1, 1, 1, .5);
/* box-shadow: x축, y축, blur, 색상 */
box-shadow: 0px 2px 3px rgba(1, 1, 1, .5) inset;
: IE9.0 이상 가능

- 텍스트에 그림자 효과주기
text-shadow: 0px 2px 3px rgba(1, 1, 1, .5);
: IE10 이상 가능

태그
1. mark : 마크
2. figure, figcation :삽화, 사진, 도표 삽입
3. time
<time datetime="2013-01-29T20:35" pubdate>2013년 1월 29일</time>

pubdate
- article안에 작성된 경우 article이 작성된 날짜,
- 밖에 있는 경우 문서가 작성된 날짜

속성
1. background-size 
- px : 이미지사이즈 fix
- % : 배경기준
- cover: content박스기준 full
- contain: 이미지 full 

2. 아이폰 입력창 그림자 지우기, 둥근라인 방지
-webkit-appearance:none;
border-radius:0;

3. box-sizing
- content-box (height+padding+border)
- border-box (height)

4.css가상선택자
-태그 순서안에서 찾기 :nth-child(odd/even/3n)
-같은 태그중에서 찾기 :nth-of-type(odd/even/3n)

5. border-image : repeat,round,stretch
 border-image: url(whitebutton.png) 11 / 11px repeat;
 -webkit-border-image: url(whitebutton.png) 11 / 11px repeat;
 -moz-border-image: url(whitebutton.png) 11 / 11px repeat;
 -o-border-image: url(whitebutton.png) 11  / 11px repeat;

6. text-overflow:ellipsis
- 가로고정 width:;
- block요소 display:block;
- 줄바꿈억제 white-space:nowrap;
- 영역고정 overflow:hidden;

7. target
- id설정
- <a href="파일명.html#id">

미디어쿼리란,
장치 특성에 따라 브라우저가 해석해야 할 CSS 코드를 분기 처리하는 규칙
(보통 해상도 또는 해상력을 판별하여 분기 처리.)

- 기본형식
media only all and (조건문){실행문}
@media all and (조건문){실행문}
@media (조건문){실행문}

공통, 모바일, 테블릿&데스크톱, 테블릿, 데스크톱 순으로 코드를 분리해서 작성
@charset “utf-8″;
/* All Device */
모든 해상도를 위한 공통 코드를 작성한다.
모든 해상도에서 이 코드가 실행됨.

/* Mobile Device */
768px 미만 해상도의 모바일 기기를 위한 코드를 작성한다.
모든 해상도에서 이 코드가 실행됨.
미디어 쿼리를 지원하지 않는 모바일 기기를 위해 미디어 쿼리 구문을 사용하지 않는다.

/* Tablet & Desktop Device */
@media all and (min-width:768px){
사용자 해상도가 768px 이상일 때 이 코드가 실행됨.
테블릿과 데스크톱의 공통 코드를 작성.
}

/* Tablet Device */
@media all and (min-width:768px) and (max-width:1024px){
사용자 해상도가 768px 이상이고 1024px 이하일 때 이 코드가 실행됨.
아이패드 또는 비교적 작은 해상도의 랩탑이나 데스크톱에 대응하는 코드를 작성.
}

/* Desktop Device */
@media all and (min-width:1025px){
사용자 해상도가 1025px 이상일 때 이 코드가 실행됨.
1025px 이상의 랩탑 또는 데스크톱에 대응하는 코드를 작성.
}


----------------------------------------------------------------------------------------------------------
해상도에 따른 이미지 분기
body{background-image:url(img/A.SMALL.IMAGE.jpg)} /* 해상도가 700px 미만이면 작은 이미지를 요청 */
@media screen and (min-width:700px){
body{background-image:url(img/A.BIG.IMAGE.jpg)} /* 해상도가 700px 이상이면 큰 이미지를 요청 */
}

webkit 브라우저만 해석
.helloworld{background:url(helloWorld.210.gif) no-repeat}
@media all and (-webkit-min-device-pixel-ratio:1.5){
.helloworld{background-image:url(helloWorld.420.gif);background-size:contain}
}


:: 출처-naradesign.net