[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)는 요소의 상태나 상황에 따라 선택하는 방법으로,링크의 경우 방문하기 전, 방문한 후, 링크 위에 마우스를 올려놓거나 포커스 시 등의 상황을 선택하여 스타일을 지정할 수 있음.또한 언어에 따른 구분이나 마크업 구조에 따라 특정 요소를 선택할 수도 있음.동적 가상 클래스(Dynamic pseudo-classes) –:link, :visited, :active, :hover, :focus
5. 하위 선택자(Descendant Combinator)방식은 선택자와 선택자를 공란으로 선언하며, 선행 선택자의 하위 요소 중 후행 선택자해당하는 요소를 선택하는 방법.
6. 자식 선택자(Child Combinator) 방식은 선행 선택자인 부모 요소 하위에 포함된 후행 선택자인 자식 요소를 선택하는 방법.이때 부모 선택자와 자식 선택자는 ">"로 구분하여 선언.ex --> #main < div{속성: 속성값;}
7. 형제 선택자(Sibling Combinators)는 기본 형제 선택자(General Sibling Combinators)와 인접 형제 선택자(Adjacent Sibling Cobnators)로 구분할 수 있음.이때 기본 형제 선택자는 선행 선택자와 후행 선택자를 "+"로 구분하여 선언하고, 인접 형제 선택자는 "~"로 구분하여 선언.ex --> 선택자 + 선택자{속성:속성값;} 선택자 ~ 선택자{속성:속성값;}
8. 선택자 그룹화앞에서 살펴본 모든 선택자는 콤마(,)를 사용하여 그룹으로 한 번에 선언할 수 있음. 선택자를 그룹으로 선언할 경우, 선언된 모든 선택자에는 동일한 선언이 적용됨.ex --> 선택자, 선택자{속성:속성값;}
[스타일 시트 선언방법]
1.내부 스타일 시트 : <head>와 </head>사이에 선언
</style>
2. 외부 스타일 시트 : 외부의 파일로 작성한 후 <LINK> 또는 @import 명령을 이용하여 선언하는 방법
를 이용하여 연결- 형식 :
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>'HTML,CSS > 정리' 카테고리의 다른 글
| CSS 고급 선택자 (0) | 2021.09.27 |
|---|---|
| 이미지와 그라데이션 효과로 배경 꾸미기 (0) | 2021.09.27 |
| 레이아웃을 구성하는 CSS 박스 모델 (0) | 2021.09.24 |
| 텍스트를 표현하는 다양한 스타일 (0) | 2021.09.17 |
| CSS의 기본 (0) | 2021.09.17 |