css82 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. CSS :tager 동적 유사 클래스 CSS :tager 동적유사클래스 (css3) 사용자가 클릭할 경우의 원본의 부분을 강조하기 위한 재미있는 새로운 방법. 필요한것은 클릭해야하니 링크, 그리고 효과가 지정될 엘리먼트, 그리소 css 설정이다. 예를들어보자 클릭하게되면 지장된곳의 상태가 css에서 지정한것으로 바뀐다.예제를 보자 먼저 여기를클릭하시오 다음 여기를클릭하시오 먼저 여기 배경색이 빠뀜 폰트크기가 바뀜 css는 다음과 같이 #first:target{ background: #ffff7e; } #second:target{ font-size:25px;} 첫번쪠 지정한 곳은 배경색이바뀐다. 두번째 지정한곳은 크기가 바뀐다. 이런 target 은 한페이지내에 링크를 걸어둘경우 선택되었을떄 특별히 주목받도록 변경시킬때 사용된다. 직접예제를 .. 2009. 9. 22. CSS :nth-last-child 유사클래스(css3) CSS :nth-last-child 유사클래스 이외.. :nth-child를 봤다면 :nth-last-child 도 어렵지않다. 아니똑같다.LAST가 붙은 만큼 뒤에서 세어주면 된다. 간다한은 예 li:nth-last-child(2n){ font-size:20px;} /*뒤에서 꺼꾸로 짝수번쨰 폰트사이즈 20px*/ 나머지 ㅁ유사한~유사클래스를 마저 보자 :only-child :only-child이건 only 붙은 만큼 유일한 자식이 있을경우만 선택된다,예로 div:only-child라 했을 경우 이건 유일하니 선택됨 첫째 자식 또한명 자식 이다보니 선택안됨 :last-child :first-child의 반대이다.:first-child는 자식 첫번째 껄 선택한다.반대로 :last-child는 마지막 자식.. 2009. 9. 18. CSS :nth-child 유사클래스(css3) CSS :nth-child 유사클래스 순차적 자식선택자이다. 자식선택자중 li라던가 table의 tr태그에 쓰이게 되는데 예제를 보자 홀수 짝수 홀수 짝수 이표는 홀수의 번쨰의 경우 표의 색깔을 #FF9999 로 한경우이다. 이렇게 할경우 소스는 다음과 같다. 홀수 짝수 홀수 짝수 .odd{background-color:#ff9999;} .even{background-color:#ffcccc;} 이와칸이 별도로 클래스를 지정해주고 그에 맞게 색을 지정하게 해주어야한다. 표나, 리스트의 행열이 적으면 간편하나 길면 일일이 클래스 지정해주기가 귀찮아 진다.특히 통계자료에 쓰일 표같은 경우는 더욱 그렇다. 이같은 점을 쉽게 사용할 수 있도록 하는 방법이 :nth-child를 이용하는것이다.사용방법은 다음과 같.. 2009. 9. 18. CSS 간접 선택자(css3) CSS 간접 선택자(General selector) 간접 선택자는 엘리먼트 뒤에 나오는 모든 엘리먼트를 지정할때 사용한다. E ~ F{font-size:20px;} /*F element preceded by an E element (E 엘리먼트가 F엘리먼트보다 앞에있다.*/ h1 ~ p{} 이렇게 지정하면 h1 뒤에 p엘리먼트가 선택된다 하지만 다른 엘리먼트에 종속되어있는 엘리먼트는 선택되지 않는다.예제를 보자. 앞서있는 엘리먼트 어쩌고 저쩌고 어쩌고 여긴선택안됨 저쩌고 h1 ~ p{font-size:20px;} 결과는 다음과 같이 된다 앞서있는 엘리먼트 어쩌고 저쩌고 여긴선택안됨 어쩌고 저쩌고 위와 같이 div엘리먼트안에 p 엘리먼트는 선택되지않는다. 2009. 9. 17. CSS 인접 선택자(css3) CSS 인접 선택자(Adjacent selector) 인접선택자는 엘리먼트 바로다음에 오는 엘리먼트를 지정하는 방법이다. 사용방법은 다음과 같다. E + F{font-size:30px;} /*F element immediately preceded by an E element (F엘리먼트 다음 바로 붙어오는 E엘리먼트*/ 예를 들어html이 다음과 같을 경우 기준이요 선택되는것은 여기 여기는 선탣안됨 여기도 선탣안됨 h1 + p{font-size:30px;} /*"선택되는것은 여기" 이 텍스트의 폰트크기가 30px이 된다.*/ h1 다음에 오는 엘리먼트 첫번쨰 엘리먼트p만 폰트의 크기가 30px이 된다. 2009. 9. 17. CSS 자식 선택자(css3) CSS 자식선택자(Child selector) 자식선택자는 엘리멘트 하위에 엘리먼트를 선택하는 것이다. 방법은 다음과 같다 E > F{font-size:30px;} /*an F element child of an E element( F는 E 의 자식엘리먼트이다*)/ 예로"div#box >div" 이의미는 box라는 아이디를가진 div엘리먼트에 속한 div엘리먼트를 선택하는 것이다. 그러면 div#box div 자손선택자와 타이점은 무엇인가? 자식은 말그대로 아들(child) 그엘레먼트의 바로 하위에만을 의미한다. 하지만 자손은 그하위에 모든 엘리먼트를의미한다. 예를 보자 여기는 바로아래 자식이다 여기는 자시이아닌 손자이다 여기도 자식이아닌 손자(자손)이다. css는 다음과 같다. div#box p{ fo.. 2009. 9. 17. CSS 브라우저별 지원여부 사용하는 브라우저를 선택한후에 아래에 가서 테스트 http://www.css3.info/selectors-test/ 2009. 9. 16. 이전 1 2 3 4 5 6 7 8 9 다음
