여러분은 Show
1. ** { margin: 0; padding: 0; } 고급 선택자로 이동하기 전에 초보자를 위해 쉬운 선택자부터 알아보죠. 별표는 페이지에 있는 전체 요소를 대상으로 합니다. 많은 개발자가
#container * { border: 1px solid black; } 이 코드는 데모 보기 호환성
2. #X#container { width: 960px; margin: auto; } 선택자 앞에 해시(#) 기호를 붙여서
데모 보기 호환성
3. .X.error { color: red; }
데모 보기 호환성
4. X Yli a { text-decoration: none; } 다음으로 가장 많이 언급하는 선택자는
데모 보기 호환성
5. Xa { color: red; } ul { margin-left: 0; } 만일 여러분이 데모 보기 호환성
6. X:visited와 X:linka:link { color: red; } a:visted { color: purple; } 클릭하기 전 상태의 앵커 태그 전체를 대상으로 하려고
데모 보기 호환성
7. X + Yul + p { color: red; } 인접 선택자로 부르는 선택자입니다. 앞의 요소 바로 뒤에 있는 요소만 선택합니다. 위 코드에서 각 데모 보기 호환성
8. X > Ydiv#container > ul { border: 1px solid black; } 일반 <div id="container"> <ul> <li> List Item <ul> <li> Child </li> </ul> </li> <li> List Item </li> <li> List Item </li> <li> List Item </li> </ul> </div>
이런 이유로 자식 선택자를 이용해 성능을 향상할 수 있습니다. 사실, 자바스크립트를 기반으로 하는 CSS 선택자 엔진으로 작업할 때 추천합니다. 데모 보기 호환성
9. X ~ Yul ~ p { color: red; } 이 형제 선택자는 데모 보기 호환성
10. X[title]a[title] { color: green; } 속성 선택자(attributes selector)라고 말하며, 앞의 예에서 데모 보기 호환성
11. X[href="foo"]a[href="https://net.tutsplus.com"] { color: #1f6053; /* nettuts green */ } 위의 코드는 https://net.tutsplus.com;로 연결된 전체 앵커 태그에 스타일을 적용할 것입니다. 우리 브랜드 컬러인 녹색이 적용되겠지요. 그 외의 앵커 태그는 스타일의 영향을 받지 않습니다.
동작은 잘하겠지만, 융통성은 낮습니다. 만약 링크가 Nettuts+로 직접 이어지지만, 경로를 전체 url이 아닌 nettuts.com으로 한다면 어떨까요? 그 경우에 우리는 정규식 표현 문장을 약간 사용할 수 있습니다. 데모 보기 호환성
12. X[href*="nettuts"]a[href*="tuts"] { color: #1f6053; /* nettuts green */ } 야아. 우리에게 필요한 선택자네요. 별표는 입력값이 속성값 안 어딘가에 보여야 한다는 것을 표시합니다. 그렇게 이 구문은 nettuts.com, net.tutsplus.com 그리고 tutsplus.com까지도 적용하고 있습니다. 폭넓은 표현이라는 것을 알아 두세요. 만약 앵커 태그의 url에 tuts 문자열이 일부 Evato가 아닌 사이트로 연결되어 있다면 어떨까요? 더 자세히 작성해야 한다면, 문자열의 앞과 뒤에 데모 보기 호환성
13. X[href^="http"]a[href^="http"] { background: url(path/to/external/icon.png) no-repeat; padding-left: 10px; } 웹사이트에서 외부로 연결된 링크 옆에 작은 아이콘을 어떻게 보이게 했는지 궁금해한 적이 있나요? 틀림없이 전에 본 적이 있을 것입니다. 링크를 클릭하면 전혀 다른 웹사이트로 이동하리라는 것을 알게 해주니까요. 캐럿 기호를 이용하는 쉬운 작업입니다. 문자열의 시작을 표기하는 정규 표현식에서 흔히 사용됩니다. 만약
여러분이 사진으로 링크 걸린 앵커 전체에 스타일을 적용하고 싶다면 어떨까요? 그 경우에는 문자열의 끝을 찾아봅시다. 데모 보기 호환성
14. X[href$=".jpg"]a[href$=".jpg"] { color: red; } 문자열 끝에 적용하도록 정규 표현식 기호인 데모 보기 호환성
15. X[data-*="foo"]a[data-filetype="image"] { color: red; } 8번 내용을 다시 참조합시다. 여러 가지 이미지 형식( a[href$=".jpg"], a[href$=".jpeg"], a[href$=".png"], a[href$=".gif"] { color: red; } 그런데, 이 방식은 골치 아프고 비효율적입니다. 커스텀 속성을 사용하는 다른 해결 방식이 있습니다. 이미지로 링크 걸린 앵커마다 <a href="path/to/image.jpg" data-filetype="image"> Image Link </a> 그러면 갈고리(hook) 역할을 이용해 해당 앵커만 대상으로 삼는 일반 속성 선택자를 사용할 수 있습니다. a[data-filetype="image"] { color: red; } 데모 보기 호환성
16. X[foo~="bar"]a[data-info~="external"] { color: red; } a[data-info~="image"] { border: 1px solid black; } 친구에게 깊은 인상을 남겨줄 특별한 선택자가 있습니다. 이 요령을 알고 있는 사람은 그리 많지 않습니다. 물결표( 15번에 있는 커스텀 속성
방식으로 "<a href="path/to/image.jpg" data-info="external image"> Click Me, Fool </a> 위의 마크업을 적당한 위치에 쓰면 ~ 속성 선택자 방식을 이용해 두 개의 값 중 하나라도 있는 태그를 대상으로 삼을 수 있습니다. /* Target data-info attr that contains the value "external" */ a[data-info~="external"] { color: red; } /* And which contain the value "image" */ a[data-info~="image"] { border: 1px solid black; } 꽤 훌륭하지요? 데모 보기 호환성
17. X:checkedinput[type=radio]:checked { border: 1px solid black; } 이 가상 클래스는 라디오 버튼이나 체크박스처럼 체크되는 사용자 인터페이스 요소만을 대상으로 합니다. 아래 코드처럼 간단합니다. 데모 보기 호환성
18. X:after
많은 사람이 clear-fix 핵을 접했을 때 이 클래스를 맨 먼저 도입했었습니다. .clearfix:after { content: ""; display: block; clear: both; visibility: hidden; font-size: 0; height: 0; } .clearfix { *display: inline-block; _height: 1%; } 이 핵은 요소 뒤에 공간을 덧붙이고 float 효과를 제거하는데 다른 창의적 방식은 그림자 제작에 관한 간단한 팁을 참조해 보세요.
호환성
19. X:hoverdiv:hover { background: #e3e3e3; } 에이. 이 선택자는 알고 있겠죠. 공식 용어는
대부분 hover 상태에서, 가령 앵커 태그에 a:hover { border-bottom: 1px solid black; }
호환성
20. X:not(선택자)div:not(#container) { color: blue; }
혹은, (권장하지 않지만) 제가 단락 태그만 제외하고 요소 전체를 선택하고 싶다고 한다면 아래처럼 하면 됩니다. *:not(p) { color: green; } 데모 보기 호환성
21. X::가상 요소p::first-line { font-weight: bold; font-size: 1.2em; } 첫 번째 줄이나 첫 글자와 같이 요소 일부분에 스타일을 적용하는데 가상 요소(
단락의 첫 글자p::first-letter { float: left; font-size: 2em; font-weight: bold; font-family: cursive; padding-right: 2px; } 이 코드는 페이지에 있는 단락을 모두 찾은 다음 해당 요소의 첫 글자만을 대상으로 하는 추상 개념입니다. 신문처럼 글의 첫 글자를 스타일로 꾸미는 데 자주 사용됩니다. 단락의 첫 줄p::first-line { font-weight: bold; font-size: 1.2em; } 마찬가지로
데모 보기 호환성
22. X:nth-child(n)li:nth-child(3) { color: red; } 여러 요소 중에서 특정 요소를 지목하는 방법이 없었던 시절이 기억나나요? 그 문제를 풀어줄
자식 요소의 변수 집합을 선택하는 데에도 이 방식을 활용할 수 있습니다. 가령, 항목의 4번째마다 선택하려면 데모 보기 호환성
23. X:nth-last-child(n)li:nth-last-child(2) { color: red; } 만약 이 선택자는 16번과 거의 동일합니다. 다만 집합의 끝에서부터 출발하면서 동작한다는 게 다릅니다. 데모 보기 호환성
24. X:nth-of-type(n)ul:nth-of-type(3) { border: 1px solid black; }
순서를 정하지 않은 목록 5개가 있는 마크업을 상상해 보세요. 세 번째 데모 보기 호환성
25. X:nth-last-of-type(n)ul:nth-last-of-type(3) { border: 1px solid black; } 일관성을 유지하도록 목록 선택자의 끝부터 출발해 지정한 요소를 대상으로 하는 호환성
26. X:first-childul li:first-child { border-top: none; } 이 구조적 가상 클래스를 이용해 부모 요소의 첫 번째 자식만 대상으로 삼을 수 있습니다. 목록에서 맨 처음과 맨 나중 항목에서 테두리 선을 제거하는데 이 방식을 흔히 사용합니다. 예를 들면, 가로 행 목록이 있다고 합시다. 행마다 많은 디자이너가 이를 보완하려고 데모 보기 호환성
27. X:last-childul > li:last-child { color: green; }
예제이 클래스 중에 활용 가능한 사례를 보여주는 간단한 예제를 만들어 봅시다. 스타일이 적용된 항목을 제작하겠습니다. 마크업<ul> <li> List Item </li> <li> List Item </li> <li> List Item </li> </ul> 그냥 코드입니다. 단순한 목록일 뿐이지요. CSSul { width: 200px; background: #292929; color: white; list-style: none; padding-left: 0; } li { padding: 10px; border-bottom: 1px solid black; border-top: 1px solid #3c3c3c; } 이 스타일에
배경을 입히고, 브라우저상에서
단 한 가지 문제점은, 위의 이미지에서 보이듯, 순서에 정해지지 않은 목록의 맨 위와 맨 아래에도 테두리 선이 적용된다는 것입니다. 자연스럽게 보이지 않죠. li:first-child { border-top: none; } li:last-child { border-bottom: none; } 야아. 고쳐졌군요! 데모 보기 호환성
맞아요. IE8은 28. X:only-childdiv p:only-child { color: red; } 솔직히 여러분은 아마 이 선택자는 부모의 단 하나의 자식 요소를 지정할 수 있습니다. 위의 코드를 참조하면, 가령, 아래의 마크업을 생각해 봅시다. <div><p> My paragraph here. </p></div> <div> <p> Two paragraphs total. </p> <p> Two paragraphs total. </p> </div> 이 경우, 두 번째 데모 보기 호환성
29. X:only-of-typeli:only-of-type { font-weight: bold; } 이 구조상의 가상 클래스는 기발한 방식으로 사용될 수 있습니다. 부모 컨테이너에 형제 요소가 없는 요소를 대상으로 합니다. 예로, 단 하나의 목록 아이템인 우선, 이 작업을 어떻게 완료할지 자신에게 질문해 보세요. 여러분은 ul > li:only-of-type { font-weight: bold; } 데모 보기 호환성
30. X:first-of-type
테스트이해를 돕도록 테스트를 해봅시다. 아래 마크업을 코드 편집기에 복사해 넣으세요. <div> <p> My paragraph here. </p> <ul> <li> List Item 1 </li> <li> List Item 2 </li> </ul> <ul> <li> List Item 3 </li> <li> List Item 4 </li> </ul> </div> 다음 내용을 읽기 전에 "List Item 2"만 대상으로 하는 방법을 생각해 보세요. 생각났다면 (혹은 포기했더라도) 다음으로 넘어갑니다. 해결 방법 1이 테스트를 푸는 방법은 여러 가지입니다. 이 중에서 몇 가지를 살펴보겠습니다. ul:first-of-type > li:nth-child(2) { font-weight: bold; } 이 코드는 기본적으로 "페이지에서 순서를 중요시하지 않는 첫 번째 목록을 찾고 나서 목록 아이템인 직계 자식만 찾아라."라고 이야기합니다. 그다음, 그 결과 세트에서 두 번째 목록 아이템만 걸러냅니다. 해결 방법 2다른 방법은 인접 선택자를 사용하는 것입니다. p + ul li:last-child { font-weight: bold; } 이 시나리오에서는 해결 방법 3이 선택자를 써서 원하는 대로 불쾌해하거나 쾌활해 할 수 있습니다. ul:first-of-type li:nth-last-child(1) { font-weight: bold; } 이번에는 페이지에 있는 첫 번째 데모 보기 호환성
결론인터넷 익스플로러 6과 같이 하위 브라우저에서도 보이게 하려면, 새로운 선택자를 사용할 때 늘 조심해야 합니다. 그렇다고 해서 배움을 단념하지 마세요. 자신에게 막심한 해를 끼치는 것이니까요. 브라우저 호환선 목록을 여기에서 참고해 보세요. 아니면, 하위 브라우저에 위의 선택자들을 지원하는 딘 에드워드의 멋진 IE9.js 스크립트를 사용할 수 있습니다. 둘째로, 널리 쓰이는 jQuery 같은 자바스크립트 라이브러리를 사용해서 작업할 때, 가능한 라이브러리에 있는 커스텀 메소드/선택자를 덮어쓰는 네이티브 CSS3 선택자를 만들어 보세요. 선택자 엔진이 자신이 아닌 브라우저의 네이티브 파싱을 사용하게 되어 코드의 파싱 속도가 더 빨라집니다. 읽어 주셔서 감사드립니다. 여러분이 여기에서 한두 가지 요령을 적용해 보길 바랍니다. |