본문 바로가기

CSS69

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.
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.
CSS 삽입 CSS의 삽입 3가지방법으로 나뉘어진다 내부에 삽입 style type="text/css" 외부삽입 link rel="stylesheet"type="text/css" href="주소" 외부삽입 style type="text/css" @import url(주소) 내부에 삽입 외부로 부터 삽입-첫번째 위의 경우는 티스토리의 html 편집에 가봐도 확인할 수 있을 것이다. 외부로 부터 삽입- 두번째 import방식을 또다른 장점으로 분배된 여러 CSS파일을 삽입할때 편하단점이다. 이에관해선 다음링크를 참조: http://siana.tistory.com/entry/CSS-%EC%82%BD%EC%9E%85-import 위의 세가지는 head에 삽입할때이다. 인라인 스타일 이방법은 권장할만하지못하다 이터럼 직점 태.. 2008. 9. 25.
CSS 입문하기 CSS css란? css:cascading style sheet 기존의 HTML은 웹 문서를 다양하게 설계하고 수시로 변경하는데 많은 제약이 따르는데, 이를 보완하기 위해 만들어진 것이 스타일 시트이고 스타일 시트의 표준안이 바로 CSS 이다. 간단히 스타일시트라고도 한다. HTML을 이용해서 웹 페이지를 제작할 경우 전반적인 틀에서 세세한 글꼴 하나 하나를 일일이 지정해주어야 하지만, 웹 페이지의 스타일(작성형식)을 미리 저장해 두면 웹 페이지의 한 가지 요소만 변경해도 관련되는 전체 페이지의 내용이 한꺼번에 변경되므로, 문서 전체의 일관성을 유지할 수 있고 작업 시간도 단축된다. 따라서 웹 개발자들은 보다 풍부한 디자인으로 웹을 설계할 수 있고, 글자의 크기, 글자체, 줄간격, 배경 색상, 배열위치 .. 2008. 9. 25.

티스토리툴바