CSS 고급선택자(2)

CSS 2009.08.30 10:21

CSS 고급선택자(2)

인접 형태 선택자(adjacent siblimg selector)

h1 + p{font-weight:bold;}

제목

첫번째 문단

두반쩨 문단

인접선택자는 부모를 가지는 엘리먼트중에 가장 앞에 나오는 엘리먼트릴 지정하는것이다.따라서 첫번째 문단만 굵게 표시 된다.

제목

첫번째 문단

두반쩨 문단


설정

트랙백

댓글

CSS 고급선택자

CSS 2009.08.30 10:14

CSS 고급선택자

자식선택자(child seletor)

자식 엘리먼트가 있을 경우 바로밑에 속한 자식엘리먼트가 선택되는 경우이다.

아래와 같은 경우 바같이라는 글자만 굵게 표시된다

#nav > li {font-weight:bold;}

아래와 같이 표현된다

하지만 빌어먹을 IE6이하에서는 먹혀들지않는다 전채선택자로 유사하게 흉내낼수 있다

#nav li{font-weight:bold;}
#nav li *{font-weight:nomal;}

설정

트랙백

댓글

CSS 클래스(class), 아이디(id) 좋은이름 나쁜이름

CSS 2009.08.29 15:57
클래스나 아이디의 이름을 부여할때 후에 고칠수 있는 점을 고려하여 명명하는것이좋다.
예로 왼쪽 메뉴를 leftNav라고 하는것보다 후에 오른족을로 변경되점을 고려하여 subNav라고 붙이는 것이좋다.
과도히 긴 이름은 좋지않다.
이름을 두가지 의미를 포함 하기 마련인데  중간에 대문자로 구분해주자
 subnav 이거보단 subNav

그리고 XHTML마크업의 경우 대소문자를 구분하지만 HTML마크업의 경우 대소문자를 구별하지않는다.
css

설정

트랙백

댓글

CSS 지정순위

CSS 2009.08.29 15:01

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-color:#ff9999;}

이라면 p의 값#ffcccc은 무시되고 #ff9999가 적용될것이다.


설정

트랙백

댓글

css 초기화 코드

CSS 2009.06.26 21:07
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; }
caption,th { text-align : left; }
q:before, q:after { content :''; }
a:link{ text-decoration:none;}
a:visited{text-decoration:none;}
a:hover{text-decoration:none;}
a:active{text-decoration:none;}
css

설정

트랙백

댓글

CSS 선택자

CSS 2008.10.22 17:34
선택자를 쓰고 중괄호로 마무리한다

모두선택 *{}

ex)모든 태그 속성 패딩,마진이 0
*{padding:0; margin:0;}

태그 선택자

ex)바디컬러 블랙, h1 폰트 컬러 분홍
body{background-color:#000000;}
h1{color:#ffcccc;}

클래스 선택자 .class{}

지정한 클래스 이름 앞에 .

ex)html은  <div class="box" ></div> 가로 400px 패딩 50px 마진 60px
.box{
width:400px;
padding: 50px;
margin: 60px;
}

아이디 선택자 #id{}

ex)html은  <p id="box" ></p> 아랫선 대쉬 1px 그린
#box{border-bottom:#009933 dashed 1px}


css

설정

트랙백

댓글

CSS 삽입 - import

CSS 2008.09.26 11:01

css가 간단하고 짧다면 한파일에 다 설정해도 되겠지만 복잡하고 길다면 알아보기도 어렵고 후에 관리하기에도 어려움이 많을 것이다.

이에대해 import를 사용해보자.

기본 문서 html에 복잡한 css구문을 의미별로 3개로 나눈후 한css에 연결시키는 밥법이다.

가정삼아서 다음과 같이 나누었다.
master.css 다른 css파일을 연결시킨다.
layout.css:레이아웃 결정
color.css:폰트관리
ect.css:기타

1. 먼저html에 master.css  삽입
<link rel="stylesheet" type="text/css"  href="master.css"/>

2.master.css에 다른 css파일들을 연결시켜준다.
@import url("master.css");
@import url("layout.css");
@import url("ect.css");

요약: 앞서 말한듯이 긴 css구문을 사용하면 관리 수정하기에 불편함이 있다.
        위처럼한다면 각각의 css에 의미를 두어 알아보기도 쉽고 수정하기도 편하다는
        장점이 있다. 과도한 하지만 링크는 금물이다 만약 master.css에 너무많은 css
       파일을 링크시킨다면 느려지고 과부하가 걸릴것이다.때에따라 적절히 사용하자.




css

설정

트랙백

댓글

CSS 삽입

CSS 2008.09.25 13:30

CSS의 삽입

3가지방법으로 나뉘어진다

  1. 내부에 삽입 style type="text/css"
  2. 외부삽입 link rel="stylesheet"type="text/css" href="주소"
  3. 외부삽입 style type="text/css" @import url(주소)

내부에 삽입

<style type="text/css">
<!--
.body{background-color:#000000;}
-->
</style>

외부로 부터 삽입-첫번째

<link rel="stylesheet" type="text/css" href="layout.css" />

위의 경우는 티스토리의 html 편집에 가봐도 확인할 수 있을 것이다.

외부로 부터 삽입- 두번째

<style type="text/css"> @import url(layout.css);</style>

import방식을 또다른 장점으로  분배된 여러 CSS파일을 삽입할때 편하단점이다.
이에관해선 다음링크를 참조:
http://siana.tistory.com/entry/CSS-%EC%82%BD%EC%9E%85-import

위의 세가지는 head에 삽입할때이다.

인라인 스타일

이방법은  권장할만하지못하다

<p style="color:gray........ect"> 이터럼 직점 태그에 바로 적용하는 방법인데 웹표준을 지향하는 현재로썬 콘텐츠와 스타일 구분의 명확도가 떨어진다는 점에서 좋지않다.

css

설정

트랙백

댓글

CSS 입문하기

CSS 2008.09.25 13:11

CSS

css란?

css:cascading style sheet

기존의 HTML은 웹 문서를 다양하게 설계하고 수시로 변경하는데 많은 제약이 따르는데, 이를 보완하기 위해 만들어진 것이 스타일 시트이고 스타일 시트의 표준안이 바로 CSS 이다. 간단히 스타일시트라고도 한다. HTML을 이용해서 웹 페이지를 제작할 경우 전반적인 틀에서 세세한 글꼴 하나 하나를 일일이 지정해주어야 하지만, 웹 페이지의 스타일(작성형식)을 미리 저장해 두면 웹 페이지의 한 가지 요소만 변경해도 관련되는 전체 페이지의 내용이 한꺼번에 변경되므로, 문서 전체의 일관성을 유지할 수 있고 작업 시간도 단축된다. 따라서 웹 개발자들은 보다 풍부한 디자인으로 웹을 설계할 수 있고, 글자의 크기, 글자체, 줄간격, 배경 색상, 배열위치 등을 자유롭게 선택하거나 변경할 수 있으며 유지·보수도 간편하게 할 수 있다. 각기 다른 사용자 환경에서 동일한 형태의 문서를 제공한다는 이점도 있다. CSS로 만들어진 문서는 사용자들의 브라우저 환경에 따라 홈페이지가 다르게 나타나는 일이 없고 어느 환경에서나 제작자가 의도한대로 그 효과가 전달된다

www.w3.org

1. CSS의 삽입

3가지방법으로 나뉘어진다

  1. 내부에 삽입 style type="text/css"
  2. 외부삽입 link rel="stylesheet"type="text/css" href="주소"
  3. 외부삽입 style type="text/css" @import url(주소)

자세한 설명은 여기에 링크
http://siana.tistory.com/entry/CSS-%EC%82%BD%EC%9E%85

2.선택자(selector)

선택자를 쓰고 중괄호로 마무리한다

태그

티그명후에 중괄호

클래스(class)

.을 쓰고 이름 적고 중괄호

하위그룹은 띄워서

아이디(id)

#을 쓰고 이름 적고 중괄호

하위그룹은 띄워서

그룹

,로 중복선탣이 가능하다

전채

*로 모두 선택

상속

  1. 아이디와 클래스가 충돌할때는 아이디가 우선시된다
  2. 아이디는 중복사용이 불가능하다 따라서 특정설정시 용이하다
  3. 클래스는 다중사용이 가능하다 따라서 일관성을 위할 때 용이하다
  4. 아이디 사용이나 클래스 사용시 앞에 명시화하기 위해 삽입된 태그를 적어주자

간단하게만 소개했다 다음은 하나하나 자세히 살펴보자

css

설정

트랙백

댓글