2011.11.09 17:36

CSS2와 CSS3의 가장 큰 차이점은 CSS3가 모듈 기반으로 개발되고 있다는 점이다. 이것은 각종 브라우저나 디바이스가 필요에 따라 원하는 CSS 모듈만을 탑재하거나 또는 필요한 모듈만을 빠르게 자주 업데이트 하는 것을 돕는다. CSS3는 text, fonts, color, backgrounds & borders, transforms, transitions, animaitons와 같은 종류의 모듈들을 추가로 개발하고 있다. CSS3는 기존의 CSS2가 갖지 못했던 화려하고 역동적인 면모를 추가하여 포토샵과 자바스크립트 및 서버측 기술에만 완전히 의존하던 영역들을 개척했다. 상자의 크기에 따른 말줄임 표시, 투명한 배경, 그림자 효과, 둥근 모서리, 그라디언트, 도형의 회전과 비틀기, 애니메이션 효과 등이 가능해진 것이다. 특히 그래픽 디자인에만 의존하던 영역이 CSS3만으로도 상당부분 가능해지면서 웹 사이트의 성능 향상에 크게 기여할 수 있게 되었다.


유용한 CSS3 속성들

모듈 - text

1.text-shadow


text-shadow:5px 5px 0 #ccc;
filter:progid:DXImageTransform.Microsoft.dropshadow
(OffX=5, OffY=5, Color=#cccccc, Positive=true);
display:inline-block; zoom:1;
text-shadow:x_offset y_offset blur_radius color

지원 브라우저 : 크롬 사파리 파이어폭스 오페라 인터넷익스플로러

IE 브라우저를 제외한 모든 브라우저가 이미 text-shadow 속성을 지원하고 있다. blur 값은 생략할 수 있는데 생략하는 경우 기본값은 blur 스타일이 전혀 지정되지 않은 '0'이다. IE는 DropShadow Filter를 사용할 수 있지만 그림자의 blur 값이 '0'과 같은 표현으로 처리되고 blur 값을 지정할 수 없는 단점이 있다. IE 브라우저 버전간 호환(버그 해결)을 위해 display 속성을 block 또는 inline-block 으로 지정하고 zoom:1 속성을 추가로 부여해야 한다.




2.text-overflow

무궁화 꽃이 피었습니다.

무궁화 꽃이 피었


text-overflow:ellipsis; 
-o-text-overflow:ellipsis;

지원 브라우저 : 크롬 사파리 오페라 인터넷익스플로러

Firefox 브라우저는 아직 지원하지 않고 있지만 IE는 이미 IE6 버전부터 지원하고 있다. Firefox 브라우저는 overflow-hidden 속성에 의하여 넘치는 부분이 말 줄임표 없이 잘린다.



3.
word-wrap

http://abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz.com

http://abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz.com

지원 브라우저 : 크롬 사파리 파이어폭스 오페라 인터넷익스플로러

1byte 문자열이 공백 없이 등장하는 경우 모든 브라우저들은 이를 하나의 단어로 해석하기 때문에 개행하지 않는다. 이것을 강제로 개행할 수 있다. 모든 브라우저가 이 속성을 지원한다.


모듈 - color

1.
opacity


opacity:0.5; 
filter:alpha(opacity=50);

지원 브라우저 : 크롬 사파리 파이어폭스 오페라 인터넷익스플로러

IE 브라우저를 제외한 모든 브라우저가 이미 opacity 속성을 지원하고 있다. IE는 MS전용 Alpha Filter를 적용하여 동일한 표현이 가능하다.


모듈- backgrounds & borders


1.
box-shadow



box-shadow:10px 10px 10px silver; 
-moz-box-shadow:10px 10px 10px silver; 
-webkit-box-shadow:10px 10px 10px silver; 
filter:progid:DXImageTransform.Microsoft.Shadow(color=silver,direction=135, strength=10);
box-shadow:x_offset y_offset blur_radius color

지원 브라우저 : 크롬 사파리 파이어폭스 오페라 인터넷익스플로러

값은 'X좌표, Y좌표, blur값, 그림자색' 순으로 선언한다. blur 값은 생략할 수 있는데 생략하는 경우 기본값은 blur 스타일이 전혀 지정되지 않은 '0'이다. IE 브라우저는 Shadow Filter를 적용할 수 있으나 그림자를 한 방향으로만 표현할 수 있고 사방으로 표현할 수 없는 제약이 따른다. inset 값을 추가하면 그림자가 상자 안쪽으로 발생하는데 IE filter 로는 이런 표현이 불가능하다. Safari4는 inset 값을 지원하지 않지만 Safari5는 지원한다.



2.border-radius



지원 브라우저 : 크롬 사파리 파이어폭스 오페라

border-radius:30px; 
-moz-border-radius:30px;
-webkit-border-radius:30px;

네 방향 모두 적용하는 경우.

border-radius:30px 0; 
-moz-border-radius:30px 0;
-webkit-border-top-left-radius:30px; 
-webkit-border-bottom-right-radius:30px;

원하는 방향에만 적용하는 경우. 웹킷 브라우저 가운데 사파리 4는 단축 속성을 지원하지 않아 현재로써는 단축 속성을 사용할 수 없다.



3.backgrund(s)

background:
url(bg.gif) no-repeat left top, 
url(bg.gif) no-repeat right top, 
url(bg.gif) no-repeat left bottom, 
url(bg.gif) no-repeat right bottom;

지원 브라우저 : 크롬 사파리 파이어폭스 오페라

하나의 요소에 배경 이미지 이런 배경 이미지가 4번 적용되었다. 속성의 값을 쉼표(,)로 분리하면 배경 이미지의 사용 횟수를 무한대로 늘릴 수 있다.



4.gradient



background:#3EAF0E -webkit-gradient(linear, 0% 0%, 0% 100%, from(#3EAF0E), to(#fff));
background:#3EAF0E -moz-linear-gradient(top, #3EAF0E, #fff);
filter:progid:DXImageTransform.Microsoft.gradient(startColorStr=#3EAF0E, endColorStr=#ffffff);

지원 브라우저 : 크롬 사파리 파이어폭스 인터넷익스플로러

웹킷(크롬, 사파리)과 파이어폭스 및 IE의 속성 및 값 선언 방식이 모두 다름에 유의한다. 웹킷은 (타입, X시작점 Y시작점, X종료점 Y종료점, 시작색, 종료색) 형식으로 선언하고 파이어폭스는 (시작점, 시작색, 종료색) 순으로 선언한다. gradient를 지원하지 않는 브라우저를 위하여 기본 배경색을 지정해두어야 함에 유의한다. IE는 IE 전용 Gradient Filter를 사용한다.



모듈- transform


1.
transform





-o-transform:rotate(90deg);-o-transform-origin:0 100%; 
-moz-transform:rotate(90deg);-moz-transform-origin:0 100%;
-webkit-transform:rotate(90deg);-webkit-transform-origin:0 100%;
filter:progid:DXImageTransform.Microsoft.Matrix(M11=6.123031769111886e-17, M12=-1, M21=1, M22=6.123031769111886e-17, sizingmethod='auto expand');

지원 브라우저 : 크롬 사파리 파이어폭스 오페라 인터넷익스플로러

시계 방향으로 90도 회전시키는 코드. translate(이동), scale(크기), rotate(회전), skew(비틀기)가 가능하다. transform-oriain 속성은 transform의 축을 지정하는 속성으로써 값은 기본 값이 50%(X축) 50%(Y축) 이기 때문에 기본 값을 따르는 경우 생략할 수 있다. IE의 경우 IE 전용 Matrix Filter를 사용할 수 있으나 사용법이 다소 복잡하다.




모듈- transition


1.
transition


<출처사이트를 통해서 효과확인이 가능하다>
a{padding:10px 15px; margin:0;
  -o-transition:0.2s; 
  -webkit-transition:0.2s;
  -moz-transition:.2s;}

a:hover{padding:15px 20px; margin:-6px; opacity:0.8;}

지원 브라우저 : 크롬 사파리 오페라

메뉴 버튼에 마우스를 올리면 플래시 메뉴와 같은 부드러운 움직임이 발생한다. transition 속성의 값으로는 어떤 속성을 몇 초간 진행할 것인지 정의한다. 어떤 속성을 transition 할 것인지 지정하지 않으면 기본 값 all이 지정되어 모든 속성을 transition 시킨다. 파이어폭스 브라우저는 3.7 버전부터 지원을 기대할 수 있다.




모듈- animation


1.
animation

.ani{ -webkit-animation:webkitFire infinite 1s linear;}

@-webkit-keyframes 'webkitFire'{
  from{ -webkit-transform:rotate(0deg);} 
  to{-webkit-transform:rotate(360deg);} 
}

지원 브라우저 : 크롬 사파리

'webkitFire'라는 사용자 정의 에니메이션이 실행 된다. 일정한(linear) 속도로 1초(1s)에 한 바퀴(0~360deg)씩 영원히(infinite) 돌게 된다.




출처 http://naradesign.net/wp/

Posted by YH데이타베이스

댓글을 달아 주세요

2011.10.27 17:49

css3의 transition속성이 있는데요. 이건 웹킷, 사파리, 크롬같은 브라우저에서만 결과를 확인 하실 수 있어요..

에니메이션 느낌이 나는 네비게이션메뉴나.. 탭메뉴를 만들때 사용하면 좋아요~

div .tab{

-webkit-transition: all 1s ease ;

-moz-transition: all 1s ease ;

transition: all 1s ease ;

}

속성(property): all

지속시간(duration): 1s, 0.5s...

형태(timing function): ease, linear, ease-in, ease-out, ease-in-out, cubic-beizer

등이 있습니다.

그럼 탭메뉴를 한번 만들어 볼까요??

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>아코디언 메뉴</title>

<style type="text/css">
.accordionMenu {
font:12px/20px 돋움;
color:#424242;
background:#fff;
padding:10px;
width:500px;
margin:0;}

.accordionMenu h1 {
margin:0;
font-size:20px;
text-shadow:2px 2px 2px #aeaeae;
}


.accordionMenu h2 {
margin:5px 0;
padding:0;
}


.accordionMenu h2 a {
font-size:15px;
display:block;
font-weight:normal;
color:#424242;
text-shadow:2px 2px 2px #aeaeae;
text-decoration:none;
margin:0;
padding:10px;
background:-moz-linear-gradient(top, #cecece, #8f8f8f);
background:-webkit-gradient(linear ,left top,left bottom,from(#cecece), to(#8f8f8f));
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
}


.accordionMenu :target h2 a,
.accordionMenu h2 a:hover,
.accordionMenu h2 a:focus,
.accordionMenu h2 a:active{
background:#2288dd;
background:-webkit-gradient(linear,left top,left bottom, from(#6bb2ff), to(#2288dd));
background:-moz-linear-gradient(top,#6bb2ff,#2288dd);
}


.accordionMenu p {
padding:0 10px;
margin:0;
height:0;
overflow:hidden;
-moz-transition:height 0.5s ease-in;
-webkit-transition:height 0.5s ease-in;
-o-transition:height 0.5s ease-in
}

.accordionMenu :target p {
overflow:auto;
height:100px;
}
</style>


</head>

<body>
<div class="accordionMenu">
<h1>아코디언 메뉴</h1>
<div id="html5" class="menuSection">
<h2><a href="#html5">HTML5</a></h2>
<p>HTML5는 HTML4을 더욱 발전시킨 마크업 언어입니다. 하지만 HTML4에서 단순히 이미지나 텍스트를 표시하던 수준에서
벗어나 화면 상에서 그림을 그리는 등 더 많은 기능을 추가한 마크업 언어입니다. 또한 HTML5는 단순히 마크업 언어로서의 기
능 뿐만 아니라 자바스크립트를 사용해 프로그램을 만들 수 있는 API까지 포함하고 있습니다. </p>
</div>
<div id="css3" class="menuSection">
<h2><a href="#css3">CSS3</a></h2>
<p>CSS는 웹 디자인이나 웹 개발에 있어서 핵심적인 요소입니다. 특히 현재 개발 중인 CSS3는 기존의 CSS에서는 할 수 없던
여러 가지 효과를 쉽게 만들 수 있고 CSS3만으로도 간단한 애니메이션을 만들 수도 있고 멋진 내비게이션을 만들 수 있기 때문
에 더욱 주목을 받고 있습니다.
</p>
</div>
<div id="api" class="menuSection">
<h2><a href="#api">API</a></h2>
<p>HTML5에는 웹 애플리케이션 제작을 위한 API들이 다양하게 제시되고 있습니다. API를 이해하기 위해서는 자바스크립트 문
법 뿐만 아니라 DOM(Document Object Model)에 대한 기본 지식이 필요합니다.</p>
</div>

</div>
</body>
</html>

브라우저 화면입니다.

아래 첨부파일을 가지고 실행해보세요~ ^-^




 

Posted by YH데이타베이스

댓글을 달아 주세요

2011.10.26 18:00

아쿠아 버튼을 요즘 많이 쓰는데요

이 버튼을 이미지가 아닌 css3만을 활용하여 만들 수 있습니다.

이버튼을 만들어볼까요?

우선 익스8버전 밑에선 보이지않는다는 ㅡㅡ;;

익스9이상이셔야 하구요.. 크롬과 사파리는 조금 차이는 날 수 있습니다. (익스9에선 Graients는 먹히지 않군요..ㅡㅡ;;)

브라우저별로 css3가 지원되는 상황을 한눈에 볼수있습니다.

http://www.findmebyip.com/litmus/#target-selector

우선 html을 작성합니다.

html5로 작성하겠습니다.


<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>아쿠아버튼만들기</title>
<style type="text/css">

.button{
width:120px;
height:24px;
padding:5px 16px 3px;
-webkit-border-radius:16px;
-moz-border-radius:16px;

-ms-border-radius:16px;
border:2px solid #ccc;
position:relative;
font-family:Arial, Helvetica, sans-serif;
font-weight:800;
color:#fff;
text-shadow:rgba(10,10,10,0.5) 1px 2px 2px;
text-align:center;
vertical-align:middle;
overflow:hidden;
}
.aqua{
background-color:rgba(60,132,198,0.8);
background-image:-webkit-gradient(linear, 0% 0%, 0% 90%,

from(rgba(28,91,155,0.8)), to(rgba(108,191,255,0.9)));
border-top-color:#8ba2c1;
border-right-color:#5890bf;
border-bottom-color:#4f93ca;
border-left-color:#768fa5;
-webkit-box-shadow:rgba(66,140,240, 0.5) 0px 3px 2px;
-moz-box-shadow:rgba(66,140,240,0.5) 0px 3px 2px;

-ms-box-shadow:rgba(66,140,240,0.5) 0px 3px 2px;

}
.button .blaze{
position:absolute;
top:3px;
left:5px;
-webkit-border-radius:8px;
-moz-border-radius:8px;

-ms-border-radius:8px;
height:10px;
width:143px;
padding:3px 0;
background-color:rgba(255, 255, 255, 0.25);
background-image:-webkot-grident(liner, 0% 0%, 0% 95%,

from(rgba(255,255,255,0.7)), to(rgba(255,255,255,0.7)));
}
.button:hover{
color:#000;
text-shadow:rgba(255, 255, 255) 0px 0px 5px;
}

</style>

<body>
<div class="button aqua">
<div class="blaze">html5</div>
</div>
</body>





여기서 보시면 css3에서만 볼수 있게되는 접두사가 나와요

-webkit-

-moz-

이것은 브라우저 별로 똑같은 결과를 만들어내려면 아직으로선 꼭 필요한 방법입니다. css 최종 규약이 완성된다면 더이상 사용하진않겠져?

가장 많이 사용하는 접두사입니다.

-webkit-

웹킷방식 브라우저(사파리나 크롬 등)

-moz-

게코 방식 브라우저(모질라 파이어폭스)

-o-

오페라 브라우저

-ms-

마이크로소프트 인터넷 익스플로러

css3에서 새로 추가된( border-radius, background-image: gradient , text-shadow, box-shadow, background-color:rgba)

요소와 속성의 내용을 숙지 후 보시면 더욱 이해가 빠를듯합니다.


Posted by YH데이타베이스

댓글을 달아 주세요

2011.09.29 17:57

폼 (form) 기본틀

<form action="https://주소" method="get 또는 post">

  <fieldset>

     <legend>폼그룹의 제목(회원가입)</legend>

  </fieldset>

</form>

 

 


 

# input - 문자 입력할수있는 박스나  체크버튼, 일반버튼등을 만들수있다.

 

 

· input type="text" - 일반검색창

· input type="password" - 비밀번호창, 입력값이 ●으로 보여진다.

   (검색창에 글씨가 들어가있게 하려면.. value 값으로 넣어두면 됨. 물론 브라우저에서 지우고 쓸수있음!!)

  

 

 

· input type="radio" - 예/아니오선택같이 하나에만 선택해야할때 사용. 원형버튼

· input type="checkbox" - 중복선택이 가능할때 사용. 사각버튼

   (체크해두는것을 기본으로 하려면 체크하려는 값에만 checked="checked")

  

 

· input type="file" - 파일첨부할때 빈 박스와, 찾아보기 버튼이 만들어짐.

  

  

· input type="submit" - 입력한 정보를 action 주소로 보내는 버튼. (버튼에 들어가는 글씨는 value값으로 넣어줌)

· input type="reset" - 입력한 정보를 취소해주는 버튼. 

· input type="button" - 일반 버튼. 확인취소 이외의 중복확인 우편번호 검색 등등... 

· input type="image" - 그림이미지가 버튼 기능함, submit 기능과 같음. (src alt값 넣어야함 )

  

 

 


 

# select option optgroup 목록상자 만들기

 

 

 

<fieldset>
 <legend>목록상자만들기</legend>
 <p><label for="local">주소</label>/p>
 <select id="local">
     <option value="">--선택--</option> <!--이런경우는 비워놔도 됨~ -->
     <optgroup label="서울특별시">
     <option value="ydp">영등포구</option>
     <option value="dj">동작구</option>
     <option value="ka">관악구</option>
     <option value="kr">구로구</option>
     </optgroup>
 </select>
 </fieldset>

 


 

# textarea 긴줄 글상자 만들기 - cols, rows값을 꼭!! 넣어줘야한다.

                                        정확한 크기는 css로, 여기서는 대강...자리만 만들면됨!

 

 

 

<fieldset>
 <legend>여러줄글상자</legend>
 <p><label for="tell">운영자에게 하고싶은말</label></p>
 <textarea cols="60" rows="3" name="tell" id="tell"></textarea>
</fieldset>

 


 

# 버튼요소 - input으로 다 되는 것들이라 잘 사용 안한다는 ;;

 <fieldset>

 <legend>버튼요소</legend>
 <button type="submit">수락</button>
 <button type="reset">다시시작</button>
 <button type="button">더보기</button>
 </fieldset>
</form>
</body>
</html>

 

 


 

# 레이블 label

 

input, select, textarea 등의 박스와 관련된 문자를 연결해주는 역할.

접근성때문에 꼭!! 넣어줘야한다.

 

· 암묵적레이블 - 문자와 박스 앞뒤로 그냥 묶음!

<label>이름<input type="text"></label>

 

· 명시적레이블 - 박스에 id 값을 지정해주고, 레이블 for값으로 id값을 넣어준다.

<label for="id값">이름</label><input type="text" name="uname" id="uname">

 

 문자를 입력하지 않고,,선택하는 input에 radio, chechbox와 select는 선택하려는 값에 value값을 꼭 넣어준다.

 

여러개중 하나만 선택해야 하는 버튼에는 name을 같게,

다중선택이 가능한 버튼은 name을 다르게,

id는 어떤경우에도 중복되면 안됨!!

 

 

**  연락처, 이메일같이 여러박스가 있는경우.

1. 첫번째 박스에만 레이블로 연결해주고, 나머지박스는 각각 title값을 준다.(←이방법을 주로 사용!)

2. 각 박스에 의미있는 단어를 만들어 연결해주고 나중에 숨긴다.

 

   <label for="cell1">연락처</label>
   <input type="text" name="cell1" id="cell1" title="연락처 앞자리" />-
   <input type="text" name="cell2" title="연락처 중간자리" />-
   <input type="text" name="cell3" title="연락처 뒷자리" />

 


[출처 : http://www.cyworld.com/dansoonjunipp/5729053]

Posted by YH데이타베이스

댓글을 달아 주세요

2011.09.28 18:11

<fieldset>

필드셋은 그룹핑할때 쓴다
form 인데 디비젼은 범용
스팬은 인라인요소?
필드셋은 폼 전용  

<legend>은 필드셋의 목적을 나타낸다

label 속성은 폼을 구조화하고 접근성을 높일 수 있는 요소이다.
각 폼 컨트롤의 연관관계와 설명을 추가하는 역할을 담당

1. label 사용하는 명시적인 방법

 <p>

     <label for="userId">
            <img src="images/main/title_id.gif" width="30" height="12" alt="아이디" />
      </label>

      <input type="text" id="userId"/>
</p>

 

2. labe 사용하는 암묵적인 방법

<p><label>

<img src="images/main/title_pw.gif" width="41" height="12" alt="비밀번호" />
<input type="password" id="userPwd"/>

</label>

</p> 

 

이렇게 하면 img를 클릭해도 해당 id를 찾아 포커스를 간다.

 

▶ 로그인 폼 mark up

<div class="login">
             <h3><img src="images/main/h3_login.gif" width="44" height="18" alt="로그인" /></h3>
    <form action="login.jsp">
                 <fieldset>
                     <legend>회원로그인</legend> 
                         <p><label for="userId">
                         <img src="images/main/title_id.gif" width="30" height="12" alt="아이디" />
                            </label><input type="text" id="userId"/>
                        </p>
                         <p><label for="userPwd"><img src="images/main/title_pw.gif" width="41"    height="12" alt="비밀번호" />
                         </label><input type="password" id="userPwd"/>
                        </p>
                        <p>
                         <input type="image" src="images/main/btn_login.gif" alt="로그인" value="로그인" />
                        </p>                      
                    </fieldset>
                </form>
                <ul class="memberInfo">
                 <li><a href="#">회원가입</a></li>
                    <li><a href="#">아이디/비밀번호 찾기</a></li>
                </ul>
               
            </div>

 

중요한건 스크립트에 의존적이지  않도록 form에서 처리하는게 젤 좋다 .



출처 : http://blog.naver.com/0131v/110107131234


-------------------------------------------------------------------------------------------
 코멘트 : form,label,legend,fieldset 에 대해서 헷갈릴 때 참고하면 좋을듯 하다!

Posted by YH데이타베이스

댓글을 달아 주세요