본문 바로가기

CSS69

CSS 단위 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) 2014. 2. 25.
CSS3 :first-line and :first-letter 문장 첫글자크게하기 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; } 제대로 된.. 2014. 2. 18.
CSS3 트랜지션 (transition) 효과 CSS3 트랜지션 (transition) 효과 트랜지션은화면의 변화나 움직을 보여주고 싶을때 쓸수있다. 사용방법은 다음과 같다 transition: property(변화시키고자 하는요소, 배경생 폰트컬러 등) duration(액션이 진행될 시간) timing-function(액션의 방법) delay(지연시간); div{ transition: color 2.5s ease-in 0;} 위는 간단한예. 브라우저마다 -moz-,-webkit-,-o-를 붙여야된다(귀찮아서 생략). 물론 IE는 지원하지 않는다. 2012. 3. 5.
CSS3 Transforms 소스 변환, 추출기 CSS3 Transforms 소스 변환,추출기 이것저것 바쁘고 빨랑사용해야 할때 쓰는 것. 각도,크기, 이동을 입력하면 각브라우저 버전에 맞게 소스가 나온나 IE도 가능하다 IE's CSS3 Transforms Translator http://www.useragentman.com/IETransformsTranslator/ 2012. 3. 5.
CSS3 엘리먼트 변형 3D (Transform 3D) 매트릭스 이용 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값을 변.. 2012. 3. 5.
CSS3 엘리먼트 변형 3D (Transform 3D) 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 .. 2012. 3. 5.
CSS3 엘리먼트 변형2D (transform) CSS3 엘리먼트 변형2D (transform) 엘리먼트를 포토샵에서 편집하지않고 마음대로 바꿀수 있다는건 참 편리한 점이다.CSS3부터 적이 가능하다.3D도 있다. 여기선 2D를 둘러본다 IE는9부터 지원한다. 기본적으로 transform 을 사용하다.그 뒤의 값으로는 ratate,scale,skew,traslate,martix가 있다. 각 브라우저마다 앞쪽에 접두사를 붙여야된다(그림 참조). 이 그림처럼 여러변형이 가능하다예제는 첫번째만 붙이고 나머지는 포스팅 편의상 간략히 transform 만 해줬다. 소스는 다음과 같다.matrix는 크기,이동,회전등 한번에 다 표현 할 수 있는것으로 조금 복잡하기만 할뿐 크게 어렵지 않다. 매트릭스를 테스트 해볼 툴도 있으니 가보자 http://sianasiat.. 2012. 3. 5.
CSS3 투명도(opacity) 그림자(shadow) 설정 CSS3 투명도(opacity) 그림자(shadow) 설정초창기 부터 주목되었던 투명도와 그림자에 대해 알아본다 투명도(opacity) 투명도를 설정함으로서 뒤의 z-inex설정에서 뒤에 엘리먼트라던가 겹친 엘리먼트를 보이게하는 등의 모습을 구현 할 수 있다.브라우저는 역시 IE가 예외 IE9는 지원한다. 단 IE8이하버전은 필터를 사용해야한다. box1 opctical 50% box2 opctical 30% 포지션은 겹치게 했다. div{ width:300px; height:150px; position:relative;} .box1{ left:100px; top:30px; background-color:#F00; opacity:.5; } .box2{ left:150px; top:-50px; backgr.. 2012. 3. 4.
CSS3 border-image 테두리 이미지 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.. 2012. 3. 4.
CSS3 라운드박스 및 박스 속성 CSS3 라운드박스 및 박스 속성 CSS3 부터는 라운드박스는 지원된다. 이미 옛부터 이야기 되었지만 여전히 문제는 IE. IE는 IE9부터 지원된다.일단 박스 속성부터 둘러보자.여기서 말하는 박스는 CSS에서 우리가 정의한 가로 세로(ex: div{ width:100px; height:100px;} )를 말하는 것이아니라 계산되어 화면에 보여진 박스를 말하는 것이다 박스 속성, 콘텐츠,마진,패딩,보더 레이아웃을짤때 우리는 계산을 잘하고 만들어야 한다 가로는 콘텐츠너비+패딩+ 보더이다. 브라우저 플러그인 파이어버그(FireBug)를 설치하고 레이아웃을 보면 쉽게 확인할수 있다. 캡처한 그림과 같이 보더도 계산된다는것을 잊지말자. 아웃라인(outline)과 보더(border) 위와 같이 보더는 박스계산에 .. 2012. 3. 4.

티스토리툴바