본문 바로가기

css82

CSS 고급선택자(3) CSS 고급선택자(3) 속성선택자(attribute selector) 태그에서 속성은 가장흔한예로 우리가 여기서 tittle을 예로들수있다. 보통 엘리먼트위로 마우스를 올렸을때 툴팁을 표시하는데(노란박스와 tittle의 값) 속성을 다르게 표시할 수있다 사용법은 엘리먼트[속성엘리먼트]{} a[tittle]{border: 1px dotted #999;} a[tittle]:hover{cursor: help;} 위와같이한다면 점선으로된 1pxdml 테두리 그리고 마우스를 가져갔을때 믈음표모양이 보일것이다. 2009. 8. 30.
CSS 고급선택자(2) CSS 고급선택자(2) 인접 형태 선택자(adjacent siblimg selector) h1 + p{font-weight:bold;} 제목 첫번째 문단 두반쩨 문단 인접선택자는 부모를 가지는 엘리먼트중에 가장 앞에 나오는 엘리먼트릴 지정하는것이다.따라서 첫번째 문단만 굵게 표시 된다. 제목 첫번째 문단 두반쩨 문단 2009. 8. 30.
CSS 고급선택자 CSS 고급선택자 자식선택자(child seletor) 자식 엘리먼트가 있을 경우 바로밑에 속한 자식엘리먼트가 선택되는 경우이다. 아래와 같은 경우 바같이라는 글자만 굵게 표시된다 #nav > li {font-weight:bold;} 바깥 바깥 안안안안안 바깥 바깥 아래와 같이 표현된다 바깥 바깥 안안안안안 바깥 바깥 하지만 빌어먹을 IE6이하에서는 먹혀들지않는다 전채선택자로 유사하게 흉내낼수 있다 #nav li{font-weight:bold;} #nav li *{font-weight:nomal;} 2009. 8. 30.
CSS 클래스(class), 아이디(id) 좋은이름 나쁜이름 클래스나 아이디의 이름을 부여할때 후에 고칠수 있는 점을 고려하여 명명하는것이좋다. 예로 왼쪽 메뉴를 leftNav라고 하는것보다 후에 오른족을로 변경되점을 고려하여 subNav라고 붙이는 것이좋다. 과도히 긴 이름은 좋지않다. 이름을 두가지 의미를 포함 하기 마련인데 중간에 대문자로 구분해주자 subnav 이거보단 subNav 그리고 XHTML마크업의 경우 대소문자를 구분하지만 HTML마크업의 경우 대소문자를 구별하지않는다. 2009. 8. 29.
CSS 지정순위 CSS 지정순위 선택자 지정순위 10진수환산값 style=" " 태그에 직접 삽입지정 1000 1000 #content #content{} 아이디 아이디 0200 200 #content .content{} 아이디 클래스 0110 110 div#content{} 태그지정 아이디 0101 101 #content{} 아이디 0100 100 div .content .comment{} 태그지정 클래스클래스 0021 21 div. content{} 태그지정 클래스 0011 11 div p{} 태그 태그 0002 2 p{} 태그 0001 1 지정순위가 높을수록 우선시 된다. 기본적으로 아이디>클래스>태그 예로 html이 다음과 같고 테스트 CSS p{ font-color:#ffcccc;} #Content{ font-.. 2009. 8. 29.
DOM 라운드박스 심플 먼저 올린 라운딩 박스는 가로 세로 내용물 모두 자유롭게 설정가능하다. 그런데 굳이 가로가 일정치라면 그방법대로 할필요가 없다. 이번엔 가로 사이즈가 정해진경우 목적은 태그 내용물 //아래 라운드박스 //먼저요구되는건 insertAfter 함수. insertBefore은 스크립트에서 지원되지만 insertBefore은 없다 //두함수의 기능은 insertBefore(A, B); :B 엘레먼트앞에 A를 삽입 insertAfter(A, B); :B 엘레먼트뒤에 A를 삽입 //먼저 insertAfter을 만들어준다, 원리는 insertBefore를 역이용한것이다. function insertAfter(newElement,targetElement) { var parent = targetElement.parent.. 2009. 7. 2.
dom 라운드 박스 원래 의도는 둥근박스를 위해서 의미 없는 불필요한 클래스를 여러개 지정해야 하는데...이를 자바로 따로 생성한다. 의도하고자하는 기본 html는 다음과 같고 sdsasd 사용될 html은 준비할 이미지는 box.gif(이미지 에디터 에서 제작한 커다란 라운드 박스) borders.gif(양쪽 라인)이둘. css는 .box { margin: 15px 0 0 0; padding: 5px 0 5px 0; } /* cbb 자바스크립트가 지원 안될때 */ .cbb { margin: 0 10px 0 10px; background: #FFF; padding: 5px 0 5px 0; line-height: 170%; } /* 메인박스 */ .cbb p, .cb p { margin: 0; padding: 0 5px 5p.. 2009. 7. 2.
css 초기화 코드 body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, th, td { margin : 0; padding : 0; } h1,h2,h3,h4,h5,h6 { font-size : 100%; } ol,ul { list-style : none; } address, caption, cite, code, dfn, em, strong, th, var { font-style : normal; font-weight : normal; } table { border-collapse : collapse; border-spacing : 0; } fieldset,img { border : 0; } ca.. 2009. 6. 26.
CSS 선택자 선택자를 쓰고 중괄호로 마무리한다 모두선택 *{} ex)모든 태그 속성 패딩,마진이 0 *{padding:0; margin:0;} 태그 선택자 ex)바디컬러 블랙, h1 폰트 컬러 분홍 body{background-color:#000000;} h1{color:#ffcccc;} 클래스 선택자 .class{} 지정한 클래스 이름 앞에 . ex)html은 가로 400px 패딩 50px 마진 60px .box{ width:400px; padding: 50px; margin: 60px; } 아이디 선택자 #id{} ex)html은 아랫선 대쉬 1px 그린 #box{border-bottom:#009933 dashed 1px} 2008. 10. 22.
CSS 삽입 - import css가 간단하고 짧다면 한파일에 다 설정해도 되겠지만 복잡하고 길다면 알아보기도 어렵고 후에 관리하기에도 어려움이 많을 것이다. 이에대해 import를 사용해보자. 기본 문서 html에 복잡한 css구문을 의미별로 3개로 나눈후 한css에 연결시키는 밥법이다. 가정삼아서 다음과 같이 나누었다. master.css 다른 css파일을 연결시킨다. layout.css:레이아웃 결정 color.css:폰트관리 ect.css:기타 1. 먼저html에 master.css 삽입 2.master.css에 다른 css파일들을 연결시켜준다. @import url("master.css"); @import url("layout.css"); @import url("ect.css"); 요약: 앞서 말한듯이 긴 css구문을 사용.. 2008. 9. 26.

티스토리툴바