검색결과 리스트
유사클래스에 해당되는 글 3건
- 2011.12.29 CSS3 선택자(selectors) - 유사클래스(pseudo-class) Part3
- 2011.12.29 CSS3 선택자(selectors) - 유사클래스(pseudo-class) Part2
- 2011.12.29 CSS3 선택자(selectors) - 유사 클래스(pseudo-class) Part1 (2)
글
CSS3 선택자(selectors) - 유사클래스(pseudo-class) Part3
선택자(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
선택자(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
선택자(selectors) - 유사클래스(pseudo-class) Part1
너무나도 잘아는 link, visited,active,hover는 생략한다.아래 포스팅참조
순서는 LoVe:HAte 를 상기 하자
: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