본문 바로가기

선택자

[CSS3] 선택자 - 클래스 선택 클래스 선택자 태그에 특정 클래스가 적용되어 있는 경우 해당 클래스를 가진 태그를 .(점)문자를 사용하여 선택합니다.CLIEL▶span 태그에 color_span 클래스 적용.color_span { color:red; }▶color_span 클래스 사용 태그 선택 같은 클래스를 사용하는 서로 다른 태그에서 특정 태그만을 선택해야 한다면 . 형식으로 지정해야 합니다.CLIEL CLIEL▶다른 태그에 같은 color_span 스타일 적용span.color_span { color:red; }▶span의 color_span만을 선택 또한 하나의 태그에 여러 클래스가 적용된 경우CLIEL해당 클래스 모두 선택이 가능하며 각각의 스타일 적용이 가능합니다..color_span { color:red; } .bold_s.. 더보기
[CSS3] 선택자 - 상태 선택 상태 선택은 사용자로 부터 어떤 값를 입력받는 요소에 많이 쓰이는 선택자 입니다.남 여 남자를 선택함. 사용 불가(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) .. 더보기
[CSS3] 선택자 - 태그 선택 태그 선택자 특정 태그를 사용하여 해당 문서내에 지정된 태그만을 선택합니다.span { color:red; }만약 여러태그에 동일한 스타일을 적용하려면 해당 태그를 ,(콤마)로 구분해 지정합니다.span, p { color:red; } 더보기
[CSS3] 선택자 - 속성 선택 속성 선택자 문서내에 요소중 특정 속성과 그 값을 가진 태그만을 선택하도록 합니다.이름 : ▶요소 정의 input[type=text] { border-color:red; }▶정의된 요소중 type 속성이 text 인것만 해당 스타일 적용 하나의 속성이 아닌 여러 속성을 지정해야 한다면 []로 '[속성=값][속성=값]'처럼 연결하면 됩니다. 만약 값이 아닌 속성만을 대상으로 해야 한다면 값을 제외하고 다음과 같이 지정합니다.input[type] { border-color:red; }▶type 속성을 가진 요소만을 선택 속성과 값 사이에 특정 연산자를 사용하면 값의 구분을 제어할 수 있습니다. 위 예제에서는 = 기호만을 사용해 정확히 값에 일치하는 요소만을 선택하였으나 다음 표의 기호를 사용하면 값의 대한 .. 더보기
[CSS3] 선택자 - 부정 선택 말 그대로 선택자로 지정한 것이 아닌 것을 선택하는 선택자이며 not 을 사용합니다.이름 : 주소 : 위 구조에서input:not([type=text]) { color: red; }위와 같이 부정선택자를 사용하면 type이 text가 아닌것(예제에서 type이 button)만 선택하여 style을 적용하게 됩니다. 더보기
[CSS3] 선택자 - 구조 선택 먼저 구조선택은 구조상 같은 위치의 태그를 선택하기 위해 다음 4가지 keyword를 사용할 수 있습니다. first-child 첫번째 태그 last-child 마지막 태그 nth-child n번째 태그 nth-last-child 마지막에서 n번째 태그 예를 들면 이름 주소 나이 전화 위 구조에서 첫번째 td와 세번째 td를 구조태그로 선택하려면 다음과 같이 선택자를 작성할 수 있습니다.td:first-child, td:nth-child(3) { color:red; }특히 nth- 선택자를 사용하면 뒤에 가변적인 수열을 작성해서 원하는 태그를 반복적으로 선택할 수 있습니다. td:nth-child(2n+1) { color:red; }위 구현은 첫번째 선택자 구현과 결과가 일치합니다. 뒤에 지정한 숫자는 .. 더보기
[CSS3] 선택자 - 링크 선택 a tag 에서 href 속성이 적용된 다음과 같은 tag 를 선택하는 방법입니다.다음 네이버이와 같은 tag에서 사용할 수 있는 선택자는 다음과 같습니다.a:visited { color: red; }▶ 이미 방문한 적이 있는 link는 붉은색으로 표시합니다. a:link { color: blue; }▶ 모든 link tag 를 파란색으로 표시합니다. 더보기
[CSS3] 선택자 - 문자 선택 안녕하세요. 반갑습니다.위 tag 에서 첫글자 '안'과 첫번째줄인 '안녕하세요'에 style을 적용하려면 아래와 같은 선택자를 사용합니다.p::first-letter { font-size: 50px; }▶ 첫글자 '안'의 크기를 50px로 합니다. p::first-line { color: red; }▶ '안녕하세요' 첫줄 전체를 붉은 색으로 합니다. 문자와 관련하여 반응형으로 동작하는 재미있는 선택자도 있는데 p::selection { color: red; }이와 같이 selection 선택자를 사용하면 사용자가 p tag 내부의 특정 내용을 drag 하여 선택했을때 선택한 부분만 붉은색으로 바뀌도록 합니다. 또 다른 형태로 아래 선택자를 사용하면 tag 내부의 처음 또는 마지막에 특정 내용을 추가할 수.. 더보기