본문 바로가기

CSS340

CSS3 라운드박스 익스플로어 (IE6,7,8) 모두적용 CSS3 라운드박스 익스플로어 (IE6,7,8) 모두적용 CSS3적용에 여전히 문제점을 가지는 IE ......에 라운딩박스의 경우여러가지방법이있다. 그 중 괜찮은것 출처는 여기 http://www.htmlremix.com/css/css-level-3-styles-in-internet-explorer-6-onwards 데모는 여기서 바로 확인 가능 http://fetchak.com/ie-css3/ 다른 방법들에 비해 쉽다. ie-css3.htc 이 파일이필요 다운은 http://code.google.com/p/curved-corner/ 소스를 알아보자 CSS3 : border-radius border-radius 는 박스의 라운드를 가능하게 해준다. 아직 이 방법이 적용 되지 않는 브라우저가 많으며 별도.. 2010. 7. 7.
jQuery 페이지 스크롤링(scrolling) 플러그인 jQuery 페이지 스크롤링(scrolling) 플러그인 클릭에따라 페이지로 가는 플러그인이다. CSS3로 구며줬고 변경가능은 페이지이동시 속도(duration)이다. 미리보는 데모 http://sianasiatiger.cafe24.com/study/Jp_scroll.html HTML 코드 네비게이션은 다음과 같이 구성한다. 아이디명, 클래스명을 잘봐두자 ↑ Prev ↓ Next Comments Reply 맨위로 콘텐츠 html소스는 다음과 같다.클래스의명을 post로 해주었다. 포스팅 1내용물,그림등 포스팅 2내용물,그림등 포스팅 3내용물,그림등 포스팅 4내용물,그림등 포스팅 5내용물,그림등 네비게이션 네비게이션은 페이지이동해도 유지하도록 고정으로 해준다. #nav-dock { position: fix.. 2010. 7. 6.
간단한 CSS3 기초 알파 배경,텍스그림자, 둥근모서리 CSS3 알파 배경,텍스그림자, 둥근모서리 css3기초 몇가지를 살펴본다.당연한 이야기지만 익스플로어에는 적용안된다. 모든예제결과는 여기서 볼 수 있다. 배경 RGBA 알파값 배경에는 3가지값을 가진다. red green blue 그리고 css3에서 알파값을 더 가진다. 즉 투명도를 표현한다. 아래는 투명도를 25%를 준것이다. .bg{background: rgba(255, 204, 204, 0.25 ); } 마지막값이 0이면 완전투명 1은 100%을 의미한다. 0.25, 0.5 0.75에 따른 결과는 그림과 같다. 또한 이것은 배경만 아니라 폰트(font), 보더(border)속성에도 적용된다. 텍스트 그림자 포토샵의 스타일 효과라고 생각하면 된다. 첫번째는 x축으로 그림자위치 두번째는y축으로 그림자위.. 2010. 6. 29.
최근 부라우저들의 CSS3,HTML5 지원현황 http://www.findmebyip.com/litmus/#target-selector 여전히 문제는 IE거의 지원을 못해주고있다.제대로 병맛. 2010. 3. 31.
CSS 텍스트 그림자 효과 (text-shadow in css3) CSS 텍스트 그림자 효과(text-shadow in css3) CSS3에서는 포토샵의 그림자효과 같은 텍스트에 여러 효과를 주는 기능이 추가되었다.추가된 기능들을 보자 텍스트 그림자(Text-shadow) W3C에 정의 참조 흔히 우리는 포토샵에서 그림자효과로 drop shadow를 사용한다. 텍스트에 그림자를두는 건데 css3로 표현 가능하다.아래와같은 효과 이에대한 코드를 보자(사파리3.0이상,파폭3.1이상,오페라9.5에서 적용된다) 예제를 통해 이그림과 같은 효과를 볼 것이다 Text-shadow css코드 가로,세로, 번짐효과, 그림자색깔, 이순서다. p{text-shadow: 2px 2px 1px #000;} 위와 같은 경우 그림자가 가로 2px서로 2px 번짐효과 2px 이렇게일어난다.그리고.. 2009. 10. 12.
CSS 고급 레이아웃 CSS 고급 레이아웃 레이아웃을 지정하는데 있어 플로트나 포지션을 지정할경우 상당히 귀찮아진다. 마진 패딩을 고려하고 일일이 지정하는것은 참귀찮은 일이다. css3에서는 원하는 모양을 단번에 나올수 있게 쉽게할수 있는 레이아웃모듈이 개발되고 있다. (월드와이드 맵고급레이아웃 모듈 http://www.w3.org/TR/css3-layout/.) 아래그림처럼 레이아웃을 꾸민다고 생각해보자 플로트나 포지션을 이용하면 아래위를 나누고 각각배치할 구역별위치를 지정해야한다. 이걸 단번에 지정하는방법이 개발되고 있다. 예제소스를보자 a b c d e f #box { display: "a b c", "d e f "; }/*위그림처럼 display 값의 위치를 지정해준모습 코드*/ div#one{position :a} .. 2009. 9. 27.
CSS 다단 레이아웃(css3 column) CSS 다단 레이아웃 여러레이아웃을 별도로 나누는것은 일일이 지정하기귀찮은 법이다.특히 같은 크기의 레이아웃으로 나눌떄는 귀찮다.다음그림과 같은경우를 보면 이걸 일일이 div태그로 정하고 class 로 이름을 달아주고 나눠줘여한다.코드는 다음과 같다. 첫번째 단입니다. 두번째 단입니다. 세번째 단입니다. columns이라고 일일이 클래스를 지정해주었다. #contents{ width:800px;} #contents div{ float:left; border-right:2px solid #000;} .columns{ padding:10px; width:200px;} CSS3 columns 이용 첫번째 단입니다. 두번째 단입니다. 세번째 단입니다. #colcontents{ width:800px; column.. 2009. 9. 25.
CSS 복수이미지사용 z축 순서(css3) CSS 복수이미지사용 z축 순서 복수이미지사용으로 재미있는 점은 그림의 위치가 겹칠경우이다. 개별에 z-index를 줄수는없지만 순서는 지정해준 순서대로다 img01,img02,img03이렇게 해주면 img01이 맨앞에 온다.예제를 보자 내용 div{ width:500px; height:450px; border:1px solid #fcc; background-image: url("./images/love01.gif"), url("./images/love02.gif"), url("./images/love03.gif"); background-repeat : no-repeat,no-repeat, no-repeat; background-position: 20px 20px, 100px 70px, 130px 180.. 2009. 9. 23.
CSS 복수이미지사용 라운드 박스(css3) CSS 복수이미지사용 라운드 박스 css3에서는 하나의 엘리먼트에 복수이미지가 사용가능하다. 월드와이드맵 참조 링크http://www.w3.org/TR/css3-background/ 간단한 예로 div엘리먼트의 양쪽에 두이미지를 쓴다고 하면 div{ background-image : url("left.png"), url("right.png"); /*콤마로 여러개를 지정한다*/ background-repeat : no-repeat, no-repeat; background-position: 0 left, 0 right, 위와 같이 ","로 여러개를 지정할수 있다.라운드박스에 적용해보자 유동 라운드박스 :: dom 유동 라운드 박스를 반드는 방법은 여러가지가 있다. 먼저 여러 코딩으로 감싸고 각각 배경그림을 .. 2009. 9. 23.
CSS 월드와이드맵 모듈별 개발 링크 CSS 월드와이드맵 CSS3모듈 현재 CSS3 개발중인각각의 링크를 걸어본다.월드와이드 맵에서는 복잡함을 고려하여 분야별로 나누어 개발하기로 했다. 여러번 소개한 선택자 모듈, 인쇄매체를 위한 페이지 모듈, 배경과 외곽선 모듈, 다단 레이아웃 모듈, 고급레이아웃 모듈, 매체조사모듈로 각각 소개한다. 선택자 모듈 : CSS3에서 추가된 선택자를 다룬다 http://www.w3.org/TR/css3-selectors/#target-pseudo 인쇄매체를 위한 페이지 모듈 : CSS를 보이는것뿐만아니라 인쇄에도 적용할 수 있도록 한다. http://www.w3.org/TR/css3-page/ 배경과 외곽선 모듈 : 한엘리먼트에 여러배경이미지 그리고 보더에도 이미지사용방법을 다룬다. http://www.w3.o.. 2009. 9. 22.