본문 바로가기

CSS69

CSS 선택자(selectors) - 조합 선택자 CSS 선택자(selectors) - 조합 선택자최근까지 엄청나게 발전해 온 만큼 빠진것도 넣고.. 다시 한번 둘러볼겸 포스팅 일단 예제 html을 올린다 CSS선택자 맛있는반찬 맛있게 먹어봅시다 으히히 매운꽃게탕 라면밥 카레라이스 그런데 달랑3개뿐 지금은 저녁인데ㅠㅠ 자손 선택자 A B 아주 잘 알고있는것 부모의 자손엘리먼트를 지정 div ul li{ color:#009;} 위의 것을 보면 "매운꽃게탕,라면밥, 카레라이스"가 색깔이변한다 공통 선택자 A * B구애 받지않고 모든것. * 는 모든것을 의미한다. A * B 일때는 조건이 있다. A는 상위 부모여야하고 B는 A말고 바로 직계부모를 가져야 한다. div * em{ color:#F00;} 캐스케이딩으로 순서를 생가하면 em으로 찻반째 보다 두번째.. 2011. 12. 28.
CSS 정리,관리 사이트 ProCSSor 주소는 http://procssor.com/process CSS를 정리해주는 사이트 다른거보다 설렉터 정리와 설렉터 스타일 나열방식을 정리해주는게 맘에든다 2011. 10. 10.
웹사이트 유동적 레이아웃 : 최대값과 최소값 자동완성사이트 웹사이트 유동적 레이아웃 : 최대값과 최소값 자동완성사이트 유동적 레이아웃에서 가로 너비으 최대값고 최소값을 제한해줄수 있는 걸 대부분알것이다(물론IE6는 그냥적용안됨) 어느정도 익숙하다면 Jello Mold Layout Generator를 방문하면된다. http://www.positioniseverything.net/articles/sidepages/pie-calc.php 위와같은 그림에서 위에는 가로 최소값 입력 아래는 최대값과 전체 사이트 너비를 입력하고 submit을 클릭하면 된다. 그러나 소스가 바로 나오지는 않는다. 변경된 사이트의 모습을 보여준다. 브라우저에서 사이트의 소스보기를 연후에 복사,저장하든지 사이트저장해서 수정하든지 하면 된다. 좋은점은 IE에 대한 대체 방안도 마련 되어있다는 점.. 2011. 3. 27.
웹 CSS 폰트 테스트 미리보기 사이트 typeteste http://www.typetester.org/ CSS를 다루면서 여러폰트를 사용하고 크기 색깔 마진 패딩들을 다루게 되는데 미리한번 볼수 있는 좋은 사이트가 있다. 좋은점은 위에는 우리가 흔히 사용하는 기본적인 폰트 그리고 아래는 자신이 가지고 있는 폰트가 있다. 모두테스트 가능 설정함에 따라 아래에 뜬다. 아쉬운 점이라면 한글로 못본다는점? 2011. 3. 17.
CSS3 스크롤에 움직이는 입체 이미지 오직 css3만을 사용한다. 스크롤에 따라서 움직임 본 출처는 여기다. http://www.romancortes.com/blog/pure-css-coke-can/ 필요로 사용된 이미지는 두개로 하나는 병이고 하나는 라벨 아 그리고 테스트결과 IE6 빼고 다적용됩니다. 코드는 무지무지 길다. 개인적으로 완성된 것 링크 http://sianasiatiger.cafe24.com/study/CSS3_rollingcan.html ... ... ...... html에서 아이디는 번호순대로 나오니 가운데 생략 body { margin: 0;padding: 0;overflow: hidden; } #coke { width: 510px; height: 400px; overflow: auto; } img{ border: 0.. 2010. 7. 13.
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.
간단한 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.
CSS dispay 프로퍼티 CSS dispay 프로퍼티 dispay 프로퍼티는 엘리먼트를 어떻게 보여주냐(또는 어떤 타입으로 참조:엘리먼트의 분류)를 정하는 css 프로퍼티이다. 가장대표적인 값으로 none, inline, block가 있다.이세가지부터 간단히 보자 none 영문 뜻그대로다. 보이지 않게 한다.엘리먼트가 화면에 보이지않는다. 아무것도 안보임ㅠㅠ p{display:none;} inline 인라인(inline) 엘리먼트처럼 보여준다. 즉 한줄로 보여주게 된다.예제를 보자.가장대표적으로 li의경우 사용되는 경우가 많다. 한줄로 나란히 줄서기 li{display:inline;} 이러면한줄로 나란히 줄서기이렇게 한줄로 화면에 표시될것이다 block 앞서설명한 inline과 반대로 블록(block) 엘리먼트처럼 보여준다 아래.. 2009. 10. 25.
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.

티스토리툴바