CSS (CSS3) 속성선택자 (attribute selector)

CSS/CSS3 2011.12.30 13:02

CSS (CSS3) 속성선택자 (attribute selector)

CSS2에서도 지원했지만 CSS3에서 좀더 추가되었다. 예제를 통해간편히 확인해보자.아래 html에서는 각포탈사이와 그에 따라 title속성에 값을 주었다.


<p><a title="tistory" href="#">티스토리</a></p> 
<p><a title="naver" href="#">네이버</a></p> 
<p><a title="potal daum site" href="#">다음</a></p> 
<p><a title="nate-mobile" href="#">네이트</a></p> 
<p><a title="dreamwiz" href="#">드림위즈</a></p> 
<p><a title="yahoo" href="#">야후</a></p> 
<p><a title="TheBestgoogleWeb" href="#">구글</a></p>

이번엔 CSS를 보자 정의 한것

[attr] : 속성값을 가지는경우
[attr=" "] : 속성값이 정확히 일치
[attr~=" "] : 속성값이공백으로 구분한 경우
[attr|=" "] 속성값이 하이픈으로 구분한 경우
아래 세개는 CSS3에 추가된것이다 [attr^=" "] 속성값이 주어진값으로 시작한경우
[attr$=" "]주어진값으로 끝나는경우
[attr*=" "] 속성값이 일부일치한다면 적용

아래는 적용한 예제다


/*title 속성을 가지고 있는 엘리먼트에 모두적용*/
a[title]{border: 1px solid #999; font-size:3em;}
/*title 속성값 naver와 정확히 일치하는 경우*/
a[title="naver"] {color:#0F0;}
/*title 속성값인 daum을 공백으로 구분한 경우*/
a[title~="daum"] {background-color: #09F;}
/*title 속성값인 nate를 하이픈으로 구분한 경우*/
a[title|="nate"] { color:#F00;}
/*title 속성값인 dre로 시작한경우 */
a[title^="dre"] {background-color:#FF0;}
/*title 속성값인 hoo로 끝나는경우*/
a[title$="hoo"] {background-color:#60F;}
/*title 속성값인 google로 일부일치하는경우*/
a[title*="google"] {background-color:#666;}

완성된 예제를 확인하려면 아래주소로

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

*주의 : 속성값의 대소문자는 인식은다르다.google과 Google은 다르단 말

저작자 표시
신고

설정

트랙백

댓글

CSS3 선택자(selectors) - 유사클래스(pseudo-class) Part3

CSS/CSS3 2011.12.29 18:41

선택자(selectors) - 유사클래스(pseudo-class) Part3

:first-letter :first-line

텍스트의 첫글자 텍스트의 첫줄을 말한다. 흔히 책에서 첫글자나 첫줄을 강조할때를 생각하면된다.예제를 통해 자세히 보자


<p>The moment Alice appeared, she was appeal......</p> 
<p>The executioner's argument was, that you couldn't cut..</p> 
<p>The executioner's argument was, that you couldn't...</p> 

위와같은 세문장에서 첫번쩨 문단의 문자 T를 크게 하고 첫라인을강조하려한다. 첫번째 문단을 선택하기위해 :first-of-type 선택자를 사용했다.


 p {     /*기본설정*/
		font-size: 16px;
		line-height: 24px;
		color: #666; }

  /*첫문단의 첫번째글자 T를 꾸민다*/
	p:first-of-type:first-letter {
		color: red;
		font-size: 3em;
		float: left;
		margin-right: 5px; }	

 /*첫문단의 첫번째줄*/
	p:first-of-type:first-line {
		font-size: 1.25em;
		font-weight: bold;
		color: #000; 
}

:before :after

위의 내용은 이상한나라의 앨리스이다. 이번엔 :before :after 로 엘리먼트앞뒤를 꾸며보자. 이들은 이름과 같이 엘리먼트 앞뒤를 말하는데 그 공백을 의미한다


<h3>이상한 나라의 앨리스</h3>

css에서는 별도의 이미지를 사용했다.


h3:before {
	  	content: url(images/bullet-02.png);
	}
h3:after {
	       content: url(images/bullet-01.png);
	}	

직접확인해본바로는 여기선 우리가 흔히 쓰는 background로는 먹히지않았다. display: block; 과 크기지정을 해도마찬가지 아마공백처리되기에 그런듯하다. 대신 content를 사용한다 content에 대해서 차후에 설명

예제를 확인하려면 여기http://sianasiatiger.cafe24.com/study/CSS_seletor_pseudo-class_03.html

저작자 표시
신고

설정

트랙백

댓글

CSS3 선택자(selectors) - 유사클래스(pseudo-class) Part2

CSS/CSS3 2011.12.29 15:23

선택자(selectors) - 유사클래스(pseudo-class) Part2

:empty

공백 유사클래스이다. 엘리먼트안에 아무것도 없어야 한다.

<div></div>

div크기만 정해줬고 배경색을 지정했다.


div{width:100px; height:100px;} 
div:empty{ background:#000;}

:root

문서의 최상위 엘리먼트 html과 같다고 보면 된다. 왜 생겼는지 확신하지못하겠지만 스타일에서 html 지정시 충돌하는점을 방지하기위해서라 생각된다.

:only-child

유일자식으로 자식이 하나밖에 없을때 유용하다.


<ul> 
  <li>첫번째 자식이고</li> 
  <li>두번째 자식이므로 적용안됨</li> 
  </ul> 
  <ul> 
  <li>자식하나뿐임</li> 
</ul>

아래와 같이 사용하면 자식 엘리먼트에 하나뿐임에 적용된다.


li:only-child {color: #F00;}

:only-of-type

단하나뿐인 엘리먼트일때 시용한다

:lang

특정언어가 문서에 있을때 사용한다. 명확히라기위해서 html엘리먼트내에 어트리뷰트를 설정해야한다. 아래는 ISO지정 국가코드

http://www.w3schools.com/tags/ref_language_codes.asp

<p>이 책은 프랑스의 어느 유명한 작가가 쓴글입니다</p> 
<p lang="fr">Ce livre est un artiste célèbre en France est sseungeul</p>
p:lang(fr){ color:#F00;}

위와 같을경우 아래 프랑스어가 빨간색으로 된다

:not()

스타일을 적용하되 괄호안의 지정자는 적용되지 않게한다. 아래의 예를보자


<p>여긴 적용됩니다</p> 
<p>여긴 적용됩니다</p> 
<p class="words">여긴 적용 안됩니다</p> 
<p class="words">여기도 적용 안됩니다</p> 

p:not(.words){ font-size:24px; color:#336;}

위에 두개는 적용되고 괄호안에 클래스인 words는 적용안된다

예제를 보려면 아래를 보자

http://sianasiatiger.cafe24.com/study/CSS_seletor_pseudo-class_02.html


저작자 표시
신고

설정

트랙백

댓글

CSS3 선택자(selectors) - 유사 클래스(pseudo-class) Part1

CSS/CSS3 2011.12.29 14:02

선택자(selectors) - 유사클래스(pseudo-class) Part1

너무나도 잘아는 link, visited,active,hover는 생략한다.아래 포스팅참조

CSS 링크 스타일 기초

순서는 LoVe:HAte 를 상기 하자

CSS :tager 동적 유사 클래스

:traget 역시 위포스팅 참조 또는 좋은에제로 http://webdesignernotebook.com/examples/target.html

:focus 유사클래스

엘리먼트가 화면 포커스를 깆고 있는경우이다. 예제를 보자


<form> 
<input type="text" class="focus" value="이름"> 
<input type="button" class="active" value="Search"> 
</form>

위는 이름을 검색하는 간단한 폼 양식이다. 아래는 적용해본 CSS :hover,같은 것처럼 사용방법에 별다른 어려움 없다.

CSS 사용시 순서는 LoVe:HAte에 focus추가시 link visited hover focus activated로 해야한다


	input {
		border: 3px solid #999;
		background-color: #ccc;
		color: #999;
		padding: 0 5px;
		font-size: 2em; }
	input:hover {
		border-color: #c99;
		color: #666; }
	input:focus {
		border-color: #f00;
		background-color: #fff;
		color: #000);
		outline: none; }
	input:active {
		color:  #f00;
		border-color:  #f00;
		background-color: #000;}

자식관련 유사클래스

CSS3에서는 id라던가 class지정없이 지정하기쉬워졌다 특히나 리스트 같은 엘리먼트에서는 더욱편하다.첫번째 자식을 선택한다거나 N번째 자식 같은 선택이 가능하다. 아래가 그대표적인것들

  • :first-child 첫번째 자식을 말한다
  • :last-child 마지막자식
  • :nth-child(number) 위에서 괄호안에 숫자순서에 등장하는 자식
  • :first-of-type 첫번쩨 엘리먼트
  • :last-of-type 마지막엘리먼트
  • :nth-of-type(number)
  • :nth-last-of-type(number)

아래 예제를 보자.


<ol> 
<li>첫번째 자식, 첫번째 타입</li> 
<li>두번째 자식</li> 
<li>세번째 타입</li> 
<li>밑에서 두번째 타입</li> 
<li>마지막자식, 마지막 타입 </li> 
</ol>

리스트에서 턱스트는 엘리먼트 위치를 말해주고 있다.이에대해 CSS를 정의 해보자


li:first-child { font-size: 1.1em; }
/*첫번쩨 자식의 폰트크기 */
li:first-of-type { color: red; }
/*첫번쩨 엘리먼트*/
li:nth-child(2){ color :#0F0;}
/*두번째 자식의 폰트컬라*/
li:nth-of-type(3) { font-size: 1.5em }
/*세번째 엘리먼트의 폰트크기*/
li:nth-last-of-type(2)  { font-size: 2em; }
/*뒤에서 두번째 엘리먼트의 폰트크기*/
li:last-of-type { color: red; }
/* 마지막 엘리먼트의 폰트색깔*/
li:last-child { font-size: 2.5em; }
/*마지막 자식의 폰트크기조절*/

위와 같이 별도 클래스나 아이디 지정없이 지정해줄수 있으니 편해졌다.적용된예제는 아래

http://sianasiatiger.cafe24.com/study/CSS_seletor_pseudo-class_01.html


저작자 표시
신고

설정

트랙백

댓글

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 :tager 동적 유사 클래스

CSS 2009.09.22 13:59

CSS :tager 동적유사클래스 (css3)

사용자가 클릭할 경우의 원본의 부분을 강조하기 위한 재미있는 새로운 방법. 필요한것은 클릭해야하니 링크, 그리고 효과가 지정될 엘리먼트, 그리소 css 설정이다. 예를들어보자 클릭하게되면 지장된곳의 상태가 css에서 지정한것으로 바뀐다.예제를 보자

  • 먼저 여기를클릭하시오
  • 다음 여기를클릭하시오
  • 먼저 여기 배경색이 빠뀜
  • 폰트크기가 바뀜

css는 다음과 같이

#first:target{
background: #ffff7e;
}
#second:target{ font-size:25px;}

첫번쪠 지정한 곳은 배경색이바뀐다. 두번째 지정한곳은 크기가 바뀐다.

이런 target 은 한페이지내에 링크를 걸어둘경우 선택되었을떄 특별히 주목받도록 변경시킬때 사용된다.

직접예제를 보려면 여기로GO

저작자 표시
신고

설정

트랙백

댓글

CSS :nth-last-child 유사클래스(css3)

CSS 2009.09.18 17:56

CSS :nth-last-child 유사클래스 이외..

:nth-child를 봤다면 :nth-last-child 도 어렵지않다. 아니똑같다.LAST가 붙은 만큼 뒤에서 세어주면 된다. 간다한은 예

li:nth-last-child(2n){ font-size:20px;}
/*뒤에서 꺼꾸로 짝수번쨰 폰트사이즈 20px*/

나머지 ㅁ유사한~유사클래스를 마저 보자

:only-child

:only-child이건 only 붙은 만큼 유일한 자식이 있을경우만 선택된다,예로 div:only-child라 했을 경우

이건 유일하니 선택됨
첫째 자식

또한명 자식 이다보니 선택안됨

:last-child

:first-child의 반대이다.:first-child는 자식 첫번째 껄 선택한다.반대로 :last-child는 마지막 자식이다.예제로 간단히보자

li:first-child{font-size:10px;}
li:last-child{font-size:20px;}
  • 첫번쨰 자식
  • 자식2
  • 자식3
  • 마지막 자식

결과는? 다음과 같다.

  • 첫번쨰 자식
  • 자식2
  • 자식3
  • 마지막 자식
저작자 표시
신고

설정

트랙백

댓글

CSS :nth-child 유사클래스(css3)

CSS 2009.09.18 16:58

CSS :nth-child 유사클래스

순차적 자식선택자이다. 자식선택자중 li라던가 table의 tr태그에 쓰이게 되는데 예제를 보자

홀수
짝수
홀수
짝수

이표는 홀수의 번쨰의 경우 표의 색깔을 #FF9999 로 한경우이다. 이렇게 할경우 소스는 다음과 같다.

홀수
짝수
홀수
짝수
.odd{background-color:#ff9999;}
.even{background-color:#ffcccc;}

이와칸이 별도로 클래스를 지정해주고 그에 맞게 색을 지정하게 해주어야한다. 표나, 리스트의 행열이 적으면 간편하나 길면 일일이 클래스 지정해주기가 귀찮아 진다.특히 통계자료에 쓰일 표같은 경우는 더욱 그렇다. 이같은 점을 쉽게 사용할 수 있도록 하는 방법이 :nth-child를 이용하는것이다.사용방법은 다음과 같다

E:nth-child(){}
/*an E element, the n-th child of its parent
(E 엘리먼트가 부모이며 그순차적 자식선택자를 괄호안의 방법으로 선택한다)
*/

E:nth-child()에 괄호 안에 따라서 지정할 수 있는데 가장 간단한 변수인 odd(홀수), even(짝수)을 들수 있다. 예로 E:nth-child(odd){}이렇게하면 롷수번째가 선택되고 E:nth-child(even)이렇게하면 짝수번쨰가 선택되는 것이다.그럼앞서보인표에 클래스 부여없이 선택할려면 다음과같다.

tr:nth-child(odd){background-color:#ff9999;}
/*tr엘리먼트의 홀수번쨰 배경색을 #ff9999로*/
tr:nth-child(even){background-color:#ffcccc;}
/*tr엘리먼트의 짝수번쨰 배경색을 #ff9999로*/

이와 같이하면 별도 클래스 지정없이 간편하게 해줄수있다

좀더 고급스럽게 사용하기

단순히 짝수 홀수만 사용한다면 그다지흥미를 못느낄 것이다. 하지만 :nth-child()의 괄호안에 수학 공식을 넣기에 따라 선택할수 있다. 학교에서 배운 수열을 생각해보자 1, 3, 5 ,7 ,9 .... 이수열의 일반화 공식은? 2n+1 이다. (모르는 분은 수학공부부터....)이처럼공식을 넣어줄수있다. 물론 2n+1 이건 홀수 선택 odd와 같다. 그러면 1, 4,7, 10, 13...이런경우는? 3n+1이다. 예제 소스를 보자.아그리고 n은 0부터 시작한다.

  • 첫번쨰
  • 두번쨰
  • 세번쨰
  • ... .. .
  • 열번쨰
li:nth-child(1){}/*li엘리먼트중 첫번쨰 선택*/
li:nth-child(2){}/*li엘리먼트중 두번쨰 선택*/
li:nth-child(n){}/*li엘리먼트중 n번쨰 선택 0부터시작하니 모두선택된다*/
li:nth-child(2n){}/*li엘리먼트중 2n번쨰 선택 0,2,4,6...*/

마지막으로 1, 4,7, 10, 13...로 선택할경우 폰트 소스와 그 결과를 보자

li:nth-child(3n+1){ font-size:20px;}
/*1, 4,7, 10, 13..번째의 경우 폰트 크기를 20px로*/
  • 첫번쨰
  • 두번쨰
  • 세번쨰
  • 네번쨰
  • 다섯번쨰
  • 여섯번쨰
  • 일곱번쨰
  • 여덟번쨰
  • 아홉번쨰

더자세한 내용을 알고 싶으면 여기로 가보자

저작자 표시
신고

설정

트랙백

댓글

CSS 간접 선택자(css3)

CSS 2009.09.17 17:49

CSS 간접 선택자(General selector)

간접 선택자는 엘리먼트 뒤에 나오는 모든 엘리먼트를 지정할때 사용한다.

E ~ F{font-size:20px;}
/*F element preceded by an E element
(E 엘리먼트가 F엘리먼트보다 앞에있다.*/

h1 ~ p{} 이렇게 지정하면 h1 뒤에 p엘리먼트가 선택된다 하지만 다른 엘리먼트에 종속되어있는 엘리먼트는 선택되지 않는다.예제를 보자.

앞서있는 엘리먼트

어쩌고

저쩌고

어쩌고

여긴선택안됨

저쩌고

h1 ~ p{font-size:20px;}

결과는 다음과 같이 된다

앞서있는 엘리먼트

어쩌고

저쩌고

여긴선택안됨

어쩌고

저쩌고

위와 같이 div엘리먼트안에 p 엘리먼트는 선택되지않는다.

저작자 표시
신고

설정

트랙백

댓글

CSS 인접 선택자(css3)

CSS 2009.09.17 17:19

CSS 인접 선택자(Adjacent selector)

인접선택자는 엘리먼트 바로다음에 오는 엘리먼트를 지정하는 방법이다.

사용방법은 다음과 같다.

E + F{font-size:30px;}
/*F element immediately preceded by an E element
(F엘리먼트 다음 바로 붙어오는 E엘리먼트*/

예를 들어html이 다음과 같을 경우

기준이요

선택되는것은 여기

여기는 선탣안됨

여기도 선탣안됨

h1 + p{font-size:30px;}
/*"선택되는것은 여기" 이 텍스트의 폰트크기가 30px이 된다.*/

h1 다음에 오는 엘리먼트 첫번쨰 엘리먼트p만 폰트의 크기가 30px이 된다.

저작자 표시
신고

설정

트랙백

댓글


티스토리 툴바