티스토리 툴바


웹.웹... 그리고..웹..
샷타이거

Recent Comment

Recent Trackback

Archive

calendar

    1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30      

Thanks for Visit My Blog! Enjoy youtself and Share information!

 <PREV 1 2 3 4 5 ... 7    NEXT>
2014/02/25 14:56 CSS/CSS3

CSS 단위

위는 절대값 아래는 상대값

단위

설명

in

인치(inch)

cm

센치미터(centimeter)
mm 밀리미터(millimeter)

pc

피카 (1피카=12포인트=1/6인치)

pt

포인트(1/72인치)

%

다른속성값에 대한비율

ex 현재폰트의 x-height
em

엘레먼트 폰트크기에상대적

px

픽셀(현 컴뷰터씬의 한 도트)

rem

root 엘리먼트에 상대적


각도와 시간

단위

설명

deg

각도0~360

grad

gradian 각도 0~400

rad

라디안 0~6.28

turn

회전수 1turn=360deg

s

1초

ms

밀리초(1/1000s)


저작자 표시
posted by 샷타이거
TAG css, CSS3, 단위
2014/02/18 19:27 CSS/CSS3

CSS3 :first-line and :first-letter 문장 첫글자크게하기

문장의 첫글자를크게하는방법으로 :first-line 와 :first-letter를 사용할것이다.

먼저 :first-letter를 이용하여 첫글자를 크게

    p:first-letter {  
        font-size: 50px;  
    }  


다음은 첫번째 줄을 굵게

 
    p:first-line {  
        font-weight: bold;  
    }  



그런데 두 문단이라면 이 두문단의 첫글짜가모두 커져버릴 것이다.
우리목표는 단첫번째껏만 선택, 적용하는 것이다.:first-child를 이용하자

    p:first-child:first-letter {  
        font-size: 50px;  
    }  
    p:first-child:first-line {  
        font-weight: bold;  
    }  


제대로 된 예제를 연습해보자. 아래와 같이 완성 할 것이다.


1. 간단한 문단설정.

    p {  
        color: #555;  
        font-family: 'Georgia', Times, serif;  
        line-height: 24px;  
    }  

2. 문단 배경을 설정한다. css3를이용한 그림자효과추가.

    p:first-child {  
        padding: 30px;  
        border-left: 5px solid #7f7664;  
        background-color: #f5f4f2;   
        line-height: 32px;  
        box-shadow:  5px 5px 0px 0px rgba(127, 118, 100, 0.2);  
        position: relative;  
    }  

3. p:first-child:first-letter로 첫글자선택후 설정

    p:first-child:first-letter {  
        font-size: 72px;  
        float: left;  
        padding: 10px;  
        height: 64px;  
        font-family: 'HominisNormal';  
        background-color: #7F7664;  
        margin-right: 10px;  
        color: white;  
        border-radius: 5px;  
        line-height: 70px;  
    }  

4. 첫번째 글자만 크게하면 어색해지니 p:first-child:first-line 선택자로 첫번째 라인도 같이강조

p:first-child:first-line { font-weight: bold; font-size: 24px; color: #7f7664; }

5. 마지막으로:after를이용 클립그림으로 장식이다.content 트릭

    p:first-child:after {  
        background: url("../images/paper-clip.png") no-repeat scroll 0 0 transparent;  
        content: " ";  
        display: inline-block;  
        height: 100px;  
        position: absolute;  
        rightright: -5px;  
        top: -35px;  
        width: 100px;  
    }  

예제확인 http://demo.hongkiat.com/css-better-paragraph/

저작자 표시
posted by 샷타이거
TAG css, CSS3, html5
2012/03/05 19:39 CSS/CSS3

CSS3 트랜지션 (transition) 효과

트랜지션은화면의 변화나 움직을 보여주고 싶을때 쓸수있다.
사용방법은 다음과 같다

transition: property(변화시키고자 하는요소, 배경생 폰트컬러 등)
               duration(액션이 진행될 시간)
               timing-function(액션의 방법)
               delay(지연시간);

div{ transition: color 2.5s ease-in 0;}

위는 간단한예. 브라우저마다 -moz-,-webkit-,-o-를 붙여야된다(귀찮아서 생략).
물론 IE는 지원하지 않는다.

저작자 표시
posted by 샷타이거
2012/03/05 19:14 CSS/CSS3

CSS3 Transforms 소스 변환,추출기 

이것저것 바쁘고 빨랑사용해야 할때 쓰는 것. 각도,크기, 이동을 입력하면 각브라우저 버전에 맞게 소스가 나온나
IE도 가능하다



IE's CSS3 Transforms Translator

http://www.useragentman.com/IETransformsTranslator/


저작자 표시
posted by 샷타이거
2012/03/05 19:00 CSS/CSS3

CSS3 엘리먼트 변형 3D (Transform 3D) 매트릭스 이용

매트릭스를 이용해 3D변화는 무궁무진하다. 하지만 2D에 비해 좀 어여운게 사실. 삼각함수 회전 정도는 이해한다는 가정에 포스팅한다.매트릭스를 바로 체험 해볼수 있도록 링크를 걸어두었다. (웹킷기반 브라우저만 지원)


http://sianasiatiger.cafe24.com/study/matrix3dexplorer/matrix3dexplorer.html
스크롤바를 조절하여 결과를 볼 수 있을 것이다. 이제 하나하나 살펴보자.
4열 은 투시도법이다. 그외 것은 아래설명

1. 디폴트 : 아무변화 없는 그대로다. 단위 행렬이다.

  [1,0,0,0],
  [0,1,0,0],
  [0,0,1,0],
  [0,0,0,1],

2. 크기변환 : 대각선의 S값을  변형시킨다

  [s,0,0,0],
  [0,s,0,0],
  [0,0,s,0],
  [0,0,0,1]

3.회전: 순서대로 X,Y,Z축 회전 한에 대한 회전하려면 4개의 값은 알아야한다. 각도는 라디안이다

  [1,0,0,0],
  [0,cos(a), sin(-a), 0],
  [0,sin(a), cos( a), 0],
  [0,0,0,1]

  [cos( b), 0, sin(b),0],
  [0,1,0,0],
  [sin(-b), 0, cos(b), 0],
  [0,0,0,1]

  [cos(c), sin(-c), 0, 0],
  [sin(c), cos( c), 0, 0],
  [0,0,1,0],
  [0,0,0,1]


4. 이동 : 맨아래 행이다. 순서는 X,Y,Z

  [1,0,0,0],
  [0,1,0,0],
  [0,0,1,0],
  [tx,ty,tz,1]

이를 이용한 예제는 아래에서 보자. hrml은 아이디 #stage 의 div와  거기에 img 엘리먼트 5개가 전부다.
http://www.eleqtriq.com/wp-content/static/demos/2010/css3d/matrix3dgallery.html?iframe=true&width=850&height=626

div#stage{ -webkit-perspective: 600px; }

img { -webkit-transition-property: -webkit-transform;
      -webkit-transition-duration: 0.7s; 
	  -webkit-transform: matrix3d(0.7109, 0, -0.703279,
	                              0, 0, 1, 0, 0, 0.703279,
				      0, 0.7109, 0,
				      0, 0, 0, 1); 
	  -webkit-box-reflect:below 15px -webkit-gradient(linear,
                              left top, left bottom,
	                      from(transparent),
                              color-stop(0.7, transparent),
                              to(#ff0000)); 
     }
						  
img:hover { -webkit-transition-property: -webkit-transform;
            -webkit-transition-duration: 0.7s; 
	    -webkit-transform: matrix3d(1, 0, 0, 0,
                                        0, 1, 0, 0,
                                        0, 0, 1, 0, 
                                        0, 0, 200, 1); 
          }


저작자 표시
posted by 샷타이거
2012/03/05 17:23 CSS/CSS3

CSS3 엘리먼트 변형 3D (Transform 3D)

3D엘리먼트를 둘러보자 먼저 믿기지않을 정도의 예제를 보자. IE, 오페라는 지원하지 않는다. 변형을 이용한 CSS3만으로 만들어진 애니메이션
http://sianasiatiger.cafe24.com/study/css3butterfly/butterfly.html

Function Description
matrix3d
(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)
Defines a 3D transformation, using a 4x4 matrix of 16 values
translate3d(x,y,z) Defines a 3D translation
translateX(x) Defines a 3D translation, using only the value for the X-axis
translateY(y) Defines a 3D translation, using only the value for the Y-axis
translateZ(z) Defines a 3D translation, using only the value for the Z-axis
scale3d(x,y,z) Defines a 3D scale transformation
scaleX(x) Defines a 3D scale transformation by giving a value for the X-axis
scaleY(y) Defines a 3D scale transformation by giving a value for the Y-axis
scaleZ(z) Defines a 3D scale transformation by giving a value for the Z-axis
rotate3d(x,y,z,angle) Defines a 3D rotation
rotateX(angle) Defines a 3D rotation along the X-axis
rotateY(angle) Defines a 3D rotation along the Y-axis
rotateZ(angle) Defines a 3D rotation along the Z-axis
perspective(n) Defines a perspective view for a 3D transformed element

3D를 생각하면 y축이 더해진것이다.
하나하나 설명하기보다 아래 데모로 테스트 해보는것이 이해하기쉬울것이다. 단 그전에
perspective를 알아야 한다 즉 원근법인데 아래 그림을 참조하자

perspective를 설정하여 두 엘리먼트 사이의 입체간격을 지정한다.perspective-orgin은 2D 변형에서 살펴본것과 같이 중심점이다. 중심점에서 얼마만큼 떨어지냐를 정한다. 값은 flat과 preserve-3d로 두가지가있다 flat은 부모공간과 평평하게 놓는것이고, preserve-3d는 3d에서 독립적인것이다

위의 것들을 일일이 예제로 들기보다 직접 이 툴로 어떤것들을 표현 할 수 있는지 확인 해보는것이 편할듯하다.
웹킷기반 브라우저로만 확인가능하다.
이 툴에서 안에 있는 태양그림을 포함하는 것이 #inner이고 바깥이 #outer이다 (그림을 클릭하면 된다)
http://sianasiatiger.cafe24.com/study/css3dexplorer/css3dexplorer.html

위와같이 만들어본 것 소스는 다음과 같다.

<div id="outer>
 <div id="inner">생략</div>
</div>
#inner{-webkit-transform: 
                   perspective(275)
                   translate3d(16px, 30px, 59px)
                   scale3d(1.35, 1.25, 1.5)
                   rotate3d(23, 18, 41, 21deg);
       -webkit-transform-origin: 50% 50% 50%;
       -webkit-transform-style: preserve-3d;
      }

더욱 많은 예제를 보고싶다면 여기로 http://ugpapa.tistory.com/271


저작자 표시
posted by 샷타이거
2012/03/05 13:54 CSS/CSS3

CSS3 엘리먼트 변형2D (transform)

엘리먼트를 포토샵에서 편집하지않고 마음대로 바꿀수 있다는건 참 편리한 점이다.CSS3부터 적이 가능하다.3D도 있다. 여기선 2D를 둘러본다 IE는9부터 지원한다.
기본적으로 transform 을 사용하다.그 뒤의 값으로는 ratate,scale,skew,traslate,martix가 있다.
각 브라우저마다 앞쪽에 접두사를 붙여야된다(그림 참조).

이 그림처럼 여러변형이 가능하다

예제는 첫번째만 붙이고 나머지는 포스팅 편의상 간략히 transform 만 해줬다.
소스는 다음과 같다.matrix는 크기,이동,회전등 한번에 다 표현 할 수 있는것으로 조금 복잡하기만 할뿐 크게 어렵지 않다. 매트릭스를 테스트 해볼 툴도 있으니 가보자
http://sianasiatiger.cafe24.com/study/css3matrix2d/matrix2dExplorer.html

<div></div>
<div id="scale">75%로 축소</div>
<div id="skew">가로 30도 세로 20도</div>
<div id="translate">호버시 가로10px ,세로 20px이동</div>
<div id="rotate">20도 회전</div>
<div id="matrix">sclaeX,skewX,skewY,sclaY, X이동, Y이동</div>
div{ float:left; width:140px; height:140px; 
     background-color:#666; margin:10px;
	 }
#scale{ -webkit-transform: scale(.75);
	-moz-transform: scale(.75);
	-o-transform: scale(.75) ;
        -ms-transform: scale(.75) ;
	transform: scale(.75) ;
	/*값은 %*/
	}
#skew{ 
       transform: skew(30deg,20deg) ;
	/*x,y시계방향으로 돌릴각도*/
	}
#translate:hover{
        transform: translate(10px,20px) ;
	/*x,y,이동할거리*/
	 }
#rotate{
        transform: rotate(20deg);
	/*시계방향 회전각도*/
	}
#matrix{	
        transform:matrix(0.5,0.5,0,1,100,0);
        /*세로크기, skewX,skewY,세로크기, 가로이동, 세로이동*/
        } 

결과는 아래그림과 같다.

직접 확인 하려면 여기 http://sianasiatiger.cafe24.com/study/css3-transfom2d.html

한가지 깜박했는데 transform-origin로 회전,움직임등의 중심점을 정할수 있다.모퉁이가 아니라 중심점에서 x,y이동임을 주의할것. 소스는 아래와 같으니 참고

div{transform-origin: 0, 30%;}


저작자 표시
posted by 샷타이거
2012/03/04 23:00 CSS/CSS3

CSS3 투명도(opacity) 그림자(shadow) 설정

초창기 부터 주목되었던 투명도와 그림자에 대해 알아본다

투명도(opacity)

투명도를 설정함으로서 뒤의 z-inex설정에서 뒤에 엘리먼트라던가 겹친 엘리먼트를 보이게하는 등의 모습을 구현 할 수 있다.브라우저는 역시 IE가 예외 IE9는 지원한다. 단 IE8이하버전은 필터를 사용해야한다.

<div class="box1">box1 opctical 50%</div>
<div class="box2">box2 opctical 30%</div>

포지션은 겹치게 했다.

div{ width:300px; height:150px; position:relative;}
.box1{ left:100px; top:30px;
       background-color:#F00;
       opacity:.5;
     }
.box2{ left:150px; top:-50px;        
       background-color:#00F;        
       opacity:.3;
     }


투명도 쓸때 생각할것

1. 투명도는 누적되어 나타난다. 첫번째 박스는 50% 두번째 박스는 30%이다.
2. 투명도는 자식 엘리먼트에도 역시 적용된다. 자식엘리먼트는 부모것을 그대로 받아들이지 다시 원래대로 돌릴 수 없다.

문제의 IE8이하 버전을 해결할 필터를 이용한 방법은 다음과 같다.

#IE{ background-color:#00F;
     filter: alpha(opacity=75); }

투명도로 0~100%를 나타낸다.

그림자(shadow)

텍스트 그림자 효과와 같다. 좀더 옵션이 있다. IE는 IE9부터 지원한다
값은 색깔 가로 옵셋, 세로 옵셋, 블루어 효과, 그리고 마지막 값은 안쪽으로 그림자 옵션이다(inset)

.box3{ background-color:#090;
       box-shadow:#000 15px 15px 10px;
	 }
.box4{ background-color:#090;
       box-shadow:#C00 15px 15px 30px
	   ,#000 10px 10px 3px;
	 }
.box5{ background-color:#090;
       box-shadow:#000 15px 15px 10px inset;
	 }   
결과는 여기서 확인 http://sianasiatiger.cafe24.com/study/css3-box_03.html
첫번째는 간단한 적용한것. 마지막은 안으로 한 것이다.
두번째와 같이 여러개를 줄수도 있다. 여기서 먼저 설정해준것이 맨위에 보인다.


저작자 표시
posted by 샷타이거
2012/03/04 16:48 CSS/CSS3

CSS3 border-image 테두리 이미지

라운드 박스를 만들 수 있을 뿐만 아니라 이제는 이미지 까지 가능하다.

일단 필요한 것은 정사각형 이미지

이 이미지의 귀퉁이가 꾸며줄것이고 가운데는 각 변을 반복할 것이다. 이 그림 사이즈는 90px X 90px이다
html은 생략 h2엘리먼트에 아무글이나 쓰자. 그리고 CSS는 다음과 같다. 브라우저 마다 다르므로 모질라,웹킷속성도 지정했다. 좀더 참조할려면 여기 http://www.w3schools.com/cssref/css3_pr_border-image.asp

h2{
width:200px;
border-width:30px;
-moz-border-image:url(../images/flower.jpg) 30 round; 
-webkit-border-image:url(../images/flower.jpg) 30 round; 
border-image:url(../images/flower.jpg) 30 round;
}

결과이미지 여기서 주목할부분은 보더(border)의 이미지라는 점이다 따라서 보더와 관련한 CSS 속성을 정해주지 않으면 나타나지 않는다. 보더는 레이아웃, 박스 크기에 영향주므로 보더를 사용아 적절한지 심각히 고려해보고 border-image를 사용해야 할 것이다.


위에서 border-width:15px; 로 정해준것은 이미지를 좀더작개 하기위함이였다. 이미지 크기가 90px, 따라서 3으로 나누면 각변,모서리는 30px로 나올 것이다  이걸 반으로 나누어 15px로 잡았으니 1/2크기로 이미지가 나타나는 것이다.결과물은 세세하다.

각 요소 들을 살펴보면 처음에는 이미지 주소, 두번째는 마진 패딩과 같은  오른쪽 시계방향으로 이미지 옵셋을 결정한다. 마찬가지로 한번에 정하면 네 변모두 동일시 되며 각기 지정할 수도 있다.

마지막  옵션은 다음 세가지다.
1)stretch : 기본값으로 이미지가 박스의 너비나 높이에 맞게 이미지 스케일을 조정한다.


2)repeat : 말그대로 반복시킨다. (가로 세로 길이 무시)

3)round : 반복하지만 엘리먼트 가로세로에 정확하게 맞게 정한다.

적용 할 이미지의 가로,세로 가운데 반복되는 부분은 작을 수록 좋다. repeat의 경우는 정확히 맞지 않기에 문제가 있고, round,repeat의 경우는 이미지 크기가 따라 이미지 비율이 깨지기 때문이다.(확대해서 이미지를 관찰해보자). 그리고 역시 IE에서는 아예 지원하지 않는다.

저작자 표시
posted by 샷타이거
2012/03/04 12:58 CSS/CSS3

CSS3 라운드박스 및 박스 속성

CSS3 부터는 라운드박스는 지원된다. 이미 옛부터 이야기 되었지만 여전히 문제는 IE. IE는 IE9부터 지원된다.일단 박스 속성부터 둘러보자.여기서 말하는 박스는 CSS에서 우리가 정의한 가로 세로(ex: div{ width:100px; height:100px;} )를 말하는 것이아니라 계산되어 화면에 보여진 박스를 말하는 것이다

박스 속성, 콘텐츠,마진,패딩,보더

레이아웃을짤때 우리는 계산을 잘하고 만들어야 한다 가로는 콘텐츠너비+패딩+ 보더이다. 브라우저 플러그인 파이어버그(FireBug)를 설치하고 레이아웃을 보면 쉽게 확인할수 있다.

캡처한 그림과 같이 보더도 계산된다는것을 잊지말자.

아웃라인(outline)과 보더(border)

위와 같이 보더는 박스계산에 계산된다 하지만 아웃라인은 계산되지않는다 아웃라인은 이런점에서 계산하기에 좋지만 단점은 아웃라인이란 단어그대로 엘리먼트 전체를 감싸기만 하지, border-bottom 처럼 한쪽 면을 지정할 옵션이 없다는 것이 단점이다. 그리고 아웃라인은 보더화 함께 사용할시 보더 효과 다음에 나타난다.

overflow-x, overflow-y

세로 계산은 컨텐츠의 내용을 다보여줄 길이를 반영한다.이때 overflow로 제어할수 있는건 알테고 CSS3부터는 x,y로 별도 지정이 가능해졌다.

예제를 보려면 여기로가보자
http://www.w3schools.com/cssref/playit.asp?filename=playcss_overflow-y&preval=hidden

CSS3 라운드박스 border-radious

이미 CSS3초창기부터 잘알려져 있다. 근래의 대부분의 브라우저가 지원하지만 IE는 9부터 지원한다. 또한 브라우저마다 버전상 지원여부가 있기에 아직 약간의 모질라,웹킷 별도 지정을 필요로 한다고 본다.

아래 그림 버전까지는 모질라, 웹킷의 지정을 별로로 필요로한다

border-radious 지원 현황. 이브라우저는 별도 지정없이 바로 사용가능하다
<div id="RoundBox">THIS IS THE TEST</div>
위는 html 아래는 css코드
#RoundBox{ 
width:200px;
height:100px;
padding:15px;
background-color:#CCC;

-moz-border-radius: 21px; /*모질라*/
-webkit-border-radius: 21px; /*웹킷*/
/*IE9+,FF4+,chrome,Safari5,+opera*/
border-radius: 21px;
}

결과는 여기서 확인할 수있다 http://sianasiatiger.cafe24.com/study/css3-box.html
마지막으로 박스를 마음껏 만들어볼 수 있는 장소 http://www.cssportal.com/css3-rounded-corner

덧)CSS3 포스팅때 마다 느끼는거지만..IE는 정말 귀찮은존재다. 거의 사라지는 추세지만 IE6를 사용하는사람이이  더러있고...또 CSS3 "그나마" 마음놓고 사용할  IE9부터이다. IE6가 사라진 기간을 생각해보자 끔직하다...

저작자 표시
posted by 샷타이거