[ CSS의 적용 ]
1. HTML코드에 직접 적용하는 법
p{font-family:"굴림"; color:#ccc; font-size:12px;}
<p> ... </p> p테크로 감싼 HTML내의 본문에 전부 해당 속성이 적용됩니다.
2. 클래스 선택자를 만들어 사용하는 법
.myclass{font-size:14px; color:#fcf;}
클래스의 처음 시작을 "."으로 하며, 어떤 이름을 만들어 사용하든지 상관 없습니다.
<div class="myclass">...</div>
3. 아이디 선택자를 만들어서 적용하는 법
#myID{margin:10px; padding:5px;}
<div id="myID"> ... </div>
아이디 선택자는 "#"으로 시작된다. 주로 레이아웃을 잡을때 사용된다.
※ CSS구성요소
선택자{속성:속성값;}
★ CSS3에서 추가된 속성 들
|
css 속성 값 |
내용 |
| border |
테두리의 색을 다양하게 적용할 수 잇습니다. 또한 테두리에 이미지를 넣을 수 있고 모서리를 둥그렇게 적용할 수 있습니다. |
| background |
하나의 태그에 다중 이미지를 추가할 수 있고 백그라운드의 위치를 정확하게 잡을 수 잇습니다. 또한 백그라운드의 사이즈도 조절할 수 있습니다. |
| color |
색의 농도(투명도)를 조절할 수 있습니다. 또한 RGB색과 인쇄용인 HSL컬러로 색을 지정할 수 있습니다. |
| text |
텍스트에 그림자 효과를 줄 수 있습니다. 또한 단어가 잘리는 효과를 줄 수 있으며, 텍스트 overflow효과를 줄 수 잇습니다. |
| transfomation | 변형효과(크기 조절, 기울기 효과, 회전 효과등)를 줄 수 있습니다. |
| box |
박스에 그림자를 적용할 수 있고 사이즈 조절이 가능하며 세로축과 가로축을 기본으로 overflow를 각각 조절할 수 있습니다. |
|
content |
요소(Element)에 직접 콘텐츠를 지정해서 스타일을 줄 수 있습니다. |
| opacity |
요소(Element)에 투명도를 지정할 수 있습니다. |
| media |
css2에서 사용하던 media를 다양하게 해상도나 색상들 여러가지 요소를 지정해 줄 수 있게 되엇습니다. |
|
web font |
모든 브라우저에서 웹 폰트가 정식으로 지원됩니다. |
[ video 테크 ]
이전까지의 브라우저에서는 동영상을 보기 위해서는 별도의 플러그인을 추가하거나 ActiveX를 설치해야만 했습니다. 이 경우에는 별도의 보안상 위험을 비롯한 여러가지 문제(불편함도 매우 큽니다.)가 발생하며 이에 따라 HTML5에서는 video테그가 추가 되었습니다.
| <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>비디오 예제</title> </head> <body> <video src="DSC_2190.mp4" width="400" height="240" controls autoplay preload="auto"> </video> </body> </html> |
업계 표준은 H.264이며, mp4또는 m4v 확장자를 가지고 있습니다.
그러나 상용라이센스이기 때문에 파이어폭스나 오페라에서는 재생되지 않습니다.(그러나 파이어폭스 최신버전(15.0)으로 테스트 결과 정상적으로 동작이 됨을 확인하였습니다. 물론 오페라는 확인해 보지 않았습니다. IE8에서는 지원하지 않더군요 이게 가장 큰 문제 네요.)
따라서 파이어폭스나 오페라에서는 로얄티가 전혀 없는 Theora포멧을 지우너하고 있습니다.(확장자는 ogg, ogv)
WebM코덱의 경우 VP8비디오 코덱과 Vorbis오디오 코덱을 이용한 포멧으로 오픈소스용 동영상 포멧입니다.
controls : 아래에 컨트롤 창 추가
autoplay : 자동 플레이
preload : 파일사이즈가 큰 동영상일 경우
| <video width="400" height="240" controls autoplay preload="auto"> <source src="DSC_2190.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'> <source src="DSC_2190.ogv" type='video/ogg; codecs="theora, vorbis"'> <source src="DSC_2190.webm" type='video/webm; codecs="vp8, vorbis"'> <p> 현재 사용하고 있는 브라우저는 비디오 태그를 지원하지 않습니다.</P> </video> |
↑ 모든 포맷을 추가한 형태.
[ audio 테그 ]
대표적인 포맷으로는 mp3와 ogg파일 포맷이 있습니다.
mp3 파일의 경우 IE와 사파리, 크롬에서는 잘 열리지만 파이어폭스, 오페라에서는 잘 열리지 않습니다.(확인결과 파이어폭스(15.0)에서 mp3는 열리지 않으며 ogg만 열리는 것으로 확인되었습니다.)
| <body> <audio controls="controls"> <source src="danosongs.com-black-box-in-the-ground.mp3"> <source src="danosongs.com-black-box-in-the-ground.ogg"> </audio> </body> |
이렇게 소스는 되어 잇지만 두가지를 혼용햇을 경우 파이어폭스에서 열리지 않았습니다. 위의 mp3쪽 라인을 지워야 했습니다.
현재 상태에서는 상단에서 브라우저 확인 후 분리하는 방법 밖에는 없어 보입니다. (HTML5가 표준이라고 해서 기대했지만 표준이 전혀 이루어져 있지 않아 불만 스럽습니다.)
[ embed테그 ]
브라우저에 설치되어 있는 플러그인이 필요한 파일을 동작시킬때 사용하는 테그.
예를들어 기존 드림위버에 플래쉬 파일 삽입을 위해 수십개 라인을 사용하던 복잡한 소스에서 간단히 <body>안에 <embed>태그를 사용하여 간단히 구성할 수 있다.
| <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>embed sample</title> </head> <body> <embed src="sample.swf" width="550" height="400" > </embed> </body> </html> |
<embed>테그는 플래시 파일 뿐만 아니라 mid등의 플러그인 파일을 재생할 때에도 사용됩니다.
mid파일 연결 : <embed src="sample.swf" width="550" height="400" > </embed>
'HTML5&CSS' 카테고리의 다른 글
| HTML5 와 CSS3 Study #2 (CSS) (0) | 2012.08.26 |
|---|---|
| HTML5 와 CSS3 Study #2 (구조) (0) | 2012.08.26 |
| HTML5 와 CSS3 Study #1(배경설명) (0) | 2012.08.26 |
