CSS 선택자(selectors) - 조합 선택자

CSS 2011.12.28 21:26



CSS 선택자(selectors) - 조합 선택자

최근까지 엄청나게 발전해 온 만큼 빠진것도 넣고.. 다시 한번 둘러볼겸 포스팅

일단 예제 html을 올린다


 <h1>CSS선택자</h1>  
 <div> 
  <h2>맛있는반찬</h2> 
  <p>맛있게 먹어봅시다</p> 
  <p>으히히</p> 
 <ul>
  <li><em>매운</em>꽃게탕</li> 
  <li>라면<em>밥</em></li> 
  <li><em>카레</em>라이스</li> 
 </ul> 
  <p>그런데 달랑<strong>3개</strong>뿐</p> 
  <div><p>지금은 저녁인데ㅠㅠ</p></div> 
</div>


자손 선택자 A B

아주 잘 알고있는것 부모의 자손엘리먼트를 지정


div ul li{ color:#009;}

위의 것을 보면 "매운꽃게탕,라면밥, 카레라이스"가  색깔이변한다

공통 선택자 A * B

구애 받지않고 모든것. * 는 모든것을 의미한다.  A * B 일때는 조건이 있다. A는 상위 부모여야하고 B는 A말고 바로 직계부모를 가져야 한다.


div * em{ color:#F00;}

캐스케이딩으로 순서를 생가하면 em으로 찻반째 보다 두번째로 적용된다

직계자식 선택자 A > B

B는 A의 직계자식이여야한다. 자손 선택자와 달리 명확함을 돋보이게한다 자손의 경우 div  p strong 으로 지정하거나 손자로 바로 div strong으로 적용가능하지만 직계자손은 div > p > strong  처럼 바로 부모 자식순서로  정확하게 있어야가능하다.


div > p > strong{color:#F00;}

좀더확실하게 보기위해 사용한다.


인접형제 선택자 A + B

A다음 오는 B엘리먼트라 생각하면된다


h2 + p{ font-size:13px;}

일반형제 선택자 A ~ B

A이후에 나오는 B엘리먼트들을 가르키는데 그 B엘리먼트가 같은 트리안에 포함될 때 까지 적용된다.

h2 ~ p{ color:#903;} 


자손 선택자를 빼고는 익스플로어6 에서 적용안된다.또한 일반형제 선택자는 익스플로어7이하로적용 안된다.
앞으로 설명할 여러선택자들 그리고 더욱이 CSS3로 넘어가면 지원이 미흡한데 그의 해결 방안은  http://code.google.com/p/ie7-js/ 의 스크립트를 이용 방안이 있는데 따로 설명예정.

마지막으로 위의 예제를 적용한것은 아래참조

http://sianasiatiger.cafe24.com/study/CSS_seletor.html


설정

트랙백

댓글

CSS 정리,관리 사이트 ProCSSor

CSS 2011.10.10 15:25

주소는 http://procssor.com/process



CSS를 정리해주는 사이트 다른거보다 설렉터 정리와 설렉터 스타일 나열방식을 정리해주는게 맘에든다

css

설정

트랙백

댓글

  • 치즈 2011.10.28 03:39 ADDR 수정/삭제 답글

    블로그 디자인이 바뀌었네요. 항상 RSS만 보고 있어서 몰랐습니다. 좋은 정보 감사합니다.
    맨위의 주소에 링크가 걸려있으면 더 좋을 것 같습니다.

웹사이트 유동적 레이아웃 : 최대값과 최소값 자동완성사이트

CSS 2011.03.27 11:34

웹사이트 유동적 레이아웃 : 최대값과 최소값 자동완성사이트

유동적 레이아웃에서 가로 너비으 최대값고 최소값을 제한해줄수 있는 걸 대부분알것이다(물론IE6는 그냥적용안됨)

어느정도 익숙하다면 Jello Mold Layout Generator를 방문하면된다.

http://www.positioniseverything.net/articles/sidepages/pie-calc.php



위와같은 그림에서 위에는 가로 최소값 입력 아래는 최대값과 전체 사이트 너비를 입력하고 submit을 클릭하면 된다. 그러나 소스가 바로 나오지는 않는다. 변경된 사이트의 모습을 보여준다.


브라우저에서 사이트의 소스보기를 연후에 복사,저장하든지 사이트저장해서 수정하든지 하면 된다.

좋은점은 IE에 대한 대체 방안도 마련 되어있다는 점이다.
아래가 마련된 소스이다






설정

트랙백

댓글

웹 CSS 폰트 테스트 미리보기 사이트 typeteste

CSS 2011.03.17 13:30

http://www.typetester.org/


CSS를 다루면서 여러폰트를 사용하고 크기 색깔 마진 패딩들을 다루게 되는데 미리한번 볼수 있는 좋은 사이트가 있다. 좋은점은 위에는 우리가 흔히 사용하는 기본적인 폰트 그리고 아래는 자신이 가지고 있는 폰트가 있다.


모두테스트 가능 설정함에 따라 아래에 뜬다.



아쉬운 점이라면 한글로 못본다는점?


설정

트랙백

댓글

  • Favicon of http://maxmini.egloos.com maxmin 2011.03.22 14:02 ADDR 수정/삭제 답글

    웹 표준에 관한 좋은 글 잘 보고 있습니다. 눈팅만 하다 글 남겨 봅니다.

CSS3 스크롤에 움직이는 입체 이미지

CSS/CSS3 2010.07.13 22:22

오직 css3만을 사용한다. 스크롤에 따라서 움직임

본 출처는 여기다. http://www.romancortes.com/blog/pure-css-coke-can/

필요로 사용된 이미지는 두개로 하나는  병이고 하나는 라벨

아 그리고 테스트결과 IE6 빼고 다적용됩니다.

코드는 무지무지 길다.

개인적으로 완성된 것 링크 http://sianasiatiger.cafe24.com/study/CSS3_rollingcan.html



<div id="coke">
<div id="y">
<p id="x1"></p>
<p id="x2"></p>
<p id="x3"></p> 
...
...
......
<p id="x54"></p>
<p id="x55"></p>
<a href="http://www.romancortes.com/" target="_top">
      <img src="images/CSS3map/coke-can.png" alt="Pure CSS Coke Can by Román Cortés"></a></div>
  </div>

html에서 아이디는 번호순대로 나오니 가운데 생략


body
{ margin: 0;padding: 0;overflow: hidden; }
#coke
{ width: 510px; height: 400px; overflow: auto; }
img{ border: 0; margin-left: -172px; }
a{ display: block; padding-top: 19px; width: 194px; }
a:hover img {background: url(images/CSS3map/coke-title.png) no-repeat 15px 100px;}

div div
{ background-image: url(images/CSS3map/coke-scroll.png) no-repeat  0 0;
   padding-left: 300px;width: 660px;
}
p{ margin: 0; padding: 0; float: left; height: 336px;
   background-image: url(images/CSS3map/coke-label.jpg);
   background-attachment: fixed;
   background-repeat: repeat-x;
   width: 1px;
}

#x1 {background-position: 5px 46px;}
#x2 {background-position: 0px 46px;}
#x3 {background-position: -3px 46px;}
#x4 {background-position: -6px 46px;}
#x5 {background-position: -8px 46px;}
#x6 {background-position: -10px 46px;}
#x7 {background-position: -12px 46px;}
#x8 {background-position: -14px 46px;}
#x9 {background-position: -15px 46px;}
#x10 {background-position: -16px 46px;}
#x11 {background-position: -17px 46px;}
#x12 {background-position: -18px 46px;}
#x13 {background-position: -19px 46px;}
#x14 {background-position: -20px 46px;}
#x15 {background-position: -21px 46px;}
#x16 {background-position: -22px 46px; width: 2px;}
#x17 {background-position: -23px 46px;}
#x18 {background-position: -24px 46px; width: 2px;}
#x19 {background-position: -25px 46px; width: 2px;}
#x20 {background-position: -26px 46px; width: 2px;}
#x21 {background-position: -27px 46px; width: 2px;}
#x22 {background-position: -28px 46px; width: 3px;}
#x23 {background-position: -29px 46px; width: 3px;}
#x24 {background-position: -30px 46px; width: 4px;}
#x25 {background-position: -31px 46px; width: 5px;}
#x26 {background-position: -32px 46px; width: 7px;}
#x27 {background-position: -33px 46px; width: 12px;}
#x28 {background-position: -34px 46px; width: 55px;}
#x29 {background-position: -35px 46px; width: 11px;}
#x30 {background-position: -36px 46px; width: 6px;}
#x31 {background-position: -37px 46px; width: 5px;}
#x32 {background-position: -38px 46px; width: 4px;}
#x33 {background-position: -39px 46px; width: 3px;}
#x34 {background-position: -40px 46px; width: 2px;}
#x35 {background-position: -41px 46px; width: 3px;}
#x36 {background-position: -42px 46px; width: 2px;}
#x37 {background-position: -43px 46px; width: 2px;}
#x38 {background-position: -44px 46px;}
#x39 {background-position: -45px 46px; width: 2px;}
#x40 {background-position: -46px 46px;}
#x41 {background-position: -47px 46px;}
#x42 {background-position: -48px 46px;}
#x43 {background-position: -49px 46px;}
#x44 {background-position: -50px 46px;}
#x45 {background-position: -51px 46px;}
#x46 {background-position: -52px 46px;}
#x47 {background-position: -53px 46px;}
#x48 {background-position: -54px 46px;}
#x49 {background-position: -56px 46px;}
#x50 {background-position: -58px 46px;}
#x51 {background-position: -60px 46px;}
#x52 {background-position: -62px 46px;}
#x53 {background-position: -65px 46px;}
#x54 {background-position: -68px 46px;}
#x55 {background-position: -74px 46px;}

CSS는 그냥 올림 픽셀의 차이가 있기에 다 올렸다.그리고 이 CSS는 초기화 시킨 것에서 위치 지정한 것이니 유의하길


설정

트랙백

댓글

  • 2010.09.10 10:57 ADDR 수정/삭제 답글

    좋은정보 감사합니다.

CSS3 라운드박스 익스플로어 (IE6,7,8) 모두적용

CSS/CSS3 2010.07.07 00:14

CSS3 라운드박스 익스플로어 (IE6,7,8) 모두적용

CSS3적용에 여전히 문제점을 가지는 IE ......에 라운딩박스의 경우여러가지방법이있다. 그 중 괜찮은것

출처는 여기 http://www.htmlremix.com/css/css-level-3-styles-in-internet-explorer-6-onwards

데모는 여기서 바로 확인 가능 http://fetchak.com/ie-css3/

다른 방법들에 비해 쉽다. ie-css3.htc 이 파일이필요 다운은 http://code.google.com/p/curved-corner/

소스를 알아보자

CSS3 : border-radius

border-radius 는 박스의 라운드를 가능하게 해준다.
아직 이 방법이 적용 되지 않는 브라우저가 많으며 별도의 지정이 필요하다


.box{ width:600px;height:600px; 
       border: 10px solid #000; 
       /*확인을 위해 테두리를줌*/ 
       background:#fff;
       /*IE에서는 테두리가 배경색이된다*/
       -moz-border-radius: 15px;
        /*파이어폭스*/
        -webkit-border-radius: 15px;
        /*웹킷기반 브라우저 구글크롬 사파리*/
        border-radius: 15px;
        /* 오페라 10.5이상 */
        behavior: url(ie-css3.htc);
        /*IE6이상 IE-CSS3 핵사용*/
       }

아주간단 html은 다음과 같다


<div class="box"><p>박스내용</p></div>

주석에서 달아 놓았듯이 테두리만 주면 IE에서는 모두 테두리색으로보인다.
따라서 다시 배경색을 지정 해 줬다.

위소스의결과를 확인: http://sianasiatiger.cafe24.com/study/CSS3_RBox.html


설정

트랙백

댓글

  • 달타니 2011.01.11 16:10 ADDR 수정/삭제 답글

    방금 로컬에서 테스트해봤는데.. 안되네요.. 로컬에선 확인 할수 없나요??

    • 나그네 2011.01.14 12:09 수정/삭제

      htc 파일이 필요하다는데요. 윗글에 링크주소가 있어요.

  • 일꺾 2012.09.09 19:34 ADDR 수정/삭제 답글

    위에 링크로 받은 htc 파일로는 해결이 안되서

    http://fetchak.com/ie-css3/ 여기서 받아서 해결했습니다

  • 창민 2014.05.20 16:46 ADDR 수정/삭제 답글

    좋은 정보 감사합니다.

간단한 CSS3 기초 알파 배경,텍스그림자, 둥근모서리

CSS/CSS3 2010.06.29 20:05

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축으로 그림자위치 세번째는 흐려짐(blur) 네번째는 색깔(이 색깔역시 RGBA로 가능)이다.


div{ text-shadow:4px 4px 2px #000; font-size:40px;}

흐려짐(blur)에 대해서는 그림을 참조하자 5px 15px값을 준것이다. 비교해볼것

제미있는 건 이 그림자를 여러번 사용할 수 잇다는것이다. 다음과 같은예


#shadow_02{
        text-shadow: 0 10px 0 #fff,
        0 -10px 0 #039, 0 -20px 0 #fcc;
              }

라운드 박스

잘알려져있지만 한버더보는것 border-radius 이것으로 정하지만 아직 모든브라우저에 적용시키기위해선 앞에 다른것을 붙여줘야한다.파이어폭스의 경우--moz-border-radius웹킷기반의 브라우저는 -webkit-border-radius를 사용한다. 아래그림은 그예


#box{
	
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
}
#box #example2 {
	-webkit-border-top-left-radius: 5px;
	-webkit-border-top-right-radius: 15px;
	-webkit-border-bottom-left-radius: 25px;
	-webkit-border-bottom-right-radius: 45px;

	-moz-border-radius-topleft: 5px;
	-moz-border-radius-topright: 15px;
	-moz-border-radius-bottomleft: 25px;
	-moz-border-radius-bottomright: 45px;
}



설정

트랙백

댓글

CSS dispay 프로퍼티

CSS 2009.10.25 15:26

CSS dispay 프로퍼티

dispay 프로퍼티는 엘리먼트를 어떻게 보여주냐(또는 어떤 타입으로 참조:엘리먼트의 분류)를 정하는 css 프로퍼티이다. 가장대표적인 값으로 none, inline, block가 있다.이세가지부터 간단히 보자

none
영문 뜻그대로다. 보이지 않게 한다.엘리먼트가 화면에 보이지않는다.

아무것도 안보임ㅠㅠ

p{display:none;}
inline
인라인(inline) 엘리먼트처럼 보여준다. 즉 한줄로 보여주게 된다.예제를 보자.가장대표적으로 li의경우 사용되는 경우가 많다.
  • 한줄로
  • 나란히
  • 줄서기
li{display:inline;}

이러면한줄로 나란히 줄서기이렇게 한줄로 화면에 표시될것이다

block
앞서설명한 inline과 반대로 블록(block) 엘리먼트처럼 보여준다

아래의 p엘리먼트안에 a엘리먼트가 블록으로 바뀐다.

우리는 한블럭 차지하네

#gama a{ display:block; }

예제는 여기가서 보자http://sianasiatiger.cafe24.com/study/S_display.html


설정

트랙백

댓글

CSS 텍스트 그림자 효과 (text-shadow in css3)

CSS 2009.10.12 22:13

CSS 텍스트 그림자 효과(text-shadow in css3)

CSS3에서는 포토샵의 그림자효과 같은 텍스트에 여러 효과를 주는 기능이 추가되었다.추가된 기능들을 보자

텍스트 그림자(Text-shadow)

W3C에 정의 참조

흔히 우리는 포토샵에서 그림자효과로 drop shadow를 사용한다. 텍스트에 그림자를두는 건데 css3로 표현 가능하다.아래와같은 효과 이에대한 코드를 보자(사파리3.0이상,파폭3.1이상,오페라9.5에서 적용된다)

예제를 통해 이그림과 같은 효과를 볼 것이다

Text-shadow

css코드 가로,세로, 번짐효과, 그림자색깔, 이순서다.

p{text-shadow: 2px 2px 1px #000;}

위와 같은 경우 그림자가 가로 2px서로 2px 번짐효과 2px 이렇게일어난다.그리고 색깔은 검정(#000)

좋은예제는 아래두링크


설정

트랙백

댓글

CSS 고급 레이아웃

CSS 2009.09.27 12:06

CSS 고급 레이아웃

레이아웃을 지정하는데 있어 플로트나 포지션을 지정할경우 상당히 귀찮아진다. 마진 패딩을 고려하고 일일이 지정하는것은 참귀찮은 일이다. css3에서는 원하는 모양을 단번에 나올수 있게 쉽게할수 있는 레이아웃모듈이 개발되고 있다. (월드와이드 맵고급레이아웃 모듈 http://www.w3.org/TR/css3-layout/.)

아래그림처럼 레이아웃을 꾸민다고 생각해보자

플로트나 포지션을 이용하면 아래위를 나누고 각각배치할 구역별위치를 지정해야한다. 이걸 단번에 지정하는방법이 개발되고 있다. 예제소스를보자

a
b
c
d
e
f
#box { display: 
          "a b c",
           "d e f "; }/*위그림처럼 display 값의 위치를 지정해준모습 코드*/
div#one{position :a}
/*포지션 값에 지정한 위치의 알파벳을 지정한다*/
div#tow{position :b}
div#three{position :c}
div#four{position :d}
div#five{position :e}
div#six{position :f}

아주 간단하다. 먼저 display에서 모양그대로 "a b c" ," d e f" 해주고 각div의 위치를 a~f까지원하는 위치에 갔다주면된다

앞서말했지만 여전히 문제되는 점은 "아직 개발중" 이라는 점이다.따라서 위와같이 해서는 아직 어떤브라우저에서도 적용되지않는다. 대신 자바스크립트로 위와같이 편하게 지정할 수 있도록 하는 방법이 있긴하다.

먼저 스크립트 almcss_4_6.js 이 필요하고 그다음으로 position 대신에 situated를 사용한다

예제를 보려면 여기서 볼수 있다.

이로서 CSS3에 대해 거의 둘러봤다고 보면 된다 hrml5와 더불어 아직 개발중이니 발전하는대로 올려보겠다.



설정

트랙백

댓글