본문 바로가기

전체 글229

CSS3 선택자(selectors) - 유사클래스(pseudo-class) Part2 선택자(selectors) - 유사클래스(pseudo-class) Part2 :empty 공백 유사클래스이다. 엘리먼트안에 아무것도 없어야 한다. div크기만 정해줬고 배경색을 지정했다. div{width:100px; height:100px;} div:empty{ background:#000;} :root 문서의 최상위 엘리먼트 html과 같다고 보면 된다. 왜 생겼는지 확신하지못하겠지만 스타일에서 html 지정시 충돌하는점을 방지하기위해서라 생각된다. :only-child 유일자식으로 자식이 하나밖에 없을때 유용하다. 첫번째 자식이고 두번째 자식이므로 적용안됨 자식하나뿐임 아래와 같이 사용하면 자식 엘리먼트에 하나뿐임에 적용된다. li:only-child {color: #F00;} :only-of-ty.. 2011. 12. 29.
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.
웹표준을 어떻게 생각하는가? 웹표준을 어떻게 생각하는가? 웹표준에 대한 생각들을 다음에 달아보자.출처는 웹스탠다드포럼 http://cssdesign.kr/forum/viewtopic.php?pid=19094#p19094 웹 표준 뭐라고 생각하세요? 웹 표준 뭐라고 생각하세요? HTML 시멘틱마크업,CSS오류없슴, '정보'와 '꾸밈(장식)', '기능'의 역할요소를 구분 웹 표준 어떻게 생각하세요? 현재 웹 설계의 필수요소. 웹 표준의 장점은 뭘까요? 역할분담과 알아볼수 있는 체계의 명확화. 웹표준을 지킴으로서 검색기능의 향상, 명확한 역할 구분,분담이 이루어진다. 예로 내가한작업을 넘겨줄 때도 이 규약을 지킴으로서 알기쉽다. 또한 접근성향상 웹 표준의 단점은 뭘까요? 아직까지 시간이 지나도 웹표준에 대한 이해 그리고 공통적인 개념이 .. 2011. 6. 30.
웹사이트 유동적 레이아웃 : 최대값과 최소값 자동완성사이트 웹사이트 유동적 레이아웃 : 최대값과 최소값 자동완성사이트 유동적 레이아웃에서 가로 너비으 최대값고 최소값을 제한해줄수 있는 걸 대부분알것이다(물론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.
3·1절 (三一節, 31절) 기념 다음 플래시 로고 3·1절 (三一節, 31절) 기념 다음 플래시 로고 drag&drop으로 심플하게 플래시로 기념한 로고 소스는 다음과 같다 2011. 3. 1.