본문 바로가기

css82

CSS3 선택자(selectors) - 유사 클래스(pseudo-class) Part1 선택자(selectors) - 유사클래스(pseudo-class) Part1 너무나도 잘아는 link, visited,active,hover는 생략한다.아래 포스팅참조 CSS 링크 스타일 기초 순서는 LoVe:HAte 를 상기 하자 CSS :tager 동적 유사 클래스 :traget 역시 위포스팅 참조 또는 좋은에제로 http://webdesignernotebook.com/examples/target.html :focus 유사클래스 엘리먼트가 화면 포커스를 깆고 있는경우이다. 예제를 보자 위는 이름을 검색하는 간단한 폼 양식이다. 아래는 적용해본 CSS :hover,같은 것처럼 사용방법에 별다른 어려움 없다. CSS 사용시 순서는 LoVe:HAte에 focus추가시 link visited hover fo.. 2011. 12. 29.
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.
CSS 에디터들 출처 http://all-iran.info/lse/infonote/webmaster/855.html 최고의 CSS 에디터(Editor)는 무엇일까? 여러 사람들이 추천해 준 것은 아래의 것이다. jEdit : 확인해보니 CSS 제작용으론 적합치 않다. 프로그래머용. Topstyle : 공짜가 아니다. Aptana : 상당히 큰 프로그램이지만 공짜다. 너무 크고 무거워서 별로다. Simple CSS : 심플하고 좋은 듯 하다 근데뭐 포토샵깔고 어도비꺼 돌리다보면...드림위버 자연스레 설치하게되니..쩝 그외 http://blueprintcss.org/ http://csswizardry.com/typogridphy/ http://www.yaml.de/ http://developer.yahoo.com/yui/ 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.
웹표준 테이블 코딩 보완 웹표준 테이블 코딩 본주소는 여기 좀더보완한다 웹표준 테이블 행과 열 행(row)이 가로이고 세로가 열(col)이다. 아래 그림참조 코딩의 개념 다시확인 thead엘리먼트는 표의 머릿부분을 tfoot는 아랬바닥을 tbody는 메인내용을 이야기한다. tfoot의 경우는 꼭 마지막에 위치한다 라는 의미보다.보다 통계수치의 혼합등을 위해사용할 떄가 많다. 특별한 의미가 없다면 굳이 사용할 필요는 없다. tfoot의 경우는 tbody앞에서 미리 끝내주어야한다. 그래도 마지막에 나온다. 아래 예가 올바른모습 간단한예 이름 성별 직업 두사람 남자와여자 웹관련 뭐시기 남 프로그래머 저시기 여 디자이너 잘 모르는 것들 다시확인 colgroup은 세로 열을 다 지칭할때 사용한다. 흔한 예 웹표준 테이블 코딩 ... ca.. 2010. 7. 13.
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.

티스토리툴바