'선택자'에 해당되는 글 11건

Programming/HTML CSS
클래스 선택자

태그에 특정 클래스가 적용되어 있는 경우 해당 클래스를 가진 태그를 .(점)문자를 사용하여 선택합니다.
<span class="color_span">CLIEL</span>
▶span 태그에 color_span 클래스 적용
.color_span {
 color:red;
}
▶color_span 클래스 사용 태그 선택

같은 클래스를 사용하는 서로 다른 태그에서 특정 태그만을 선택해야 한다면 <태그>.<클래스> 형식으로 지정해야 합니다.
<span class="color_span">CLIEL</span>
<p class="color_span">CLIEL</p>
▶다른 태그에 같은 color_span 스타일 적용
span.color_span {
 color:red;
}
▶span의 color_span만을 선택

또한 하나의 태그에 여러 클래스가 적용된 경우
<span class="color_span bold_span">CLIEL</span>
해당 클래스 모두 선택이 가능하며 각각의 스타일 적용이 가능합니다.
.color_span {
 color:red;
}

.bold_span {
 font-weight:bold;
}
0 0
Programming/HTML CSS
상태 선택은 사용자로 부터 어떤 값를 입력받는 요소에 많이 쓰이는 선택자 입니다.
<input type="radio" id="man" name="sex" />남<br />
<input type="radio" id="woman" name="sex"  disabled="disabled" />여

<span id="o_man">남자를 선택함.</span>
<span id="o_false">사용 불가</span>
(1) checked

input 요소를 check 상태로 만들었을때를 의미합니다.
#man:checked ~ #o_man {
 color:red;
}
▶ man id 의 input 요소를 check 상태로 만들면 그 앞에 있는 모든 요소중 id가 o_man인 tag에 style을 적용

(2) disabled / enabled
#woman:disabled ~ #o_false {
 color:blue;
}
▶ woman id의 input 요소가 disabled 로 사용이 불가능하면 그 앞에 있는 모든 요소중 id가 o_false인 tag에 style을 적용, 반면 enabled 로 하면 사용가능임.

(3) focus
input:focus {
 color:red;
}
▶ input 요소중 focus 상태인 것이 있으면 해당 input에 style을 적용

'Programming > HTML CSS' 카테고리의 다른 글

[CSS3] 초기화 코드 사이트  (0) 2013.07.01
[HTML5] track (video 자막)  (0) 2013.06.28
[CSS3] 선택자 - 상태 선택  (0) 2013.06.24
[HTML] base  (0) 2013.06.20
[CSS3] linear-gradient  (0) 2013.06.19
[CSS3] 선택자 - 자손 선택  (0) 2013.06.17
0 0
Programming/HTML CSS
태그 선택자

특정 태그를 사용하여 해당 문서내에 지정된 태그만을 선택합니다.
span {
 color:red;
}
만약 여러태그에 동일한 스타일을 적용하려면 해당 태그를 ,(콤마)로 구분해 지정합니다.
span, p {
 color:red;
}

'Programming > HTML CSS' 카테고리의 다른 글

[HTML5] header, nav, aside, section, article, footer (구조태그)  (0) 2013.06.12
[CSS3] display  (0) 2013.06.11
[CSS3] 선택자 - 태그 선택  (0) 2013.06.10
[HTML] frameset, frame  (2) 2013.06.07
[CSS3] 선택자 - 속성 선택  (0) 2013.06.04
[CSS3] 선택자 - 후손 선택  (0) 2013.06.03
0 0
Programming/HTML CSS
속성 선택자

문서내에 요소중 특정 속성과 그 값을 가진 태그만을 선택하도록 합니다.
이름 : <input type="text" id="input_name" /><br />
<input type="button" value="확인" />
▶요소 정의
input[type=text] {
 border-color:red;
}
▶정의된 요소중 type 속성이 text 인것만 해당 스타일 적용

하나의 속성이 아닌 여러 속성을 지정해야 한다면 []로 '[속성=값][속성=값]'처럼 연결하면 됩니다.

만약 값이 아닌 속성만을 대상으로 해야 한다면 값을 제외하고 다음과 같이 지정합니다.
input[type] {
 border-color:red;
}
▶type 속성을 가진 요소만을 선택

속성과 값 사이에 특정 연산자를 사용하면 값의 구분을 제어할 수 있습니다. 위 예제에서는 = 기호만을 사용해 정확히 값에 일치하는 요소만을 선택하였으나 다음 표의 기호를 사용하면 값의 대한 선택방법을 좀더 유동적으로 바꿀 수 있습니다.

 ~=  속성이 '값'을 단어로 포함하고 있는 요소를 선택
 ^=  속성이 '값'으로 시작하는 요소를 선택
 $=  속성이 '값'으로 끝나는 요소를 선택
 *=  속성이 '값'을 포함하는 요소를 선택

예를 들어 아래에 attr_type 이라는 특정 속성이 적용된 경우
이름 : <input type="text" attr_type="aaa bbb" id="input_name" /><br />
<input type="button" attr_type="aaabbb" value="확인" />
선택자를 다음과 같이 지정했을때
input[attr_type~=bbb] {
 border-color:red;
}
input이 text 인 첫번째 태그가 선택됩니다. ~= 기호는 단어로서 포함되는 내용을 지정하기 때문에 aaa bbb 처럼 aaa와 bbb가 구분되어 bbb값을 따로 볼 수 있는 형태의 태그만 선택되는 것입니다. 두번째 input의 attr_type속성 값은 aaabbb 이므로 bbb를 별도의 단어로 인식하기에는 어려워 보입니다.

반면 아래 정의는
input[attr_type*=bbb] {
 border-color:red;
}
두개의 input 요소 모두를 선택하도록 합니다. *= 기호는 해당 속성에 지정된 값을 포함하고 있는 것이면 되므로 aaa bbb든 aaabbb든 모두 해당합니다.
input[attr_type^=aaa] {
 border-color:red;
}
위 선택자는 attr_type 속성의 값이 aaa로 시작하는 요소를 의미하므로 이것 역시 aaa bbb든 aaabbb든 모두 해당합니다.

'Programming > HTML CSS' 카테고리의 다른 글

[CSS3] 선택자 - 태그 선택  (0) 2013.06.10
[HTML] frameset, frame  (2) 2013.06.07
[CSS3] 선택자 - 속성 선택  (0) 2013.06.04
[CSS3] 선택자 - 후손 선택  (0) 2013.06.03
[CSS3] visibility  (0) 2013.05.29
[HTML / HTML5] span  (0) 2013.05.28
0 0
Programming/HTML CSS
말 그대로 선택자로 지정한 것이 아닌 것을 선택하는 선택자이며 not 을 사용합니다.
이름 : <input type="text" /><br />
주소 : <input type="text" /><br /><br />
<input type="button" value="확인" />
위 구조에서
input:not([type=text]) {
 color: red;
}
위와 같이 부정선택자를 사용하면 type이 text가 아닌것(예제에서 type이 button)만 선택하여 style을 적용하게 됩니다.

'Programming > HTML CSS' 카테고리의 다른 글

[CSS3] visibility  (0) 2013.05.29
[HTML / HTML5] span  (0) 2013.05.28
[CSS3] 선택자 - 부정 선택  (0) 2013.05.23
[CSS3] 선택자 - 구조 선택  (0) 2013.05.22
[HTML5] video (비디오)  (0) 2013.05.20
[CSS3] opacity  (0) 2013.05.15
0 0
Programming/HTML CSS
먼저 구조선택은 구조상 같은 위치의 태그를 선택하기 위해 다음 4가지 keyword를 사용할 수 있습니다.

 first-child  첫번째 태그
 last-child  마지막 태그
 nth-child  n번째 태그
 nth-last-child  마지막에서 n번째 태그

예를 들면
<table>
 <tr>
  <td>이름</td>
  <td>주소</td>
  <td>나이</td>
  <td>전화</td>
 </tr>
</table>
위 구조에서 첫번째 td와 세번째 td를 구조태그로 선택하려면 다음과 같이 선택자를 작성할 수 있습니다.
td:first-child, td:nth-child(3) {
 color:red;
}
특히 nth- 선택자를 사용하면 뒤에 가변적인 수열을 작성해서 원하는 태그를 반복적으로 선택할 수 있습니다.
td:nth-child(2n+1) {
 color:red;
}
위 구현은 첫번째 선택자 구현과 결과가 일치합니다. 뒤에 지정한 숫자는 2n + 1이므로 1부터 시작해 2씩 더해져 첫번째와 세번째 td를 선택하게 합니다. 이 상태에서 만약 td태그가 1개 더 추가된다면 자연히 추가된 td도 선택자 영향을 받게 됩니다.

구조 선택은 조금 다른 방식으로 다음 선택자도 사용할 수 있습니다.

 first-of-type  자손중 첫번째
 last-of-type  자손중 마지막
 nth-of-type  자손중 n번째
 nth-last-of-type  자손중 마지막 n번째

이 선택자를 사용해 이미 언급한 태그에서 첫번째 td만을 선택하게 하려면 아래와 같이 선택자를 작성합니다.
tr > td:first-of-type {
 color:red;
}
▶ tr 자손중 첫번째 td를 선택

'Programming > HTML CSS' 카테고리의 다른 글

[HTML / HTML5] span  (0) 2013.05.28
[CSS3] 선택자 - 부정 선택  (0) 2013.05.23
[CSS3] 선택자 - 구조 선택  (0) 2013.05.22
[HTML5] video (비디오)  (0) 2013.05.20
[CSS3] opacity  (0) 2013.05.15
[CSS3] 선택자 - 링크 선택  (0) 2013.05.14
0 0
Programming/HTML CSS
a tag 에서 href 속성이 적용된 다음과 같은 tag 를 선택하는 방법입니다.
<a href="http://www.daum.net/">다음</a>
<a href="http://www.naver.com/">네이버</a>
이와 같은 tag에서 사용할 수 있는 선택자는 다음과 같습니다.
a:visited {
 color: red;
}
▶ 이미 방문한 적이 있는 link는 붉은색으로 표시합니다.
a:link {
 color: blue;
}
▶ 모든 link tag 를 파란색으로 표시합니다.

'Programming > HTML CSS' 카테고리의 다른 글

[HTML5] video (비디오)  (0) 2013.05.20
[CSS3] opacity  (0) 2013.05.15
[CSS3] 선택자 - 링크 선택  (0) 2013.05.14
[HTML / HTML5] div  (0) 2013.05.13
[CSS3] 선택자 - 문자 선택  (0) 2013.05.09
[HTML / HTML5] fieldset, legend  (0) 2013.05.07
0 0
Programming/HTML CSS
<p>안녕하세요.<br />
반갑습니다.</p>
위 tag 에서 첫글자 '안'과 첫번째줄인 '안녕하세요'에 style을 적용하려면 아래와 같은 선택자를 사용합니다.
p::first-letter {
 font-size: 50px;
}
▶ 첫글자 '안'의 크기를 50px로 합니다.
p::first-line {
 color: red;
}
▶ '안녕하세요' 첫줄 전체를 붉은 색으로 합니다.

문자와 관련하여 반응형으로 동작하는 재미있는 선택자도 있는데
p::selection {  color: red; }
이와 같이 selection 선택자를 사용하면 사용자가 p tag 내부의 특정 내용을 drag 하여 선택했을때 선택한 부분만 붉은색으로 바뀌도록 합니다.

또 다른 형태로 아래 선택자를 사용하면 tag 내부의 처음 또는 마지막에 특정 내용을 추가할 수 도 있습니다.
p::before {
 content: "->";
}
▶ p tag 의 처음 부분에 '->' 내용을 추가합니다.
p::after {
 content: "<-";
}
▶ p tag 의 마지막 부분에 '<-' 내용을 추가합니다.

이때 content 는 p tag 내부의 요소를 의미하는 것으로 before나 after 선택자에서만 사용이 가능합니다.
    

'Programming > HTML CSS' 카테고리의 다른 글

[CSS3] 선택자 - 링크 선택  (0) 2013.05.14
[HTML / HTML5] div  (0) 2013.05.13
[CSS3] 선택자 - 문자 선택  (0) 2013.05.09
[HTML / HTML5] fieldset, legend  (0) 2013.05.07
[CSS3] 선택자 - 동위 선택  (0) 2013.05.06
[CSS] z-index, top, left, zoom, float  (0) 2013.05.01
0 0
Programming/HTML CSS
반응 선택은 마우스를 특정 태그에 올리거나 클릭하는 경우에 스타일을 적용할 수 있도록 하는 선택자 입니다.
<span>CLIEL</span>
위 태그에서 사용자가 CLIEL에 마우스를 클릭하는 경우 특정 스타일로 반응하도록 하려면 반응 선택자를 다음과 같이 사용합니다.
span:active {
 color:red;
}
다른 반응 선택자로 hover라는 것도 있는데 이 것은 마우스 클릭이 아닌 단순히 올리는 경우에 해당하는 것으로서 IE에서 테스트결과 a 링크에만 적용되는 것으로 보입니다.
0 0
Programming/HTML CSS
태그에 아이디 속성이 지정되어 있는 경우 #문자를 사용하여 해당 아이디 값을 가진 태그를 선택합니다.
<span id="test_span">korea!</span>
▶span 태그에 test_span 이라는 아이디 지정
#test_span {
 color:blue;
}
▶test_span 태그 아이디 선택

아이디는 중복이 가능하며 이런 경우 해당 아이디를 가진 모든 태그가 선택됩니다. 다만 중복을 권장하지 않습니다.
0 0
Programming/HTML CSS
문서의 특정 태그에 특정한 스타일을 적용하기 위해서는 해당 태그에 대한 선택이 필요합니다. 이때 선택자 방식을 이용하게 되는데 이 선택자 방식은 CSS뿐만 아니라 jquery에서도 동일하게 사용됩니다.

선택자 형식은 다음과 같습니다.

 선택자 { 속성 : 값; }

전체 선택

문서의 모든 태그(body를 포함하는 html 태그 전체)를 선택하는 방법으로 * 문자를 사용합니다.
* {
 color:red;
}
0 0
1
블로그 이미지

클리엘