출처 : 모던 웹 디자인을 위한 HTML5 + CSS3 입문 요약
1. HTML5 태그 기본
1.1. 글자 태그
1.1.1 제목 태그
- <h1> ~ <h6>
- 일반적으로 웹 페이지를 만들 때는 h1 ~ h3 태그까지 사용.
- 실제 웹 페이지를 제작할 때는 모든 브라우저에서 동일한 화면을 볼 수 있게 폰트를 강제로 지정합니다.
1.1.2 본문 태그
- <p>(paragraph 태그의 줄임말) : 본문 글자 태그
- <br> : 개행 태그
- <hr> : 수평 줄 태그
1.1.3 앵커태그
- <a> : 앵커 태그
ex) <a href="http://www.naver.com">Naver</a>
- 빈 링크
하이퍼링크 끼능을 쪠꺼햬또 우ㅖㅃ 표쭌을 따르려면 a 태그에 href 속성을 반드시 입력해야 합니다.
따라서 웹 표준을 지키면서 이동하지 않는 a태그를 만들 때는 href 속성에 #을 입력합니다.
- 페이지 내부 이동
a 태그를 이용하면 현재 페이지 내부에서 원하는 장소로 이동할 수 있습니다. 이때는 원하는 장소에
id 속성을 부여해야 합니다. id 속성이 중복되면 먼저 나오는 태그로 이동합니다.
ex)<a href="#top">Move to Top</a>
1.1.4 글자형태 태그
- <b> : 굵은 글자 태그
- <i> : 기울어진 글자 태그
- <small> : 작은 글자 태그
- <sub> : 아래에 달라 붙는 글자 태그
- <sup> : 위에 달라 붙는 글자 태그
- <ins> : 밑줄 글자 태그
- <del> : 가운데 줄이 그어진 글자 태그
* 글자를 기울이거나 굵게 만드는 기능은 모두 스타일시트로 처리하므로 현대에는 잘 사용하지 않습니다.
1.1.5 루비 문자 태그
- <ruby> : 루비 문자 선언 태그
- <rt> : 위에 위치하는 작은 문자 태그
- <rp> : ruby 태그를 지원할 경우 출력되지 않는 태그
ex) <ruby>
<span>大韓民國</span>
<rp>(</rp>
<rt>대한민국</rt>
<rp>)</rp>
</ruby>
1.2 목록 태그
1.2.1 기본 목록 태그
- <ul> : 순서가 없는 목록 태그(unordered list)
- <ol> : 순서가 있는 목록 태그(ordered list)
- <li> : 목록 요소(list item)
ex) <ol>
<li>Facebook</li>
<li>Tweeter</li>
</ol>
<ul>
<li>Facebook</li>
<li>Tweeter</li>
</ul>
* 중첩해서 목록을 만들고 싶을 때는 li 태그 안에 목록 태그를 중첩해서 입력하면 됩니다.
1.2.2 정의 목록 태그
- <dl> : 정의 목록 태그(definition list : 정의목록)
- <dt> : 정의 용어 태그(definition term : 정의용어)
- <dd> : 정의 설명 태그(definition description : 정의설명)
ex) <dl>
<dt>HTML5</dt>
<dd>Multimedia Tag</dd>
<dd>Connectivity Tag</dd>
</dl>
1.3 테이블 태그
1.3.1 테이블 태그 기본
- <table> : 테이블 태그
- <tr> : 표 내부의 행 태그(table row)
- <th> : 행 내부의 제목 셀 태그(table header)
- <td> : 행 내부의 일반 셀 태그(table data)
- <caption>
- <colgroup>
- <thead>
- <tbody>
- <tfoot>
ex) <table border="1">
<tr><th>Header1</th><Header2</th></tr>
<tr><td>Data1</td><td>Data1</td></tr>
<tr><td>Data2</td><td>Data2</td></tr>
</table>
1.3.2 테이블 태그 속성
- border : 표의 테두리 두께를 지정
- rowspan : 셀의 너비 지정
- colspan : 셀의 높이 지정
ex) <table border="1">
<tr>
<th colspan="3">Table Data</th>
<th rowspan="3">Table Data</th>
</tr>
<tr>
<td>Table Data</td>
<td rowspan="2">Table Data</td>
<td>Table Data</td>
</tr>
<tr>
<td>Table Data</td>
<td>Table Data</td>
</tr>
</table>
1.4 이미지 태그
- <img>
- 속성
src : 이미지의 경로
alt : 이미지가 없을 때 나오는 글자 지정
width : 이미지의 너비 지정
height : 이미지의 높이 지정
현대에는 스타일시트를 사용해 입력하는 것이 일반적이므로 width, height 잘 사용하지 않습니다.
ex) <img src="image.jpg" alt="이미지" width="300" />
* 이미지 크기는 아는데 아직 이미지가 없을 때 사용할 수 있는 좋은 방법이 있습니다.
http://placehold.it/ 비슷한 사이트로 http://dummyimage.com/
<img src="http://placehold.it/300x200" />
1.5 오디오 태그
- <audio>
- <source>
- 속성
src : 음악 파일의 경로 지정
preload : 음악을 재생하기 전에 모두 불러올지 지정
autoplay : 음악을 자동 재생할지 지정
loop : 음악을 반복할지 지정
controls : 음악 재생 도구를 출력할지 지정
ex) <audio src="Kalimba.mp3" controls="controls" autoplay="autoplay>
<audio controls="controls" autoplay="autoplay>
<source src="Kalimba.mp3" type="audio/mp3" />
<source src="Kalimba.ogg" type="audio/ogg" />
</audio>
* 웹 브라우저마다 지원하는 음악파일이 달라 source 로 여러개의 파일을 제공해서 문제를 해결.
* type 속성을 입력하지 않아도 상관이 없지만 웹브라우저가 음악 파일을 내려 받은 뒤에 재생 가능한
파일인지 확인하므로 트래픽이 낭비됩니다. type 속성을 꼭 지정해줍시다.
1.6 비디오 태그
- <video>
- <source>
- <track>
- 속성
src : 비디오 파일의 경로 지정
poster : 비디오 준비 중일 때ㅢ 이미지 파일 경로 지정
preload : 비디오를 재생하기 전에 모두 불러올지 지정
autoplay : 비디오를 자동 재생할지 지정
loop : 비디오를 반복할지 지정
controls : 비디오 재생 도구를 출력할지 지정
width : 비디오의 너비를 지정
height : 비디오의 높이를 지정
ex) <video poster="http://placehold.it/640ㅌ360"
width="640" height="360" controls="controls">
<source src="Wildlife.mp4" type="video/mp4" />
<source src="Wildlife.webm" type="video/webm" />
<track kind="subtitles" src="track.srt" srclang="ko" label="Korean" />
<track kind="subtitles" src="track.srt" srclang="en" label="English" />
</video>
* video.js 플러그인
<head>
<link href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/c/video.js"></script>
</head>
<body>
<video controls="controls" width="640" height="360"
class="video-js vjs-default-skin" data-setup="{}">
<source src="Wildlife.mp4" type="video/mp4" />
<source src="Wildlife.webm" type="video/webm" />
</video>
</body>
1.7 입력양식 태그
- <form>
- 속성
action : 입력 데이터의 전달 위치를 지정합니다.
method : 입력 데이터의 전달 방식을 선택합니다.
1.7.1 기본 input 태그
- <input>
- 속성
button : 버튼을 생성합니다.
checkbox : 체크박스를 생성합니다.
file : 파일 입력 양식을 생성합니다.
hidden : 보이지 않습니다.
image : 이미지 형태를 생성합니다.
password : 비밀번호 입력양식을 생성합니다.
radio : 라디오 버튼을 생성합니다.
reset : 초기화 버튼을 생성합니다.
submit : 제출 버튼을 생성합니다.
text : 글자 입력 양식을 생성합니다.
label : input 태그를 설명하는데 사용합니다.
* label 태그는 어떠한 input 태그를 설명하고 있는지 표시해 줘야 합니다. input 태그에 id
속성을 입력하고 label 태그에 for 속성을 입력합니다.
ex) <form method="post" action="http://localhost:8080/sample/index.jsp">
<label for="sample">이름</label>
<input id="sample" type="text" name="name1" />
</form>
label 태그를 클릭하면 input 태그에 초점이 맞추어 집니다.
input 태그가 체크박스나 라디오 버튼일 경우 label 태그를 선택하면 input 태그가 체크됩니다.
1.7.2 HTML5 입력 양식 태그
- <color> : 색상 선택 양식을 생성합니다.
- <date> : 일 선택 양식을 생성합니다.
- <datetime> : 날짜 선택 양식을 생성합니다.
- <datetime-local> : 지역 날짜 선택 양식을 생성합니다.
- <email> : 이메일 입력 양식을 생성합니다.
- <month> : 월 선택 양식을 생성합니다.
- <number> : 숫자 생성 양식을 생성합니다.
- <range> : 범위 선택 양식을 생성합니다.
- <search> : 검색어 입력 양식을 생성합니다.
- <tel> : 전화번호 입력 양식을 생성합니다.
- <time> : 시간 선택 양식을 생성합니다.
- <url> : URL 주소 입력 양식을 생성합니다.
- <week> : 주 선택 양식을 생성합니다.
1.7.3 textarea 태그
- <textarea>
- 속성
cols : 태그의 너비를 지정합니다.
rows : 태그의 높이를 지정합니다.
1.7.4 select 태그
- <select> : 선택 양식을 생성합니다.
- <optgroup> : 옵션을 그룹화 합니다.
- <option> : 옵션을 생성합니다.
1.7.5 fieldset 태그와 legend 태그
입력양식을 설명하는 태그, legend 는 fieldset 태그 안에만 사용할 수 있습니다.
- <fieldset>
- <legend>
1.8 공간 분할 태그
1.8.1 div, span 태그
- <div> : block 형식으로 공간을 분할합니다.
- <span> : inline 형식으로 공간을 분할합니다.
- block 형태의 태그 : div, h1 ~ h6, p, 목록 태그, 테이블 태그, form
- inline 형태의 태그 : span, a, input, 글자 형식 태그
1.8.2 HTML5 시멘틱 구조 태그
- <header> : 헤더를 의미
- <nav> : 내비게이션을 의미
- <aside> : 사이드에 위치하는 공간을 의미
- <section> : 여러 중심 내용을 감싸는 공간을 의미
- <article> : 글자가 많이 들어가는 부분을 의미
- <footer> : 푸터를 의미
ex) <header><h1>HTML5</h1></header>
<nav>
<ul>
<li><a href="#"> Menu - 1</a><li>
<li><a href="#"> Menu - 2</a><li>
</ul>
</nav>
<section>
<article>
<h1>Lorem ipsum dolor</h1>
<p>Lorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolorLorem ipsum dolor</p>
</article>
</section>
<footer>
<address>서울시 강남구 역삼동</address>
</footer>
2. CSS3 선택자 기본
- h1 { color: red; }
선택자 스타일속성 스타일값
style 태그 내부에 입력해 사용합니다.
- * : 전체선택자
HTML 페이지 내부의 모든 태그를 선택 합니다.
전체 선택자를 사용하면 html 태그를 폼함해 head 태그 title태그, style 태그까지 선택합니다.
ex) * { color: red; }
- 태그 : 특정한 태그를 선택합니다.
여러 개의 선택자를 한꺼번에 선택해서 스타일 속성을 적용할 때는 쉼표를 사용합니다.(모든 선택자에 적용이 가능함)
ex) h1, h2, p { color: blue;}
- #아이디 : 아이디 속성을 가지고 있는 태그를 선택 합니다.
ex) #header { color: red; }
- .클래스 : 특정한 클래스를 가지고 있는 태그를 선택 합니다.
ex) .select { color: red; }
ex) li.select { color: blue; } li 태그 중 class 속성으로 select를 가지는 태그의 속성을 변경
- 선택자[속성] : 특정한 속성이 있는 태그를 선택합니다.
- 선택자[속성=값][속성=값] : 특정한 속성 안의 값이 특정 값과 같은 문서 객체를 선택합니다.
ex) input[type=text] { background: red; }
input태그 중에서 type속성을 text로 같는 태그의 background 속성에 red 키워드를 적용
* 속성 선택자는 type 속성을 정확히 text로 입력한 태그만 인정합니다.
ex) <input /> <input type="text" />
- 선택자 표 정리
3. CSS3 스타일 기본 속성
3.1. 단위
- %(퍼센트) : 백분율, 기본 설정된 크기에서 상대적으로 크기를 지정합니다.
- em : 배수를 나타내는 단위, 1배=1em=100%
- px : 픽셀 단위
* 보통 폰트에서는 전체 기본 폰트 크기에 절대 크기를 지정하고 각각의 태그에 상태 크기를 지정하는 방법은 굉장히 많이 사용합니다.
ex) * { font-size: 12px; }
h1 { font-size: 3.0em; }
h2 { font-size: 150%; }
- #000000 : Hex 코드 단위
- rgb(red, green, blue) : RGB 색상 단위
- rgba(red, green, blue, alpha) : RGBA 색상 단위
ex) h1 { background-color: #0094ff; }
* http://www.colorpicker.com/
- hsl { hue, saturation, lightness) : HSL 색상단위(색상,채도,명도)
- hsla { hue, saturation, lightness, alpha) HSLA 색상단위
* http://www.workwithcolor.com/
- url : 파일이나 폰트 파일을 불러올 때 URL 단위를 사용
ex) background-image: url('Desert.jpg'); -> 현재 폴더의 Desert.jpg
background-image: url('Other/Desert.jpg'); -> 현재 폴더의 내부의 Other 폴더의 Desert.jpg
background-image: url('/Desert.jpg'); -> 루트 폴더의 Desert.jpg
3.2 가시 속성
- display: block; : none, block, inline, inline-block
inline 키워드를 적용하면 width, height 속성이 지정되지 않습니다.
inline-block 키워드를 지정하면 width, height 속성을 지정할 수 있습니다. margin 속성도 적용이 가능합니다.
- visibility: visible : visible, hidden, collapse
display 속성을 사용하면 태그가 화면에서 제거되지만 visibility
속성을 사용하면 화면에서 보이지 않을 뿐입니다. 영역은 차지합니다.
- opacity: 0.2; : 0.0 ~ 1.0 투명도 처리
3.3 박스 속성
- width, height, margin, padding : box 속성
박스속성 크기는 width + 2 x (margin + border + padding), height 동일
- box-sizing: content-box; : content-box 는 width, height가 컨텐츠 크기만 포함, border-box 값은 선(테두리)까지 포함해서 크기를 결정
content-box : width + 2 * (margin + border + padding)
border-box : width + 2 * margin
ex)
<head>
<style>
div { margin: 10px; padding: 10px; width: 100px; height: 100px; border: 10px solid black; }
#content { background: red; box-sizing: content-box; }
#border {background: orange; box-sizing: border-box; }
</style>
</head>
<body>
<div id="content"></div>
<div id="border"></div>
</body>
3.4 테두리 속성
- border-width, border-style, border-color, border-radius(CSS3 에 추가, border-radius: 10px(왼쪽위) 10px(오른쪽위) 10px(오른쪽아래) 10px;(왼쪽아래))
3.5 배경 속성
- background-image: url('path.ext'); : css3 부터 여러 개의 배경 이미지를 적용할 수 있음.(background-image: url('path1.ext'), url('path2.ext2');
- background-size:auto; : auto, contain(=너비100%), cover(=높이100%), 100%...
background-size:100% 100% -> width, height 설정
background-size:100%, 200% -> 쉼표는 두개의 이미지를 서로 다른 크기로 설정
- background-repeat: no-repeat; : repeat, repeat-x, repeat-y...
- background-attachment: fixed; : scrolㅣl... 배경 이미지 고정, 화면 스크롤 시 배경이미지는 고정되어 있음.
- background-position: bottom; : center, left, right, top,
속성에 x, y 를 줄수 있음(0px, 50%)
- 한줄로 입력하는 방법도 있지만 너무 복잡하여 따로 쓰는 것이 더 보기 좋음.
3.6 폰트 속성
- font-size: 32px; : 폰트 크기를 설정
- font-family: Arial, 'Times new Roman', sans-serif; : 제일 마지막에는 serif, sans-serif, mono space 등(generic-family 폰트: 웹브라우저에 설정된 고유의 폰트)을 입력한다.
- font-style: italic; : 글자 스타일
- font-weight: bold; : 글자 굵기
- line-height: 70px; : 글자 높이
- text-decoration: none; : 글자를 꾸밈.
- text-align: center; : 글자 정렬, 글자가 수평으로는 중앙 정렬이 되지만 수직으로는 중앙 정렬되지 않음.(start, end, left, right, center, ...)
inline 태그에 정렬을 지정해도 정렬이 되지 않는다. inline 태그는 너비가 존재하지 않으므로...
글자를 수직정렬 하기 위해서는 박스의 높이와 같은 크기의 line-height 속성을 적용하면 된다.
<style>
.button {
width: 150px;
height: 70px;
border: 10px solid #ffffff;
background-color: #ff6a00;
border-radius: 30px;
box-shadow: 5px 5px 5px #a9a9a9;
text-align : center;
font-size: 2em;
}
.button > a {
display: block;
line-height: 70px;
}
</style>
<body>
<div class="button">
<a href="#">Click</a>
</div>
</body>
3.7 위치 속성
- position: absloute; : static, relative, fixed 등으로 위치를 설정 할 수 있다.
static : 태그가 위에서 아래로, 왼쪽에서 오른쪽으로 순서대로 배치됩니다. direction 속성을 사용해 오른쪽에서 왼쪽으로 변경할 수 있습니다.
relative : 초기 위치 상태에서 상하좌우로 위치를 이동합니다.
absolute : 절대적 위치 좌표를 설정합니다.
fixed : 화면을 기준으로 절대적 위치 좌표를 설정합니다.
position 속성에 absolute 키워드를 적용하면 부모 태그가 영역을 차지하지 않습니다. 따라서 아래와 같이 처리 해야 함
1. 자손에게 position 속성을 absolute 키워드로 적용하면 부모에게 height 속성을 입력한다.
2. 자손의 position 속성을 absolute 키워드로 적용하면 부모의 position 속성을 relative 키워드로 적용한다.
- z-index: 10; : 숫자가 클수록 앞으로 나옴
- overflow: scroll; : 내부의 요소가 부모의 범위를 벗어날 때 어떻게 처리할지 지정하는 속성, hidden, overflow-x, overflow-y
<head><style>
.box {
width: 100px;
height: 100px;
position: absolute;
}
.box:nth-child(1) {
background-color: red;
left: 10px;
top: 10px;
}
.box:nth-child(2) {
background-color: green;
left: 50px;
top: 50px;
}
.box:nth-child(3) {
background-color: blue;
left: 90px;
top: 90px;
}
</style></head>
<body>
<h1>위치(position) 예제</h1>
<div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<h1>위치(position) 예제</h1>
</body>
위와 같을 경우
1. h1 태그 두개가 붙어있음(div 태그가 영역을 차지하지 않음)
2. 색상이 적용된 상자가 자신의 부모를 기준으로 위치를 잡지 않음.
3.8 float 속성
- float: left; : 부유하는 대상을 만들 때 사용하는 스타일 속성
자손에 float 속성을 적용하면 부모의 overflow 속성에 hidden 키워드를 적용한다.
clear 스타일 속성에 both 키워드를 적용해도 마찬가지 기능을 수행할 수 있지만 현대에는 overflow 스타일 속성을 많이 사용 함.
3.9 22그림자 속성
- text-shadow: 5px 5px 5px black; : 글자에 그림자를 부여하는 스타일 속성(오른쪽 아래 흐림도 색상)
- box-shadow: 5px 5px 5px black; : 박스에 그림자를 부여하는 속성(오른쪽 아래 흐림도 색상)
* http://css3generator.com
3.10 그레디언트
- 2가지 이상의 색상을 혼합한 색을 만들어 채색하는 기능입니다.
- 선형그레이디언트
linear-gradient(45deg, #f85032 0%, #e73827 100%) : 각도, 색상 위치, 색상 위치
* http://www.colorzilla.com/gradient-editor/
4. 웹페이지 레이아웃
4.1 레이아웃 구분
웹페이지 레이아웃 공간 분할 방법
1) 웹페이지를 구상합니다.
2) 웹 페이지의 구성 영역을 분리 합니다.
3) 구성 영역을 행 단위로 분리 합니다.
4) 나누어진 행의 내부 요소를 분리합니다.
- 모든 HTML 페이지의 첫 번째 스타일시트는 초기화 코드로 시작합니다.
Eric Meyer's Reset CSS : http://meyerweb.com/eric/tools/css/reset/
HTML5 Doctor CSS Reset : http://html5doctor.com/html-5-reset-stylesheet/
YUI 3 Reset CSS : http://developer.yahoo.com/yui/3/cssreset/
5. CSS3 변형과 애니메이션
5.1. 변형속성 기본(transition)
- CSS3 변형 속성은 아래의 스타일 속성과 함께 적용 할 수 있습니다.
위치속성: top, left, bottom, right
크기속성: width, height
박스속성: margin, padding
테두리속성: border-width, border-radius, border-color
색상속성: color, background-color
투명도속성: opacity
변환속성: transform
- transition : 모든 속성을 한 번에 적용
- transition-delay : 이벤트 발생 후 몇 초 후에 재생할지 지정
- transition-duration: 몇 초 동안 재생할지 지정
- transition-property : 어떤 속성을 변형할지 지정
- transition-timing-function : 수치 변형 함수 지정
ease, linear, ease-in, ease-out, ease-in-out
맘에드는 형태가 없으면 cubic-bezier() 함수를 사용
* http://cubic-bezier.com
<style>
#graph {
width: 610px;
border: 3px solid black;
}
.bar {
width: 10px; height: 50px; background-color: orange; margin: 5px;
transition-property: background-color, width;
transition-duration: 1s, 5s;
/* property duration function delay 순서로 입력
transition: background-color 1s ease, width, 5s linear 1s;
*/
}
#graph:hover > .bar { width: 600px; }
.bar:nth-child(1) { transition-timing-function: linear; transition-delay: 0s;}
.bar:nth-child(2) { transition-timing-function: ease; transition-delay: 1s;}
.bar:nth-child(3) { transition-timing-function: ease-in; transition-delay: 2s; }
.bar:nth-child(4) { transition-timing-function: ease-in-out; transition-delay: 3s; }
.bar:nth-child(5) { transition-timing-function: ease-out; transition-delay: 4s; }
.bar:nth-child(6) { transition-timing-function: cubic-bezier(.54, .31, .01, .94); transition-delay: 5s;}
#graph:hover > .bar:nth-child(1) {background-color: red; width: 100px;}
#graph:hover > .bar:nth-child(2) {background-color: blue; width: 300px;}
#graph:hover > .bar:nth-child(3) {background-color: green; width: 400px;}
#graph:hover > .bar:nth-child(4) {background-color: yellow; width: 200px;}
#graph:hover > .bar:nth-child(5) {background-color: pink; width: 400px; }
#graph:hover > .bar:nth-child(6) {background-color: gray; width: 500px; }
</style>
<body>
<div id="graph">
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
</div></body>
5.2. 키 프레임과 애니메이션 속성
- animation: 모든 animation 속성을 한 번에 적용합니다.
- animation-delay : 이벤트 발생 후 몇 초 후에 재생할지 지정합니다.
- animation-direction: 애니메이션 방향을 설정 합니다.
alternate : from에서 to로 이동 후 to에서 from으로 이동을 반복
normal : 계속 from에서 to로 이동
- animation-duration: 애니메이션을 몇 초 동안 재생할지 지정합니다.
- animation-iteration-count: 애니메이션 반복 횟수를 지정합니다.
- animation-name: 애니메이션 이름을 지정합니다.
- animation-play-state: 애니메이션 재생 상태를 지정합니다.
- animation-timing-function: 수치 변형 함수를 지정합니다.
* 애니메이션 속성은 반드시 animation-name 속성과 animation-duration 속성을 지정해야 합니다.
<style>
#box {
position: absolute; width: 200px; height: 200px; border-radius: 100px; text-align: center;
animation-name: rint;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: linear;
background: #b8e1fc; /* Old browsers */
background: -moz-linear-gradient(top, #b8e1fc 0%, #a9d2f3 10%, #90bae4 25%, #90bcea 37%, #90bff0 50%, #6ba8e5 51%, #a2daf5 83%, #bdf3fd 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b8e1fc), color-stop(10%,#a9d2f3), color-stop(25%,#90bae4), color-stop(37%,#90bcea), color-stop(50%,#90bff0), color-stop(51%,#6ba8e5), color-stop(83%,#a2daf5), color-stop(100%,#bdf3fd)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #b8e1fc 0%,#a9d2f3 10%,#90bae4 25%,#90bcea 37%,#90bff0 50%,#6ba8e5 51%,#a2daf5 83%,#bdf3fd 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #b8e1fc 0%,#a9d2f3 10%,#90bae4 25%,#90bcea 37%,#90bff0 50%,#6ba8e5 51%,#a2daf5 83%,#bdf3fd 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #b8e1fc 0%,#a9d2f3 10%,#90bae4 25%,#90bcea 37%,#90bff0 50%,#6ba8e5 51%,#a2daf5 83%,#bdf3fd 100%); /* IE10+ */
background: linear-gradient(to bottom, #b8e1fc 0%,#a9d2f3 10%,#90bae4 25%,#90bcea 37%,#90bff0 50%,#6ba8e5 51%,#a2daf5 83%,#bdf3fd 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b8e1fc', endColorstr='#bdf3fd',GradientType=0 ); /* IE6-9 */
}
#box > h1 { line-height: 200px; }
@keyframes rint {
from { left: 0; transform: rotate(0deg); }
50% { left: 500px; }
to { left: 500px; transform: rotate(360deg); }
}
</style>
<body><div id="box"><h1>Rotation</h1></div>
6. CSS3 변환
6.1 2차원 변환
6.1.1 transform 속성
- translate(translateX, translateY) : 특정한 크기만큼 이동합니다.
- translateX(translateX) : x축으로 특정한 크기만큼 이동합니다.
- translateY(translateY) : Y축으로 특정한 크기만큼 이동합니다.
- scale(scaleX, scaleY) : 특정한 크기만큼 확대 축소를 합니다.
- scaleX(ScaleX) : X축으로 특정한 크기만큼 확대 및 축소합니다.
- scaleY(scaleY) : Y축으로 특정한 크기만큼 확대 및 축소합니다.
- skew(angleX, angleY) : 특정한 각도만큼 기울입니다.
- skewX(angleX) : X축으로 특정한 각도만큼 기울입니다.
- skewY(angleY) : Y 축으로 특정한 각도만큼 기울입니다.
- roate(angleZ) : 특정한 각도만큼 회전합니다.
* transform 속성에 변환 함수를 입력하는 순서에 따라 실행결과가 바뀔 수 있습니다.
transform 속성에 입력한 변환 함수는 앞쪽부터 차례대로 적용이 됩니다.
ex) transform: rotate(60deg) scale(1.2) skewY(10deg);
<style>
section {
width: 100px; height: 100px;
border:5px solid black;
}
div {
width: 100px; height: 100px;
background: red;
transform: rotate(60deg);
}
</style>
<body>
<section>
<div></div>
</section>
</body>
6.1.2 transform-origin 속성
- 변환 중심을 설정하는 스타일 속성입니다.
ex) transform: rotate(30deg);
transform-origin: 100% 100%;
6.2.1 3차원 변환 함수
- translate3d(translateX, translateY, translateZ) : 특정한 크기만큼 이동합니다.
- translateX(translateX) : X축으로 특정한 크기만큼 이동합니다.
- translateY(translateY) : Y축으로 특정한 크기만큼 이동합니다.
- translateZ(translateZ) : Z축으로 특정한 크기만큼 이동합니다.
- sclae3d(scaleX, scaleY, scaleZ) : 특정한 크기만큼 확대 축소 합니다.
- scaleX(scaleX) : x축으로 특정한 크기만큼 확대 및 축소 합니다.
- scaleY(scaleY) : y 축으로 특정한 크기만큼 확대 및 축소 합니다.
- scaleZ(scaleZ) : z 축으로 특정한 크기만큼 확대 및 축소 합니다.
- rotate3d(angleX, angleY, angleZ) : 특정한 각도만큼 회전합니다.
- roateX(angleX) : x 추으로 특정한 각도만큼 회전합니다.
- roateY(angleY) : y 축으로 특정한 각도만큼 회전합니다.
- roate(angleZ) : z 축으로 특정한 각도만큼 회전합니다.
6.2.2 transform-style 속성
- flat : 후손의 3차원 속성을 무시합니다.
- preserve-3d : 후손의 3차원 속성을 유지합니다.
6.2.3. backface-visibility 속성
- visible : 후면을 보이게 만듭니다.
- hidden : 후면을 보이지 않게 만듭니다.
* 참조 : http://www.westciv.com/tools/3Dtransforms/index.html
<style>
body {
width: 200px;
margin: 200px auto;
}
section {
width: 200px;
height: 200px;
position: relative;
animation: rint 3s linear 0s infinite;
transform-style: preserve-3d;
}
@keyframes rint {
from {
transform: rotateX( 0deg) rotateY( 0deg) rotateZ(0deg);
}
to {
transform: rotateX( 360deg) rotateY( 360deg) rotateZ(360deg);
}
}
div {
width: 200px;
height: 200px;
position: absolute;
left: 0;
top: 0;
/*backface-visibility: hidden;*/
opacity: 0.3;
}
div:nth-child(1) {
transform: rotateY( 0deg) translate3d(0px, 0px, 100px);
background: red;
}
div:nth-child(2) {
transform: rotateY( 90deg) translate3d(0px, 0px, 100px);
background: green;
}
div:nth-child(3) {
transform: rotateY( 180deg) translate3d(0px, 0px, 100px);
background: blue;
}
div:nth-child(4) {
transform: rotateY( 270deg) translate3d(0px, 0px, 100px);
background: yellow;
}
div:nth-child(5) {
transform: rotateY( 90deg) translate3d(0px, 0px, 100px);
background: brown;
}
div:nth-child(6) {
transform: rotateY( 270deg) translate3d(0px, 0px, 100px);
background: pink;
}
</style>
<body>
<section>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</section>
</body>
ex) 정육면체
출처 : http://www.clearboth.org/css3_3_by_isdn386/
<style>
body{
padding:200px;
}
/* 큐브의 6개의 각 면을 채울 기본속성 정의(사이즈, 폰트) */
#cube div {
position: absolute;
height: 160px;
width: 160px;
padding:20px;
text-align:center;
font-size:30px;
color:#fff;
background-color: rgba(0, 0, 0,.5); /* 면 배경색상 .5는 투명도가 0.5임 */
}
#cube {
/* 원근의 관점 - 값이 작을 수록 길이가 길어진다. */
-webkit-perspective: 800;
/* 3D의 기본이 되는 원근의 기준점*/
-webkit-perspective-origin: 50% 600px;
}
/* top으로 시작해서 bottom까지 6면체의 모양을 표시 */
#cube .top {
/* 90도 각도로 X축 회전하고 Z축으로 100px만큼 이동 */
-webkit-transform: rotateX(90deg) translateZ(100px);
}
#cube .front {
/* Z축으로 100px만큼 이동 */
-webkit-transform: translateZ(100px);
}
#cube .right {
/* 90도 각도로 Y축 회전하고 Z축으로 100px만큼 이동 */
-webkit-transform: rotateY(90deg) translateZ(100px);
}
#cube .back {
/* 180도 각도로 Y축 회전하고 Z축으로 100px만큼 이동 */
-webkit-transform: rotateY(180deg) translateZ(100px);
}
#cube .left {
/* -90도 각도로 Y축 회전하고 Z축으로 100px만큼 이동 */
-webkit-transform: rotateY(-90deg) translateZ(100px);
}
#cube .bottom {
/* -90도 각도로 X축 회전하고 Z축으로 100px만큼 이동한 후 다시 180도 회전 */
-webkit-transform: rotateX(-90deg) translateZ(100px) rotate(180deg);
}
</style>
<body>
<div id="cube">
<div class="top">1 Top</div>
<div class="front">2 Front</div>
<div class="right">3 Right</div>
<div class="back">4 Back</div>
<div class="left">5 Left</div>
<div class="bottom">6 Bottom</div>
</div>
</body>
부록A
1. 조건부 주석
<!-- [if 조건]>
조건이 참일 때 실행할 코드
<![endif] -->
!: not, lt: Less Than, lte: Less Than or Equal, gt: Greater Than, gte: Greater Than or Equal, &: and, |: or
<!-- [if (IE 9) | (IE 10)]>
<h1>최신 버전의 인터넷 익스플로러</h1>
<![endif]-->
<!--[if !((IE 9) | (IE 10))]>
<h1> 구 버전의 인터넷 익스플로러</h1>
<![endif]-->
