HTML5 CSS3의 모바일 웹앱을 위한 기술
출처: 모바일 웹앱 디자인 손지연 세미나
왜HTML5가 모바일에 중요한가?
HTML5 를 이용한 많은 Web Application(웹 어플리케이션, 웹 앱)들이 만들어 지고 있지만, 데스크탑 환경에선 아직 이슈가 남아있다. 현재 브라우저 점유율에서 가장 큰 위치를 차지하고 있는 Internet Explorer (6.0~ 8.0) 이 아직 HTML5 지원이 미진하기 때문이다. 이 때문에 HTML5 웹어플리케이션들은 Firefox, Chrome, Safari 같은 타 브라우저를 통해서만 확인이 가능하다.
현재로선 Android 2.2 와 iOS 4.0 의 브라우저가 거의 모든 HTML5 스펙을 다 지원하기 때문에, HTML5 를 이용한 어플리케이션 작성에 있어선 모바일이 좀 더 나은 환경이라고 볼 수 있다
http://html5gallery.com/
HTML5의 개발로 플래시 개발자들은 좀 더 창의적인 일을 할 수 있는 역할 분담의 시간이 올 것 이다
http://www.craftymind.com/
HTML5의 캔버스 요소를 함께 사용할 경우 동영상에 사용자 동작을 추가해서 좀 더 재미있는 효과를 만들 수도 있다
http://media.chikuyonok.ru/ambilight/
플래시 플레이어 없어도 웹페이지 안에서 자연스럽게 동영상이 재생되는 사이트입니다
http://spielzeugz.de/html5/compare/
마우스 효과를 볼 수 있는 사이트
http://mrdoob.com/projects/harmony
캔버스 요소를 직접 경험하고 소스코드도 볼수 있는 하모니 사이트
1-HTML5의 새 태그들 삽입하기
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>제주 올레</title>
<style type="text/css">
body {background: #FFF url(images/bg3.jpg) repeat-x fixed left bottom;}
p {font-family: "굴림";font-size: 12px;}
section {display:block;}
figcaption {display :block; font :12px 굴림; color : #00F; padding : 5px 0 0 0;}
mark {background-color:#C5F2F5;
font-weight:bold;}
</style></head><body>
<header>
<h1>제주 올레</h1>
</header>
<section id="memo">
<h3>제주 올레 7코스</h3>
<p>외돌개를 출발하여 법환포구를 경유해 월평포구까지 어어진 해안올레. 올레인들이 가장 아끼고 <mark>자연생태길</mark>인 <mark>'수봉로'</mark>를 만날 수 있다. <mark>수봉로</mark>는 세 번째 코스 개척 시기인 2007년 12월, 올레지기인 '김수봉'님이 염소가 다니던 길에 직접 삽과 곡괭이만으로 계단과 길을 만들어서 사람이 걸어다닐 수 있도록 한 길이다. </p><strong>패스포트 스탬프 확인 장소</strong>
<p><b>시작</b> 외돌개 제주 올레 안내소<br>
<b>중간</b> 강정 올레 쉼터<br>
<b>종점</b> 월평 송이 슈퍼</p>
<p><b>난이도 : 상</b> 총 16.4km(4~5시간)<br>
수봉로는 언덕길이고 일강정 바당올레에서 서건도 사이 바윗길이 험한 편이다.</p>
</section>
<section id="photo">
<figure>
<img src="images/road1.jpg">
<figcaption>수봉로 언덕을 넘자마자 다시 만나게 되는 바다. </figcaption>
</figure>
<figure>
<img src="images/road2.jpg">
<figcaption>외돌개 산책로에서 외돌개가 보인다. 전설을 들어보면 가슴 아리다.</figcaption>
</figure>
</section>
<footer>
<p>이 문서는 <time datetime="2010-05-19" pubdate>2010년 5월 19일</time>에 작성되었습니다</p>
<address>funcom@gmail.com</address>
</footer></body></html>
시맨틱 태그
HTML5에는 태그만 보고도 그 태그가 적용된 대상의 역할을 알 수 있는 시맨틱 태그가 도입되었다 시맨틱 태그를 사용하면 검색엔진에서 필요한 부분만 쉽게 찾아서 검색할 수 있고 스크린 리더 같은 웹 보고 기구에서도 좀더 정확하게 웹문서를 분석하고 전달 할 수 있다
<header>
<hgroup> 부 제목
<nav> 다른문서에 링크
<article><article>
<section>큰 단락 그분
<aside> 사이드바
<footer> 저작권,제작자 정보
<figure> 그림이나 도표 설명,글
<mark> 강조
<time> 날짜와 시간
<address> 메일 연락처 주소
<i> 머릿속 생각
<b>진하게 표시
<small> 포커스를 많이 받지 않는 태그
<hr> 단락 구별
화면에 그림을 그려보자
첫 글자는 영문, 하이픈 사이 띄우지 않음.
<!DOCTYPE HTML><html><head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style>
canvas {border:1px solid #999;}
</style>
</head>
<body>
<canvas id="m" width="500" height="300"></canvas>
</body>
</html>
-----------------------------------------------------------
<!DOCTYPE HTML><html><head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="application/javascript">
function draw_m() {
var m_canvas = document.getElementById('m');
문서안에 있는 여러 객체들 중에서 id를 검색해서 객체를 불러오는 메서드
var m_ctx = m_canvas.getContext('2d');
if(m_ctx) {
m_ctx.fillStyle = "rgb(200,0,0)";
m_ctx.fillRect (10, 10, 100, 100);
}
else {alert("사파리 브라우저나 파이어폭스 1.5 이상의 브라우저에서만 사이트 내용을 제대로 볼 수 있습니다.") }}
</script> </head>
<body onload="draw_m()">
<canvas id="m" width="500" height="300"></canvas></body></html>
-----------------------------------------------------
<!DOCTYPE HTML>
<html><head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="application/javascript"> function draw_m() {
var m_canvas = document.getElementById('m');
if(m_canvas.getContext) {
var m_ctx = m_canvas.getContext('2d');
m_ctx.fillStyle = "rgb(200,0,0)";
m_ctx.fillRect (10, 10, 100, 100);
m_ctx.fillStyle = "rgba(0,0,200, 0.5)";
m_ctx.fillRect (50, 50, 100, 100);
} else {
alert("사파리 브라우저나 파이어폭스 1.5 이상의 브라우저에서만 사이트 내용을 제대로 볼 수 있습니다.")
}}
</script>
</head>
<body onload="draw_m()">
<canvas id="m" width="500" height="300"></canvas>
</body>
</html>
다양한 도형 그리기
fillRect:색이 칠해진 사각형을 그립니다
strokeRect :테두리만 있는 사각형을 그립니다
clearRect:특정 영역을 지우고 완전히 투명하게 만듭니다
<!DOCTYPE HTML>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="application/javascript">
function draw_m() {
var canvas = document.getElementById('m');
if(canvas.getContext){
var ctx = canvas.getContext('2d');
ctx.fillStyle = "rgb(200,0,0)";
ctx.fillRect (10, 10, 100, 100);
ctx.fillStyle = "rgba(0,0,200, 0.5)";
ctx.fillRect (50, 50, 100, 100);
ctx.clearRect(60, 60, 40, 40);
ctx.strokeStyle="rgb(200,0,250)";
ctx.strokeRect(200, 50, 70, 150);
}else { alert("사파리 브라우저나 파이어폭스 1.5 이상의 브라우저에서만 사이트 내용을 제대로 볼 수 있습니다.")
}
}</script> </head>
<body onload="draw_m()">
<canvas id="m" width="400" height="300"></canvas></body> </html>
경로그리기
beginPath()경로 시작
closePath()경로 종료
stroke()경로 테두리 그리기
fill()도형 채우기
lineTo(X,Y)직선을 그리는 메서드
<!DOCTYPE HTML><html><head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style>canvas {background-color:#F7F188}</style>
<script type="application/javascript">
function draw_m() {
var canvas = document.getElementById("t");
if(canvas.getContext){
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50,50); // 왼쪽 작은 직선
ctx.lineTo(80,80);
ctx.moveTo(140,80); // 오른쪽 작은 직선
ctx.lineTo(170,50);
ctx.moveTo(60,150); // 아래 직선
ctx.lineTo(170,150);
ctx.stroke();
}else {
alert("사파리 브라우저나 파이어폭스 1.5 이상의 브라우저에서만 사이트 내용을 제대로 볼 수 있습니다.") }}
</script></head> <body onload="draw_m()">
<canvas id="t" width="220" height="220"></canvas></body></html>--------------------------------------------------------------
<!DOCTYPE HTML><html><head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style>canvas {background-color:#F7F188}</style>
<script type="application/javascript">
function draw_m() {
var canvas = document.getElementById("t"); if(canvas.getContext){
var ctx = canvas.getContext('2d');
// 색칠된 삼각형
ctx.beginPath();
ctx.moveTo(50,50);
ctx.lineTo(150,50);
ctx.lineTo(50,150);
ctx.fill();
ctx.beginPath();
ctx.moveTo(80,80);
ctx.lineTo(200,100);
ctx.lineTo(100,200);
ctx.closePath();ctx.strokeStyle="rgb(200,0,0)"; ctx.stroke(); } else {
alert("사파리 브라우저나 파이어폭스 1.5 이상의 브라우저에서만 사이트 내용을 제대로 볼 수 있습니다.") }}
</script></head>
<body onload="draw_m()">
<canvas id="t" width="220" height="220"></canvas></body></html>
------------------------------------------------------------
원 호 그리기
원이나 호를 그릴때는 arc메서드를 사용합니다
var radians=(Math.PI/180)*degrees
are메서드에서의 각도는 도 (degree)로 표기하지 않고 radian값으로 표기 합니다
<!DOCTYPE HTML><html><head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="application/javascript">
function draw_m() {
var canvas = document.getElementById("m");
if(canvas.getContext){ var ctx = canvas.getContext('2d');ctx.beginPath();
ctx.arc(70, 70, 20, 0,(Math.PI/180)*60,true);//위치가 70,70인 반지름이 20인 도형을 60도까지만 그려라.
ctx.stroke();
ctx.beginPath();
ctx.arc(130, 110, 50, 0, Math.PI*2,true);
ctx.fillStyle="rgb(0,200,200)"; ctx.fill(); ctx.stroke(); ctx.beginPath();
ctx.arc(190, 70, 20, (Math.PI/180)*110,(Math.PI/180)*170,true);
ctx.stroke();
ctx.beginPath();
ctx.arc(300, 150, 30, 0,(Math.PI/180)*200,false);
ctx.fillStyle="rgb(0,200,0)";ctx.fill(); }else {
alert("사파리 브라우저나 파이어폭스 1.5 이상의 브라우저에서만 사이트 내용을 제대로 볼 수 있습니다.")
}}</script></head>
<body onload="draw_m()">
<canvas id="m" width="400" height="500"></canvas></body></html>
도형을 그리기 전에 종이위에 직접 그려서 시작점 위치와 좌표값을 계산한뒤에 코딩하기
<!DOCTYPE HTML><html><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>도형 그리기</title>
<script type="application/javascript">
function draw_m() {
var canvas = document.getElementById("ex");
if(canvas.getContext) { var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.arc(120,120,100,0,Math.PI*2,true);
ctx.fillStyle="rgb(0,200,0)"
ctx.fill();ctx.beginPath();
ctx.moveTo(115,50);
ctx.lineTo(50,160);
ctx.lineTo(190,160);
ctx.fillStyle="yellow" ctx.fill();
ctx.clearRect(100,100,35,40);
ctx.strokeStyle="red";
ctx.strokeRect(100,100,36,41);
ctx.fillStyle = "blue";
ctx.fillRect (105, 220, 30, 60); }
else { alert("사파리 브라우저나 파이어폭스 1.5 이상의 브라우저에서만 사이트 내용을 제대로 볼 수 있습니다.") }
} </script> </head><body onload="draw_m()">
<canvas id="ex" width="300" height="300"></canvas></body></html>
2-도형에 스타일 적용하기
색상
fillStyle="blue"
strokeStyle="blue" 컬러를 표현하는 방법은
1.색상이름적기
2.16진수로 표현(#000000)
3. RGB값으로 표현하기
<!DOCTYPE HTML><html><head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="application/javascript">
function draw_m() {
var m_canvas = document.getElementById('m');
if(m_canvas.getContext) {
var ctx = m_canvas.getContext('2d');
var grad = ctx.createLinearGradient(0,0,0,200);
grad.addColorStop(0.5, '#fff');
grad.addColorStop(1, 'orange');
ctx.fillStyle=grad;
ctx.fillRect(10,10,200,190);} else {
alert("사파리 브라우저나 파이어폭스 1.5 이상의 브라우저에서만 사이트 내용을 제대로 볼 수 있습니다.")
}} </script></head> <body onload="draw_m()">
<canvas id="m" width="300" height="350"></canvas> </body> </html>
원형 그라데이션 적용하기
<!DOCTYPE HTML><html><head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="application/javascript">
function draw_m() {
var m_canvas = document.getElementById('m');
if(m_canvas.getContext) {
var ctx = m_canvas.getContext('2d');
var radgrad = ctx.createRadialGradient(45,45,10,62,60,80);
radgrad.addColorStop(0, '#A7D30C');
radgrad.addColorStop(1, 'rgb(1,159,98)');
ctx.fillStyle = radgrad;
ctx.arc(80,80,80,0,Math.PI*2,true); ctx.fill(); } else {
alert("사파리 브라우저나 파이어폭스 1.5 이상의 브라우저에서만 사이트 내용을 제대로 볼 수 있습니다.") }} </script></head>
<body onload="draw_m()">
<canvas id="m" width="300" height="350"></canvas></body></html>
그라데이션 효과가 적용된 막대 그리기
<!DOCTYPE HTML><html><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>캔버스 도형 스타일 사용하기</title>
<script type="application/javascript">
function draw_bar(){var canvas=document.getElementById('c');
var ctx=canvas.getContext('2d');
var grad=ctx.createLinearGradient(0,0,300,0);
grad.addColorStop(0,'#fc0');
grad.addColorStop(1,'#900');
ctx.save();
ctx.fillStyle=grad;
ctx.fillRect(10,50,140,30);
ctx.fillRect(10,100,200,30);
ctx.fillRect(10,150,300,30);
ctx.restore();
ctx.font="13pt 돋움";
ctx.fillText("5.4%", 160, 70);
ctx.fillText("6.9%", 220, 120);
ctx.fillText("7.9%", 320, 170);}</script></head>
<body onload="draw_bar()">
<h2> 청년 실업률 추이 </h2>
<canvas id="c" width="500" height="700"></canvas>
</body></html>
ctx.save();ctx.save();에 대한 설명
ctx.fillStyle="purple";
ctx.fillRect(10,10,50,100);
ctx.save();
ctx.fillStyle = "skyblue";
ctx.fillRect (60,10,50,100);
ctx.save();
ctx.fillStyle = "green";
ctx.fillRect (110,10,50,100);
ctx.restore();
ctx.fillRect (160,10,50,100);
ctx.save();
ctx.fillRect (210,10,50,100);
그림자 효과
<!DOCTYPE HTML><html><head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="application/javascript">
function draw_m() { var canvas = document.getElementById('m');
if(canvas.getContext){ var ctx = canvas.getContext('2d');
ctx.shadowOffsetX = 20; 객
ctx.shadowOffsetY = 20;
ctx.shadowBlur=2;
ctx.shadowColor="#CCC";
ctx.fillRect(10,10,200,200);}else {
alert("사파리 브라우저나 파이어폭스 1.5 이상의 브라우저에서만 사이트 내용을 제대로 볼 수 있습니다.") }}</script></head>
<body onload="draw_m()">
<canvas id="m" width="400" height="500"></canvas></body></html>
이미지 사용하기
<!DOCTYPE HTML><html><head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="application/javascript"> function draw_m() {
var canvas = document.getElementById('m');
if(canvas.getContext){ var ctx = canvas.getContext('2d');
var img = new Image();img.onload=function(){ctx.drawImage(img,10,10) }
img.src='images/flower.jpg';var img2=new Image(); img2.onload=function(){
ctx.drawImage(img2,10,320,200,140);
}
img2.src='images/flower.jpg'; } else {
alert("사파리 브라우저나 파이어폭스 1.5 이상의 브라우저에서만 사이트 내용을 제대로 볼 수 있습니다.")
}}</script></head> <body onload="draw_m()">
<canvas id="m" width="500" height="600"></canvas></body></html>
클립핑 경로
<!DOCTYPE HTML><html><head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="application/javascript">
function draw_m() { var canvas = document.getElementById('m');
if(canvas.getContext){ var ctx = canvas.getContext('2d');
var img = new Image();
img.onload=function(){
ctx.drawImage(img,10,10)
}
img.src='images/flower.jpg' ctx.beginPath();
ctx.arc(200,110,100,0,Math.PI*2,true); ctx.clip();
}
else {alert("사파리 브라우저나 파이어폭스 1.5 이상의 브라우저에서만 사이트 내용을 제대로 볼 수 있습니다.")}}</script></head>
<body onload="draw_m()">
<canvas id="m" width="400" height="500"></canvas></body></html>
CSS3
CSS3는 HTML5와 더불어 최신 웹 브라우저들이 함께 채용하고 있는 스타일 표준이다. CSS3는 HTML5와 크게 관계 있는 부분은 없지만 현대적 웹 기술에 있어서 꼭 알아야할 웹 기술 요소이다. CSS3는 현재 표준작업중이고 선택자에 대한 부분은 거의 완료되었다.
CSS2와 차이점
CSS2와 CSS3의 가장 큰 차이점은 CSS3가 모듈 기반으로 개발되고 있다는 점이다.
이것은 각종 브라우저나 디바이스가 필요에 따라 원하는 CSS모듈만을 탑재하거나 또는 필요한 모듈만을 빠르게 자주 업데이트 하는 것을 돕는다. CSS3는 text, fonts, color, backgrounds & borders, transforms, transitions, animaitons와 같은 종류의 모듈들을 추가로 개발하고 있다. CSS3는 기존의 CSS2가 갖지 못했던 화려하고 역동적인 면모를
추가하여 포토샵과 자바스크립트 및 서버측 기술에만 완전히 의존하던 영역들을 개척했다. 상자의 크기에 따른 말줄임 표시, 투명한 배경, 그림자효과, 둥근 모서리, 그라디언트, 도형의 회전과 비틀기, 애니메이션 효과 등이 가능해진 것이다.
webkit :웹킷 방식 브라우저용(사파리나 크롬등)
moz :게코 방식 브라우저용(모질라나 파이어폭스)
o :오페라 브라우저
ms :마이크로소프트 인터넷 익스플로러
모서리를 부드럽게 처리하기
border-radius라는 속성으로 모서리를 둥글게 하기
<!DOCTYPE HTML><html><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style>p {font-family: "돋움"; font-size: 12px;line-height: 20px;
}div.rounded { background-color: #666;
color: #fff;
line-height: 20px;
width: 250px;
padding: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}</style></head><body><div class="rounded">
<p>내 그늘 아래 그림자 길어질수록 <br>
나의 어지럼증 깊어져 <br>
세상이 몇바퀴씩 곤두박질치네요</p>
</div></body></html>
네 귀퉁이의 모양을 다르게 설정하기
<!DOCTYPE HTML><html><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style>p {font-family: "돋움"; font-size: 12px; line-height: 20px; color: #000;
} div.rounded {
position:absolute;
left:65px;
top:75px;
background-color: #FFFF99;
line-height: 20px;
width: 250px;
padding: 10px;
border: thin double #C90;
-webkit-border-bottom-left-radius:15px;
-moz-border-radius-bottomleft:15px;
-webkit-border-top-right-radius:15px;
-moz-border-radius-topright:15px;
}</style></head><body><div class="rounded">
<p>내 그늘 아래 그림자 길어질수록 <br>
나의 어지럼증 깊어져 <br>
세상이 몇바퀴씩 곤두박질치네요</p></div></body></html>
선택한 요소에 그림자 효과 추가하기
<!DOCTYPE HTML><html><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>border-radius</title><style>
a img:hover {
box-shadow: 0 5px 10px rgba(0,0,0,0.6);
-moz-box-shadow:0 5px 10px rgba(0,0,0,0.6);
-webkit-box-shadow:0 5px 10px rgba(0,0,0,0.6);
}#menu1{position:absolute; left:10px; top:20px;
}#menu2{position:absolute;left:200px; top:20px;}</style></head><body><div id="menu1">
<a href="javascript:;"> <img src="menu.jpg" border="0"></a></div><div id="menu2">
<a href="javascript:;"> <img src="menu.jpg" border="0"></a></div></body></html>
이미지에 그림자를 적용한 예
<!DOCTYPE HTML>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>border-radius</title><style>
#photo {position:absolute; left:50px; top:20px;}
#shadowed {position: absolute; left:300px; top:20px;
box-shadow:5px 5px 10px #000;
-webkit-box-shadow: 5px 5px 10px #000;
-moz-box-shadow: 5px 5px 10px #000;}
</style></head>
<body><img id="photo" src="cross.JPG" width="200" height="230">
<img id="shadowed" src="cross.JPG" width="200" height="230">
</body></html>
텍스트에 그림자 효과 추가하기
<!DOCTYPE HTML><html><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>border-radius</title><style>
p {font-family: Arial; font-size:50px;}
.text1 {color:#06F; text-shadow:3px 3px 5px #000;}
.text2{color:#C30; text-shadow:3px -3px 5px #000;}
</style></head><body>
<p><span style="color:#06F">HTML5</span> & <span style="color:#C30">CSS3</span> </p><p><span class="text1">HTML5 </span> & <span class="text2">CSS3</span></p>
</body></html>
-----------------------------------------------
선명한 느낌의 글자 만들기
<!DOCTYPE HTML><html><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>border-radius</title><style>body {
background:#666;
font-family: Arial Black;
font-size:50px;}
.text1 {color:#000; text-shadow:0px 1px 1px #fff;}
.text2 {color:#fff; text-shadow:0px 1px 1px #000;}</style></head>
<body><p class="text1">HTML5 & CSS3</p>
<p class="text2">HTML5 & CSS3</p></body></html>
두가지 이상의 그림자 색상
<!DOCTYPE HTML><html><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>border-radius</title><style>
body {background:#005151; font-family: Arial Black; font-size:50px;}
.text1 {color:#fff; text-shadow:0px 1px 8px #fff;}
.text2 {color:#fff; text-shadow:1px -3px 8px #6F0;}
.text3 {color:#000; text-shadow:1px 1px 4px #fff; }</style></head>
<body><p class="text1">HTML5 & CSS3</p>
<p class="text2">HTML5 & CSS3</p>
<p class="text3">HTML5 & CSS3</p></body></html>
이미지 투명도 조절하기
<!DOCTYPE HTML><html><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Opacity</title>
<style>.mybox {
position:relative;
width:300px;
height:150px;
background-image:url("bg1.jpg");
background-repeat:no-repeat;
background-position:left top;}
.noopa {position:relative;
top:20px;
background-color:#fff;
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size:60px;
font-weight:800;
color:#000;
text-align:center;
vertical-align:middle;}
.opa1 {position:relative; top:20px;
background-color:rgba(255,255,255,0.5);
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size:60px;
font-weight:800;
color:#000;
text-align:center;
vertical-align:middle;}
.opa2 {position:relative;
top:20px;
background-color:#fff;
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size:60px;
font-weight:800;
color:rgba(0,0,0,0.5);
text-align:center;
vertical-align:middle;}
</style></head><body><div class="mybox">
<h1 class="noopa">CSS3</h1></div>
<div class="mybox"><h1 class="opa1">CSS3</h1></div>
<div class="mybox"><h1 class="opa2">CSS3</h1></div>
</body></html>
사진변형 및 트렌지션
<!DOCTYPE HTML>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Transform</title><style>
.myphoto{position:absolute;left:50px; top:70px;
transform: rotate(15deg);
-webkit-transform:rotate(15deg); -moz-transform:rotate(15deg); }
.myphoto1{position:absolute; left:300px; top:480px;
transform: scale(1.5, 1.5);
-webkit-transform:scale(1.5, 1.5);
-moz-transform:scale(1.5, 1.5); }
.myphoto2{position:absolute; left:450px; top:70px;
transform: skew(10deg, 10deg);
-webkit-transform:skew(10deg, 10deg);
-moz-transform:skew(10deg, 10deg); }
.myphoto3{position:absolute; left:30px; top:30px;
transform: translate(200px, 900px);
-webkit-transform:translate(200px, 900px);
-moz-transform:translate(200px, 900px); }</style></head>
<body>
<img class="myphoto" src="photo.jpg">
<img class="myphoto1" src="photo.jpg">
<img class="myphoto2" src="photo.jpg">
<img class="myphoto3" src="photo.jpg"></body></html>
서브메뉴가 펼쳐지는 내비게이션 만들기
<!DOCTYPE HTML>
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>가로 내비게이션</title><style>
.navi { list-style-type: none;
height: 40px;
padding: 0;
margin: 0; }
.navi li { float: left;
position: relative;
padding: 0;
line-height: 40px;
background:#600; }
.navi li a {display: block;
font-family:"굴림";
font-weight:600;
font-size:14px;
padding: 5px 25px;
color: #fff;
text-decoration: none; }
.navi li a:hover {color:#F90; }
.navi li ul { opacity: 0;
position: absolute;
left: 0;
width: 180px;
background: #D8AFAF;
list-style-type: none;
padding: 0;
margin: 0; }
.navi li:hover ul {
opacity: 1;}
.navi li ul li {float: none;
position: static;
height: 0;
line-height: 0;
background: none;
}
.navi li:hover ul li {
height: 30px;
line-height: 20px;
padding:5px 0;
}
.navi li ul li a {
background: #D8AFAF;
font-family:"굴림";
font-weight:600;
font-size:14px;
color:#900;
}
.navi li ul li a:hover {
background: #900;
}
</style>
</head>
<body>
<ul class="navi">
<li><a href="#"> Home </a></li>
<li><a href="#"> 웹 개발</a>
<ul><li><a href="#"> 웹 디자인 </a></li>
<li><a href="#"> HTML5 + CSS3</a></li>
<li><a href="#"> JQuery</a></li>
<li><a href="#"> 웹 + 모바일</a></li></ul>
</li><li><a href="#"> 게시판 </a><ul>
<li><a href="#"> Q & A </a></li>
<li><a href="#"> 방명록</a></li>
</ul> </li> <li><a href="#"> 프로필</a></li>
</ul></body></html>
그라데이션을 이용한 메뉴 만들기
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Gradient Menu</title>
<style>
ul.navi li {
list-style-type: none;
display: block;
width: 8em;
height: 3em;
css에서 크기를 지정할 때 pt.px,em.ex,%다양한 단위를 사용한다 대부분의 브라우저는 단위를 사용하지 않으면 자동으로 px단위로 인식하여 렌더링을 하게 되지만 표준코드 작성은 정확안 단위를 명시해 주어야 한다
em 계산기 http://riddle.pl/emcalc/
float: left;
text-align: center;
font-family: "Lucida Grande", sans-serif;
border-right: 1px #818181 solid;
-webkit-box-shadow: 1px 1px 1px #bbb;
-moz-box-shadow:1px 1px 1px #bbb;
box-shadow: 1px 1px 1px #bbb;
background-color: #c9c9c9;
background: -webkit-gradient(linear, left top, left bottom, from(#c9c9c9), to(#848484), color-stop(0.6, #a1a1a1));
background: -moz-linear-gradient(top,#c9c9c9, #a1a1a1, #848484);
}
ul.navi li a {
display: block;
padding: .8em .5em .5em .5em;
text-decoration: none;
color: #292929;
text-shadow: 1px 1px 0px #cccccc;
}
ul.navi li:hover{
background-color: #333333;
background: -webkit-gradient(linear, left top, left bottom, from(#333333), to(#4c4c4c), color-stop(0.6, #474747));
background: -moz-linear-gradient(top, #333333,#474747, #4c4c4c);
}ul.navi li:hover > a{
color:#FFF; /* 글자색 */
text-shadow:0px 1px 0px #fff;
}
ul.navi li:first-child {
-webkit-border-top-left-radius: .5em;
-moz-border-radius-topleft: .5em;
border-top-left-radius: .5em;
-webkit-border-bottom-left-radius: .5em;
-moz-border-radius-bottomleft: .5em;
border-bottom-left-radius: .5em;
}
ul.navi li:last-child {
-webkit-border-top-right-radius: .5em;
-moz-border-radius-topright: .5em;
border-top-left-radius: .5em;
-webkit-border-bottom-right-radius: .5em;
-moz-border-radius-bottomright: .5em;
border-bottom-right-radius: .5em;
}</style>
</head><body><div>
<ul class="navi">
<li class="home"><a href="#">Home</a></li>
<li id="html"><a href="#">HTML5</a></li>
<li id="css"><a href="#">CSS3</a></li>
<li id="jquery"><a href="#">JQuery</a></li>
<li id="mobile"><a href="#">Mobile</a></li>
<li id="profile"><a href="#">Profile</a></li> </ul> </div>
</body></html>
폴라로이드 느낌의 사진 만들기
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Polaroid Photo</title>
<style type="text/css">
.polaroid{
position:relative;
left:100px;
top:50px;
width:300px;
padding:10px 10px 20px 10px;
border: 1px solid #bfbfbf;
background-color:#fff;
-webkit-box-shadow: 2px 2px 3px rgba(135,139,144,0.4);
-moz-box-shadow: 2px 2px 3px rgba(135.139.144,0.4);
box-shadow: 2px 2px 3px rgba(135.139.133.0.4);
}
.caption {
text-align:center;
font-family:"바탕";
font-weight:600;
font-size:16px;
color:#060;
}.rotate{
-webkit-transform : rotate(9deg);
-moz-transform : rotate(9deg);
transform : rotate(9deg);
}
</style>
</head>
<body>
<div class="polaroid rotate">
<img src="images/d7.jpg">
<p class="caption"> 여름이 깊어가고 있었다 </p>
</div>
</body>
</html>
CSS3그라디언트 제네레이터 buttons.html
그라디언트 제네레이터를 이용해 손쉽게 그라데이션 적용하기
HTTP://gradients.glrzad.com
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Gradient Buttons</title>
<style>
.button {display: inline-block;
outline: none;
cursor: pointer;
text-align: center;
text-decoration: none;
font: 14px/100% Arial, Helvetica, sans-serif;
padding: 8px 20px 10px;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
box-shadow: 0 1px 2px rgba(0,0,0,.2);
}.button:hover {
text-decoration: none;
}.button:active {
position: relative;
top: 1px;
}.orange {color: #fef4e9;
border: solid 1px #da7c0c;
background: #f78d1d;
background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));
background: -moz-linear-gradient(top, #faa51a, #f47a20);
}.orange:hover { background: #f47c20;
background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015));
background: -moz-linear-gradient(top, #f88e11, #f06015);}
.orange:active {color: #fcd3a5;
background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a));
background: -moz-linear-gradient(top, #f47a20, #faa51a);}
</style></head><body><div>
<a href="#" class="button orange">HOME</a>
<a href="#" class="button orange">HTML5</a>
<a href="#" class="button orange">CSS3</a>
<a href="#" class="button orange">BOARD</a>
<a href="#" class="button orange">PROFILE</a>
</div>
</body>
</html>
'디자인과 예술의 경계' 카테고리의 다른 글
| 먼셀의 색입체 (1) | 2011.08.17 |
|---|
