[CSS란?]
CSS 또는 캐스케이딩 스타일 시트(Cascading Style Sheet)는 마크업 언어가 실제로 표시되는 방법을 기술하는 언어로, HTML과 XHTML에 주로 쓰이며,
XML에서도 사용할 수 있음.
CSS는 W3C의 표준이며, 레이아웃과 스타일을 정의할 때의 자유도가 높은 언어임.
CSS는 웹 사이트에서 사용되는 스타일을 지정하기 위한 언어로, 스타일은 웹의 독창적인 개념이 아니라 웹 이전부터 워드프로세스 등에 사용했던 개념임
.
1996년 W3C의 주도하에 첫 번째 CSS 버전인 CSS Level 1이 발표.
1998년에 CSS Level 2가 등장하면서 대부분의 웹 브라우저들이 CSS Level 2를 지원하기 시작
그 후 CSS Level 2의 버그를 수정한 CSS Level 2.1이 2006년에 발표되면서 현재까지 표준으로 사용되고 있음.
CSS Level 3는 CSS Level 2.1과 달리 모든 명세가 포함된 버전이 아닌 모듈 단위로 개발되고 있으며, 표 준화가 모듈 단위로 진행되고 있음. 이 중 몇
몇 모듈은 현재 Recomendation(권고안) 단계에 있으며, Working Draft(초안) 단계에 머물러 있는 모듈도 있음.
[CSS 사용의 의의]
스타일 사용의 중요한 의의는 문서의 구조와 표현을 분리할 수 있다는 점을 들 수 있으며 이는 구조와 표현을 분리함으로써 문서 구조의 수정 없이 스타
일의 변경만으로 다양한 표현을 할 수 있다는 것을 의미함.
웹 문서에 있어 구조와 표현의 분리는 워드프로세서 문서보다 중요할 수 있음. 그 이유 중 하나는 웹 문서가 기계적으로 해석될 수 있는 가능성이 높아
지기 때문임. 기계적으로 해석되는 것은 CSS가 아니라 HTML이지만, 구조와 무관한 표현적 요소를 CSS로 분리함으로써 HTML은 간결해지고 더욱 구조 화
될 수 있기 때문임.
[CSS3 웹 브라우저별 접두사(vendor prefix) ]
CSS3는 표준안이 아직 확정되지 않은 상태이기 때문에 최신 웹 브라우저들은 CSS3 속성을 실험적으로 제공하고 있음. 이를 위해 속성이나 속성 값 앞에
웹 브라우저별로 접두사(vendor prefix)를 제공하고 있으며 이 접두사의 경우 웹 브라우저별로 다르기 때문에 하나의 속성을 선언하기 위해서는 여러
번의 동 일한 선언을 지정해야 함.
파이어폭스 -moz-
크롭, 사파리 -webkit-
오페라 -o-
익스플로러 -ms-
[스타일 시트의 구성요소]
· 선택자(Selector)
- HTML 문서에서 스타일을 정의할 대상을 의미한다.
- 하나 또는 그 이상의 선택자가 지정될 수 있다.
- 선택자의 나열은 “,”로 한다.
· 선언(Declaration)
- 선택자에게 지정한 스타일을 의미한다.
- 속성(Property)과 속성값(Value)으로 구성된다.
- 속성과 속성값은 “:”으로 구분한다.
- 선언은 반드시 “;”으로 끝나야 한다.
1. 전체 선택자(Universal Selector)는 모든 요소를 선택하는 방법으로, "*"를 선택자로 선언.
ex--> *{속성:속성값;}
2. 클래스 선택자
클래스 선택자(Class Selector)는 HTML 요소의 class 속성 값을 참조하여 선택하는 방법.
이때 class 속성 값은 하나의 HTML 요소에 여러 개를 지정할 수 있기 때문에 다중 class를 선택자로 지정할 수도 있음.
3. 아이디 선택자
아이디 선택자(ID Selector)는 HTML 요소의 id 속성 값을 참조하여 선택하는 방법.
이때 id 속성 값은 하나의 HTML 문서에 한 번만 사용할 수 있기 때문에 아이디 선택자를 사용하면 유일한 요소를 선택할 수 있음.
4. 가상 클래스 선택자(Pseudo–classes Selector)
가상 클래스 선택자(Pseudo-classes Selector)는 요소의 상태나 상황에 따라 선택하는 방법으로,
링크의 경우 방문하기 전, 방문한 후, 링크 위에 마우스를 올려놓거나 포커스 시 등의 상황을 선택하여 스타일을 지정할 수 있음.
또한 언어에 따른 구분이나 마크업 구조에 따라 특정 요소를 선택할 수도 있음.
동적 가상 클래스(Dynamic pseudo-classes) –:link, :visited, :active, :hover, :focus
5. 하위 선택자(Descendant Combinator)
하위 선택자(Descendant Combinator) 방식은 선택자와 선택자를 공란으로 선언하며, 선행 선택자의 하위 요소 중 후행 선택자
해당하는 요소를 선택
하는 방법.
6. 자식 선택자(Child Combinator)
자식 선택자(Child Combinators) 방식은 선행 선택자인 부모 요소 하위에 포함된 후행 선택자인 자식 요소를 선택하는 방법.
이때 부모 선택자와 자식 선택자는 ">"로 구분하여 선언.
ex --> #main < div{속성: 속성값;}
7. 형제 선택자(Sibling Combinators)
형제 선택자(Sibling Combinators)는 기본 형제 선택자(General Sibling Combinators)와 인접 형제 선택자(Adjacent Sibling Co
bnators)로 구분할 수 있음.
이때 기본 형제 선택자는 선행 선택자와 후행 선택자를 "+"로 구분하여 선언하고, 인접 형제 선택자는 "~"로 구분하여 선언.
ex --> 선택자 + 선택자{속성:속성값;}
선택자 ~ 선택자{속성:속성값;}
8. 선택자 그룹화
앞에서 살펴본 모든 선택자는 콤마(,)를 사용하여 그룹으로 한 번에 선언할 수 있음.
선택자를 그룹으로 선언할 경우, 선언된 모든 선택자에는 동일한 선언이 적용됨.
ex --> 선택자, 선택자{속성:속성값;}
[스타일 시트 선언방법]
1.내부 스타일 시트 : <head>와 </head>사이에 선언
<style type = "text/css" 또는 “text/JavaScript">
<!--
선택자 or 선택자 { 속성:속성값; 속성:속성값; }
-->
</style>
2. 외부 스타일 시트 : 외부의 파일로 작성한 후 <LINK> 또는 @import 명령을 이용하여 선언하는 방법
<LINK>를 이용하여 연결
- 형식 : <LINK rel = "stylesheet" type = "text/css" href = "파일명“>
@import를 이용하여 연결
- 형식
<style type = "text/css" or "text/JavaScript">
<!--
@import url("파일명“);
-->
</style>
3. 인라인 스타일 시트 : 일반 html 태그에 스타일을 직접 지정하는 방법
- <태그 style = "속성:속성값; 속성:속성값“> 문장 </태그>
- 단, <head>와 <title>에서는 사용할 수 없다.
[스타일 시트에서 사용하는 단위]
- 절대적 단위 : in, cm, mm, pt, px
- 상대적 단위 : em,ex
[ Font 관련 스타일]
- font "값들만“ : 대표속성
- font-family : 글꼴, 글꼴 이름은 쉼표(,)로 구분, 글꼴 이름이 두 단어 이상이면 큰 따옴표로 묶는다. 브라우저는 앞에 있는 글꼴 부터 보여준다.
- font-style "normal, italic, oblique" : 기울임꼴을 적용
- font-variant "normal, small-caps" :
small-caps 크기가 작은 대문자
- font-weight "normal, bold, 100~900" : 글자 굵기
normal=400, bold=700, 숫자는 인식 못하는 경우 있음
- font-size "숫자em(상위 element 크기에 배수), 숫자pt" : 글자 크기 유전되지 않음
[Text 관련 스타일]
- line-height "normal, 숫자, 숫자em, %“ : 줄간격
- text-indent "숫자em, 퍼센트, 숫자“ : 들여쓰기, 음수사용시 내어쓰기
- text-align "left, right, center, justify" : 텍스트나 이미지 수평정렬
- text-decoration “none, underline, overline, line-through" : 줄 긋기 유전되지 않음
- letter-spacing "normal, 숫자em, 숫자“ : 글자 간격
- text-transform "capitalize, uppercase, lowercase, none" : 영문자 변환 첫글자만 대문자 소문자
․ vertical-align "baseline, sup, sub, middle, text-top, - top, text-bottom, bottom" :텍스트나 이미지 수직정렬
[색상과 배경에 관련된 스타일]
- color "영문자, RGB“ : 글자 및 밑줄 색
- background-color "영문자, RGB, transparent" : 배경색
- background-image "none, url(파일위치)“ : 배경 그림
- background-repeat "repeat, repeat-x, repeat-y, no-repeat" : 배경이미지 반복 여부
- background-attachment "scroll, fixed" : 화면이 스크롤 될 때 이동여부
- background-position "top, bottom, left, center, right, 가로% 세로%“ : 이미지 반복 여부 가로p 세로p(음수 사용됨)
[RGBA 형식 및 HSLA 형식의 사용 예]
http://www.colorpicker.com/
RGBA형식 --> color:rgba(255, 127, 45, 0.5)
color:rgba(red, greeen, blue, 투명도)
http://www.workwithcolor.com/hsl-color-picker-01.htm
HSLA형식 --> color:hsla(0, 0%, 100%, 0.5)
color:hsla(색상, 채도, 명도, 투명도)
인라인레벨요소
img, a, span, strong
주로 내용부분 즉 화면에 표시한 콘텐츠들
한줄에 여러개가 정렬.
자신만 크기를 인식하여 표시함
width, height를 적용하여 사용할 수 없다.
블록레벨요소
div, p, ul, li, h1~h6........
기본적으로 세로정렬
한줄에는 하나차지합니다 즉 가로폭을 자신이 100%인식함
width, height를 적용하여 사용합니다
display: 화면 보여주는 방식
display:none; 화면에서 숨김.
display:block; 블록레벨요소로 만듬.
(화면에 보여줌)
display:inline; 인라인레벨로 만듬
display:inline-block; 인라인레벨이면서 가로값과 세로값이 적용됨.
visibility:화면에 보이거나 숨기거나 함.
visibility:hidden; 화면에서 숨김
visibility:visible; 화면에서 보여줌
position:요소(태그)를 내가 원하는 위치에 배치
top, right, bottom, left(기본으로 top, left를 사용)
*******position들을 특정한 영역을 기준으로할때는
특정영역의 선택자에게 position:relative; 함
position:absolute; 절대값으로 원하는 위치에 배치
position:relative; 상대적(다른요소에 영향을 받음)으로 원하는 위치에 배치
position:fixed; 원하는 위치에 고정하여 배치
position:static; 문서의 흐름에 맞춰서 배치
float:배치
float:left;요소를 왼쪽 배치
float:right;요소를 오른쪽 배치
*****웹페이지를 가운데 정렬은 margin: 0 auto;
clear: float배치설정을 무시하고 새롭게 배치를 하는 속성
clear:left;
clear:right;
margin: 요소의 테두를 기준으로 바깥쪽 여백
margin: 0 0; 마진의 세로값 가로값
margin:0 0 0; 위 좌우 아래
margin: 0 0 0 0; top right bottom left
margin-top, margin-right, margin-bottom, margin-left 하나하나 마진을 적용할때
*****두개요소의 마진값이 중복이 될때 큰값이 적용됨.
padding:요소의 테두를 기준으로 안쪽 여백
padding: 0 0; 패딩의 세로값 가로값
padding:0 0 0; 위 좌우 아래
padding: 0 0 0 0; top right bottom left
padding-top, padding-right, padding-bottom, padding-left 하나하나 패딩을 적용할때
*****패딩은 안쪽 여백이므로 값이 요소의 가로값, 세로값에서 벗어나면 요소가 크기가 변화됨
background: 배경색이 들어갈수도 있고 배경 이미지가 들어갈수도 있음
하나의 요소에는 한번이상 사용불가. 사용했다면 마지막에 적용한 background값이 적용됨
background-image와 background-colord의 복합형.
(background:#000; background:url(img/coforwardQr2.png) no-repeat 0 0;)
background-image:url(img/coforwardQr2.png);
background-repeat:no-repeat;
background-position:0 0;(단위가 100px 100px;/ 100% 100%/ 가로(left,center, right) 세로(top, center, bottom)
->복합형 background:url(img/coforwardQr2.png) no-repeat 0 0;
:css3에서는 백그라운드 이미지를 여러개를 사용할수 있게 되었음
ex -->
<style type="text/css">
#exampleSub{
height:200px;
border:1px solid #ccc;
text-align:center;
background:url(img/coforwardQr2.png);
background:
url(img/checkBox1.png) left top no-repeat,
url(img/checkbox2.png) right top no-repeat,
url(img/checkbox3.png) left bottom no-repeat,
url(img/checkbox4.png) right bottom no-repeat,
url(img/checkbox5.png) center center no-repeat,
url(img/coforwardText.png);
}
</style>
<div id="exampleSub">
<span class="exampleDesc">background-image example</span>
</div>
background-clip : [keyword]
;백 그라운 이미지 표시 영역을 지정함.
keyword : •padding-box : padding영역부터 까지 배경 이미지를 표시함 (기본값)
•border-box : border영역까지 배경 이미지를 표시함
ex -->
<style type="text/css">
#exampleSub div{
margin:0 auto;
margin-bottom:15px;
width:70%;
height:80px;
padding:20px;
border:rgba(0,255,0,0.5) solid 20px;
}
#border-box{
background:url(img/photo3.gif);
background-clip:border-box;
-webkit-background-clip:border-box;
-moz-background-clip:border-box;
}
#padding-box{
background:url(img/photo3.gif);
background-clip:padding-box;
-webkit-background-clip:padding-box;
-moz-background-clip:padding-box;
}
</style>
<div id="exampleSub">
<div id="padding-box">
<span class="exampleDesc">padding-box</span>
</div>
<div id="border-box">
<span class="exampleDesc">border-box</span>
</div>
</div>
background-origin : [keyword]
;백 그라운 이미지 원점을 지정함.
keyword : •padding-box : padding영역부터 이미지를 배치함 (기본값)
•border-box : border영역부터 이미지를 배치함
•content-box : content영역부터 이미지를 배치함
ex -->
<style type="text/css">
#exampleSub div{
margin:10px; width:110px; height:80px;
padding:20px; border:rgba(0,255,0,0.5) solid 20px;
float:left;
}
#border-box{
background:#999 url(img/photo3.gif) no-repeat;
background-origin:border-box;
-webkit-background-origin:border-box;
-moz-background-origin:border-box;
}
#padding-box{
background:#999 url(img/photo3.gif) no-repeat;
background-origin:padding-box;
-webkit-background-origin:padding-box;
-moz-background-origin:padding-box;
}
#content-box{
background:#999 url(img/photo3.gif) no-repeat;
background-origin:content-box;
-webkit-background-origin:content-box;
-moz-background-origin:content-box;
}
</style>
<div id="exampleSub">
<div id="padding-box">
<span class="exampleDesc">padding-box</span>
</div>
<div id="border-box">
<span class="exampleDesc">border-box</span>
</div>
<div id="content-box">
<span class="exampleDesc">content-box</span>
</div>
</div>
background-size : [x], [y]
;백 그라운 이미지의 크기를 지정한다.
[x]% [y]% : 적용되는 요소의 크기에 비례하여 배경 이미지 적용
[x]px [y]px : 절대 크기로 배경 이미지 적용
100%: 배경이미지가 적용된 요소의 크기에 맞춤(크기의 변화가 생기면 배경의사이즈도 변화생김.)
auto: 배경이미지의 원래크기를 그대로 유지
cover : 배경 이미지를 늘여 적용되는 요소 전체에 표시
배경이미지 영역의 사이즈 바뀔때-> 이미지의 가로,세로크기중 작은크기를 기준으로
배경이미지의 사이즈 변화생김
contain : 배경 이미지의 가로 세로 비율을 맞춰 요소에 표시할수 있는 최대 크기로 표시
배경이미지 영역의 사이즈 바뀔때-> 이미지의 가로,세로크기중 큰크기를 기준으로
배경이미지의 사이즈 변화생김
ex -->
<style type="text/css">
#box_rel{ background-size:40% 70%;
-webkit-background-size:40% 70%;
-moz-background-size:40% 70%; }
#box_abs{ background-size:50px 50px;
-webkit-background-size:50px 50px;
-moz-background-size:50px 50px; }
#box_cover{ background-size:cover;
-webkit-background-size:cover;
-moz-background-size:cover; }
#box_contain{ background-size:contain;
-webkit-background-size:contain;
-moz-background-size:contain; }
</style>
<div id="exampleSub">
<div id="box_org">
<span class="exampleDesc">원본 크기</span>
</div>
<div id="box_rel">
<span class="exampleDesc">40% 70%</span>
</div>
<div id="box_abs">
<span class="exampleDesc">50px 50px</span>
</div>
<div id="box_cover">
<span class="exampleDesc">cover</span>
</div>
<div id="box_contain">
<span class="exampleDesc">contain</span>
</div>
</div>
gradient
:gradient를 생성함
http://www.colorzilla.com/gradient-editor/
<style type="text/css">
#exampleSub div{
margin-bottom:30px;
width:100%;
height:65px;
}
#gradientBox01 .ex01{
background:-webkit-gradient(linear, left top, left bottom, from(#f00), to(#fff));
background:-moz-linear-gradient(top,#afbc22, #fff);
}
#gradientBox01 .ex02{
background:#676300;
background:-webkit-gradient(linear, left bottom, right top, from(#00f), to(#fff));
background:-moz-linear-gradient(bottom 45deg, #676300, #fff);
}
#gradientBox02 .ex01{
background:-webkit-gradient(radial, center center, 9, center center, 70, from(#0f0), to(#6caddf));
background:-moz-radial-gradient(circle, #0f0, #6caddf);
}
#gradientBox02 .ex02{
background:#6caddf;
background:-webkit-gradient(radial, 20% 20%, 9, 40% 30%, 70, from(#ffea53), to(#6caddf), color-stop(50%, #00a88f));
background:-moz-radial-gradient(20% 20%, circle, #ffea53, #00a88f, #6caddf);
}
</style>
<div id="gradientBox01">
<h3>gradient linear</h3>
<p class="ex01">Ex01</p>
<p class="ex02">Ex02</p>
</div>
<div id="gradientBox02">
<h3>gradient radial</h3>
<p class="ex01">Ex01</p>
<p class="ex02">Ex02</p>
</div>
<style>
div {
width:500px;
height:300px;
border:1px solid black;
border-radius:10px;
}
.grad{
background:linear-gradient(-45deg, blue, white);
background:-ms-linear-gradient(-45deg, blue, white);
}
.grad01{
background:linear-gradient(to bottom, blue, white);
}
.grad02{
background:linear-gradient(to bottom, #06f, white 30%, #06f);
}
</style>
<div class="grad"></div>
outline요소의 아웃라인을 그림 border와는 별개의 속성이며 border를 설정한는 것과 같이 아래의 속성을 단축하여 사용할 수 있음
outline-style : 아웃라인의 형식
outline-color : 아웃라인의 색상
outline-width : 아웃라인의 두께
outline-offset:[d];
d : 아웃라인을 옵셋시키는 거리로 음수값도 가능함
ex -->
<style type="text/css">
#box_coForward{
background:#d9da55;
border:#999 solid 5px;
outline-style:dashed;
outline-width:5px;
outline-color:#676300;
outline-offset:-20px;
}
#box_html5Css3{
background:#afbc22;
border:#999 solid 5px;
outline:#676300 double 5px;
outline-offset:20px;
}
</style>
<div id="box_coForward">
<p><em class="coforward">co<span>Forward</span></em></p>
</div>
<div id="box_html5Css3">
<p>HTML5 & CSS3</p>
</div>
text-shadow:[dx] [dy] [bulr] [color]
;텍스트에 그림자를 지정
dx : 본체와 그림자의 가로방향 거리
dy : 본체와 그림자의 세로방향 거리
bulr : 그림자의 흐려짐 정도
color : 그림자의 색상
ex -->
<style type="text/css">
#html5Css3Text{
background:#afbc22;
text-shadow:3px 3px 5px #000;
}
#coforwardText{
background:#aaa;
text-shadow:
0 0 4px #ccc,
0 -3px 4px #ff3,
1px -6px 6px #fd3,
-1px -9px 11px #f80,
1px -12px 18px #f20;
}
</style>
<div id="example">
<h2>Example</h2>
<div id="exampleSub">
<div id="html5Css3Text">
<p>HTML5 & CSS3</p>
</div>
<div id="coforwardText">
<p> <em class="coforward">co<span>Forward</span></em></p>
</div>
</div>
</div>
box-shadow:[dx] [dy] [bulr] [spread] [set]
;지정된 요소의 그림자를 설정함
dx : 그림자의 가로방향 위치
dy : 그림자의 세로방향 위치
bulr : 흐려짐 정도
spread : 번짐 정도
set : 그림자의 형태
•outset : 요소 바깥쪽으로 그림자가 떨어짐 (기본값)
•inset : 요소 안쪽으로 그림자가 떨어짐
ex -->
<style type="text/css">
#Box01{
box-shadow:10px 10px 5px 5px gray;
-webkit-box-shadow:10px 10px 5px 5px gray;
-moz-box-shadow:10px 10px 5px 5px gray;
}
#Box02 img{
box-shadow:10px 10px 5px 5px gray inset;
-webkit-box-shadow:10px 10px 5px 5px gray inset;
-moz-box-shadow:10px 10px 5px 5px gray inset;
}
</style>
<div id="Box01">
<h3 class="exampleDesc">outset</h3>
</div>
<div id="Box02">
<h3 class="exampleDesc">inset</h3>
</div>
opacity:[fx]
;요소의 투명도 지정
fx : 요소의 투명도 지정 0 ~ 1 사이 값
ex -->
<style type="text/css">
#opacityBox .coFrowardText{
position:absolute;
top:50px;
left:30px;
opacity:0.5;
}
#opacityBox .html5Css3Text{
width:160px;
position:absolute;
top:10px;
left:150px;
background:url(img/checkBox4.png) repeat;
color:#F00;
opacity:0.3;
}
</style>
<div id="opacityBox">
<p class="coFrowardText"><em class="coforward">co<span>Forward</span></em></p>
<p class="html5Css3Text">HTML5 & CSS3</p>
</div>
border-radius:[length]
;Box Model 외각선의 곡률 지정
length : 곡률의 크기
border-top-left-radius / border-top-right-radius / border-bottom-left/ border-bottom-right으로 개별 지정 가능
ex -->
<style type="text/css">
#borderBox01{
height:30px;
background:#CCC;
border-radius:50px;
-webkit-border-radius:50px;
-moz-border-radius:50px;
}
#borderBox02 .topLeft{
background:#d9da55;
border-top-left-radius:20px;
-webkit-border-top-left-radius:20px;
-moz-border-radius-topleft:20px;
}
#borderBox02 .topRight{
background:#afbc22;
border-top-right-radius:20px;
-webkit-border-top-right-radius:20px;
-moz-border-radius-topright:20px;
}
#borderBox02 .bottomLeft{
background:#8a8d09;
border-bottom-left-radius:20px;
-webkit-border-bottom-left-radius:20px;
-moz-border-radius-bottomleft:20px;
}
#borderBox02 .bottomRight{
background:#676300;
border-bottom-right-radius:20px;
-webkit-border-bottom-right-radius:20px;
-moz-border-radius-bottomright:20px;
}
</style>
border-image:[source] [이미지영역] [표시방법]
;외각선을 이미지로 표시함
source : 외각선에 지정될 이미지 경로
이미지영역 : 외각선으로 사용하기 위한 가로, 세로 방향의 이미지
영역표시방법 : 이미지를 표시하는 방법
•repeat : 이미지를 반복하여 표시함
•round : 이미지를 적절한 크기로 반복하여 표시함
•stretch : 이미지를 늘려서 표시함
<style type="text/css">
#exampleSub div{
margin:0 auto;
margin-bottom:30px;
padding:20px;
width:70%;
height:50px;
text-align:center;
border-width:20px;
}
#borderBox01{
border-image:url(img/checkBox2.png) 40 40 repeat repeat;
-webkit-border-image:url(img/checkBox2.png) 40 40 round repeat;
-moz-border-image:url(img/checkBox2.png) 40 40 round repeat;
}
#borderBox02{
border-image:url(img/checkBox4.png) 40 40 stretch round;
-webkit-border-image:url(img/checkBox4.png) 40 40 stretch stretch;
-moz-border-image:url(img/checkBox4.png) 40 40 stretch stretch;
}
</style>
<div id="exampleSub">
<div>
<h3>사용된 이미지</h3>
<img src="img/borderImg.png" alt="사용된 이미지" />
</div>
<div id="borderBox01"></div>
<div id="borderBox02"></div>
</div>
column:문장을 다단으로 표시함
column-count : 단의 수
column-width : 단의 폭
column-gap : 단과 단 사이의 거리
column-rule : 단과 단 사이의 구분선 지정
-->
<style type="text/css">
#div{
margin-bottom:15px;
width:100%;
border:1px solid #ccc;
padding:10px;}
#textBox02{
column-width:300px;
column-count:2;
column-rule:1px solid #ccc;
column-gap:40px;
-webkit-column-width:180px;
-webkit-column-count:2;
-webkit-column-rule:1px solid #ccc;
-webkit-column-gap:40px;
-moz-column-width:180px;
-moz-column-count:2;
-moz-column-rule:1px solid #ccc;
-moz-column-gap:40px;
}
#textBox03{
column-width:33px;
column-count:3;
column-rule:1px solid #ccc;
column-gap:20px;
-webkit-column-width:33%;
-webkit-column-count:3;
-webkit-column-rule:1px solid #ccc;
-webkit-column-gap:20px;
-moz-column-width:33%;
-moz-column-count:3;
-moz-column-rule:1px solid #ccc;
-moz-column-gap:20px;
}
</style>
<div id="textBox02">
<p>In short, the CSS3 Multi-Column Module is a functionality to flow the content of an element into multiple columns.</p>
<p>The Multi-Column Module is part of the CSS3 specifications proposed by the W3C.</p>
<p>This extension to the CSS Box Model opens a new range of possibilities in terms of web design. Multi-column layouts that are so
pervasive in the print media (think newspapers, magazines) can now become a reality on the web.</p>
</div>
<div id="textBox03">
<p>In short, the CSS3 Multi-Column Module is a functionality to flow the content of an element into multiple columns.</p>
<p>The Multi-Column Module is part of the CSS3 specifications proposed by the W3C.</p>
<p>This extension to the CSS Box Model opens a new range of possibilities in terms of web design. Multi-column layouts that are so
pervasive in the print media (think newspapers, magazines) can now become a reality on the web.</p>
</div>
@font-face{}:서버측 폰트를 사용할 수 있는 font-family를 생성함
ex -->
<style type="text/css">
@font-face{
font-family:nanumFont;
src:url('img/nanum.eot');
src:local('nanumgothicExtraBold'), url('img/nanum.ttf') format('truetype');
}
#textBox .ex01{
font-family:"돋움",dotum;
border:1px solid #ccc;
padding:10px;
}
#textBox .ex02{
font-family:"굴림",gulim;
border:1px solid #ccc;
padding:10px;
}
#textBox .ex03{
font-family:nanumFont,gulim;
border:1px solid #ccc;
padding:10px;
}
</style>
transform:요소의 형태를 변경함
translate([dx],[dy]) : 지정한 크기 만큼 이동 시킴
scale([ds]) : 지정한 배율 만큼 확대함
rotate([deg]) : 지정한 각도만큼 회전 시킴
skew([degx],[degy]) : 지정한 경사로 기울림
->ex
<style type="text/css">
#transform_translate img{
transform:translate(50px, 30px);
-webkit-transform:translate(50px, 30px);
-moz-transform:translate(50px, 30px);
-o-transform:translate(50px, 30px);
}
#transform_scale img{
transform:scale(2);
-webkit-transform:scale(2);
-moz-transform:scale(2);
-o-transform:scale(2);
}
#transform_rotate img{
transform:rotate(45deg);
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-o-transform:rotate(45deg);
}
#transform_skew img{
transform:skew(30deg, 30deg);
-webkit-transform:skew(30deg, 30deg);
-moz-transform:skew(30deg, 30deg);
-o-transform:skew(30deg, 30deg);
}
</style>
transition:[변환속성],[에니메이션 시간];class나 선택상태 변경되어 속성이 변화할 때 상태 변화를 부드럽게 에니메이션함
변환속성 : 변환할 속성 all로 지정되면 모든 속성이 영향받음
에니메이션 시간 : 에니메이션 시간을 지정함
transition-delay: 애니메이션의 지연시간을 지정함
transition-duration : 에니메이션이 실행시간을 지정함
transition-property : 어떤 속성을 변형할지 지정함
transition-timing-function : 에니메이션이 속도 형태를 지정함
linear:시작에서 끝까지 똑같은 속도로 진행
ease:처음에는 천천히 시작하고 점점빨라지다가 마지막엔 천천히 끝남
ease-in:시작은 느리게
ease-out:느리게 끝냄
ease-in-out:느리게 시작하고 느리게 끝냄
cubic-bezier:직접베이직 함수를 정의해서 사용
n에서 사용할 수 있는 값은 0~1사이입니다
->ex
<style type="text/css">
#transitionBox img{
transform:rotate(0deg);
-webkit-transform:rotate(0deg);
-moz-transform:rotate(0deg);
-o-transform:rotate(0deg);
border:#ccc solid 5px;
opacity:0.2;
transition:all 3s;
-webkit-transition:all 3s;
-moz-transition:all 3s;
-o-transition:all 3s;
}
#transitionBox img:hover{
transform:rotate(45deg);
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-o-transform:rotate(45deg);
border:#396 solid 5px;
opacity:1;
transition:all 3s;
-webkit-transition:all 3s;
-moz-transition:all 3s;
-o-transition:all 3s;
}
</style>
위치속성
크기속성
박스속성
테두리속성
색상속성
투명속성
변형속성
animation에니메이션을 지정함
animation-name : 애니메이션 이름을 지정함
animation-delay: 애니메이션의 지연시간을 지정함
animation-direction:애니메이션의 진행방향 지정함
alternate;반대방향으로 진행
normal:원래방향으로 진행
animation-duration : 에니메이션이 실행시간을 지정함
animation-iteration-count : 에니메이션이 반복 회수를 지정함
animation-play-state:애니메이션의 재생상태를 지정함
paused, animation-play-state:paused;
animation-timing-function : 에니메이션이 속도 형태를 지정함
linear:시작에서 끝까지 똑같은 속도로 진행
ease:처음에는 천천히 시작하고 점점빨라지다가 마지막엔 천천히 끝남
ease-in:시작은 느리게
ease-out:느리게 끝냄
ease-in-out:느리게 시작하고 느리게 끝냄
cubic-bezier:직접베이직 함수를 정의해서 사용
n에서 사용할 수 있는 값은 0~1사이입니다
keyframes에니메이션의 키프래임을 지정함
form : 에니메이션의 시작 프래임를 설정함
to : 에니메이션의 시작 프래임를 설정함중간의 키프레임을 %단위로 지정할수 있음
->ex
<style type="text/css">
#exampleSub img{
-webkit-animation-name:animationSample;
-webkit-animation-duration:3s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-timing-function:ease-in-out;
}
@-webkit-keyframes animationSample{
from{
opacity:0.1;
-webkit-transform:rotate(0deg);
}
to{
opacity:1.0;
-webkit-transform:rotate(360deg);
}
}
</style>