Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

정찬명 - CSS Selectors in HTML [WSConf. Seoul 2016/2017]

2,981 views

Published on

- WSConf. Seoul 2016 / 2017
- 2016.12.17(토) / 2017.03.11(토). 한국 Microsoft
- 발표자 : 정찬명(SK플래닛)

Published in: Technology
  • Did you try ⇒ www.HelpWriting.net ⇐?. They know how to do an amazing essay, research papers or dissertations.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • A professional Paper writing services can alleviate your stress in writing a successful paper and take the pressure off you to hand it in on time. Check out, please ⇒ www.WritePaper.info ⇐
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Download or read that Ebooks here ... ......................................................................................................................... DOWNLOAD FULL PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Doc Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • (Unlimited)....ACCESS WEBSITE Over for All Ebooks ................ accessibility Books Library allowing access to top content, including thousands of title from favorite author, plus the ability to read or download a huge selection of books for your pc or smartphone within minutes ......................................................................................................................... DOWNLOAD FULL PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m6jJ5M }
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Download or read that Ebooks here ... ......................................................................................................................... DOWNLOAD FULL PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Doc Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

정찬명 - CSS Selectors in HTML [WSConf. Seoul 2016/2017]

  1. 1. CSS selectorsin HTML 정 찬 명
  2. 2. CSS selectors from level 1
  3. 3. Lv.1 > 타입 선택자 형식 E // ★★★★★ 의미 E 타입의 HTML 요소를 모두 선택. 예시 section {} // <section>...</section> article {} // <article>...</article> nav {} // <nav>...</nav> aside {} // <aside>...</aside>
  4. 4. 활용 html { font-family: sans-serif; } body { margin: 0; } article, aside, details, footer, header, nav, section, summary { display: block; } /*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */ 참고: HTML 5.1 명세에는 picture, source, details, summary, menu, menuitem 요소가 새로 추가됐다. Lv.1 > 타입 선택자
  5. 5. 형식 E#my-id // ★★★★★ E.my-class // ★★★★★ 의미 E#my-id // my-id 라는 아이디를 포함한 E 요소 하나를 선택. E.my-class // my-class 라는 클래스를 포함한 E 요소 모두를 선택. 예시 #my-id {} // <div id="my-id">...</div> .my-class {} // <div class="my-class">...</div> http://example.com/#my-id id를 포함한 요소는 링크 타겟이 될 수 있다. Lv.1 > 아이디, 클래스 선택자
  6. 6. 1. #가 2. #a1-_ 3. #1 4. #-a 5. #- 6. #-- 7. #-1 8. #-_ 9. #_ 10. #_a 11. #_1 12. #__ 1. .가 2. .a1-_ 3. .1 4. .-a 5. .- 6. .-- 7. .-1 8. .-_ 9. ._ 10. ._a 11. ._1 12. .__ Lv.1 > 아이디, 클래스 선택자
  7. 7. 1. #가 // 특수 문자를 제외한 '문자'로 시작할 수 있다. 2. #a1-_ // 문자, 숫자, 하이픈, 언더스코어 사용 가능. 3. #1 // '숫자'로 시작할 수 없다. 4. #-a // '하이픈+문자'로 시작할 수 있다. 5. #- // '하이픈'으로만 구성할 수 없다. 6. #-- // '하이픈+하이픈'으로 시작할 수 없다. 7. #-1 // '하이픈+숫자'로 시작할 수 없다. 8. #-_ // '하이픈+언더스코어'로 시작할 수 있다. 9. #_ // '언더스코어'는 '문자'와 사용 규칙과 같다. 10. #_a // #_a == #aa 11. #_1 // # _1 == #a1 12. #__ // #__ == #aa Lv.1 > 아이디, 클래스 선택자
  8. 8. 형식 E F // ★★★★★ 의미 E 요소의 자손(자식, 손자) F 를 모두 선택. 예시 section h2 {} // <section><h2>...</h2></seciton> article p {} // <article><p>...</p></article> nav li {} // <nav><ul><li>...</li></ul></nav> aside a {} // <aside> <ul> <li> <a>...</a> </li> </ul> </aside> Lv.1 > 자손 선택자
  9. 9. 알아두기 가상 선택자 :x 용법 지금부터 콜론(:)이 포함되어 있는 가상 선택자가 등장합니다. E:focus {} E:hover {} ... :focus 와 *:focus는 완전히 동일합니다. 일반적으로는 아래와 같이 특정 선택자와 붙여 사용합니다. a:focus {} button:focus {} .btn:focus {} #search:focus {} :focus 만 사용했다면 *:focus와 동일하다는 것을 기억하세요.
  10. 10. 알아두기 가상 선택자 종류 가상 선택자는 크게 두 가지로 나눌 수 있습니다. 가상 클래스 선택자(:) 가상 요소 선택자(::) E:link E:visited E:active E:hover E:focus E:lang(fr) E:root E:nth-child(n) E:nth-last-child(n) E:nth-of-type(n) E:nth-last-of-type(n) E:last-child E:first-of-type E:last-of-type E:only-child E:only-of-type E:empty E:target E:enabled E:disabled E:checked E:not(s) E::first-line E::first-letter E::before E::after HTML에 이미 존재하는 DOM 노드를 선택하면 "가상 클래스" 선택자. HTML에 존재하지 않지만 가상의 DOM 노드를 생성하여 선택하는 것은 "가상 요소" 선택자. 참고: 가상 클래스는 가상 요소보다 구체성(선택자 우선순위 점수)이 높다.
  11. 11. 형식 E:link // ★★★★★ E:visited // ★★★★★ 의미 E:link // 아직 방문한 적 없는 E 링크를 선택. E:visited // 이미 방문한 E 링크를 선택. 예시 a:link {} a:visited {} :link, :visited 선택자는 a 요소에만 적용 가능. Lv.1 > 링크 가상 클래스 선택자
  12. 12. 형식 E:focus // ★★★★★ E:hover // ★★★★★ E:active // ★★★★★ 의미 E:focus // 키보드 초점을 포함한 요소를 선택. E:hover // 마우스 초점이 가리키는 요소를 선택. E:active // 실행 중인 링크/버튼 요소를 선택. 예시 a:focus, a:hover {} a:active {} Lv.1 > 사용자 액션 가상 클래스 선택자
  13. 13. 활용 a:link {} a:visited {} a:focus, a:hover {} // :focus, :hover에 동일한 스타일 할당. a:active {} // 클릭(또는 스페이스 키)하는 순간 선택. li:hover, // 행 구조에 사용 가능. tr:hover {} input:focus, // 폼 콘트롤 요소에 사용 가능. select:focus {} Lv.1 > 사용자 액션 가상 클래스 선택자
  14. 14. 형식 E::first-line // ★★ E::first-letter // ★ 의미 E::first-line // 블럭(or 인라인 블럭) E의 첫 번째 행 선택. E::first-letter // 블럭(or 인라인 블럭) E의 첫 번째 문자 선택. 예시 article::first-line {} // ::first-line 데모 p::first-letter {} // ::first-letter 데모 CSS3에서 가상요소는 더블콜론(::) 사용. IE 9 부터 지원. IE 8 까지 지원해야 한다면 싱글콜론(:)만 사용해도 됨. Lv.1 > 가상 요소 선택자
  15. 15. 알아두기 CSS 선택자 붙여 쓰기 선택자를 띄어쓰기 없이 붙여 쓰는 경우, 양쪽 조건이 모두 성립하는(&&) 요소를 선택한다. #a.b {} // #a 이면서 동시에 .b 일 때 선택 .b.c {} // .b 이면서 동시에 .c 일 때 선택 .c:hover {} // .c 이면서 동시에 :hover 일 때 선택 선택자의 이런 특징은 선택자를 조건문으로 사용할 수 있다는 것을 의미. #a {} #a.b {} #a.c {} #a 요소는 최소한 세 가지 스타일이 있다.
  16. 16. CSS selectors from level 2
  17. 17. 형식 * // ★★★ 의미 모든 요소를 선택. 예시 * { // 전체 초기화는 피하는 것이 좋다. margin: 0; padding: 0; list-style: none; } nav * {} // 필요한 곳에 범위를 제한해서 사용. Lv.2 > 전체 선택자
  18. 18. 알아두기 CSS 선택자 성능 CSS 선택자는 성능에 영향을 미치는가? 예: 1,000개의 노드에 최악의 선택자만 일부러 사용하는 경우, 최선의 선택자만 사용하는 것 보다 0.015 ~ 0.15초 정도 느릴 수 있음. 하지만 특정 선택자 패턴이 모든 브라우저에서 항상 느리다고 말할 수는 없다. 아니요: 현존하는 브라우저에서 선택자 패턴이 성능에 미치는 영향은 매우 미미. "CSS에서 아키텍처는 괄호 밖에 있고, 성능은 괄호 안에 있다." * 선택자가 성능에 미치는 영향 실험(En) - https://goo.gl/QfBUua
  19. 19. 형식 E > F // ★★★★★ 의미 E 요소의 자식 F를 선택. 예시 section > h2 {} article > p {} .gnb>ul>li>ul>li // 이런 구조의 DOM을 가정할 때. .gnb li {} // 조상 li와 자손 li 동시 선택. .gnb>ul>li {} // 조상 li만 선택. .gnb li li {} // 자손 li만 선택. Lv.2 > 자식 선택자
  20. 20. 형식 E + F // ★★★ 의미 E 요소를 뒤따르는 인접 형제 F를 선택. 예시 h2 + p {} // <h2></h2><p></p> h2 + div {} // <h2></h2><div></div> h2 + table {} // <h2></h2><table></table> a + p + b {} // <a></a><p></p><b></b> Lv.2 > 인접 형제 선택자
  21. 21. 활용 <div class="a b">동적으로 변하는 내용</div> <div class="c" hidden>따라 변하는 결과</div> // 요구사항 .b 클래스는 동적으로 추가/삭제. .b 클래스가 있으면 .c 요소를 화면에 출력. // CSS 코드 .b + .c { display:block; } // .b에 따라 .c 스타일 재설정. Lv.2 > 인접 형제 선택자
  22. 22. 형식 E[attr] // ★★★★ E[attr="val"] // ★★★★ E[attr~="val"] // ★ E[attr|="val"] // ★ 의미 E[attr] // attr 속성을 포함한 E요소를 선택. E[attr="val"] // attr과 val이 정확하게 일치하는 E 요소. E[attr~="val"] // 공백으로 분리된 val 값을 포함한 E 요소. E[attr|="val"] // 값이 val 또는 val- 으로 시작하는 E 요소. Lv.2 > 속성 선택자
  23. 23. 활용 [hidden] { display: none; } // 속성이 존재하면 선택. [disabled] { opacity: 0.5; } [type="checkbox"], // 속성과 값이 일치하면 선택. [type="radio"] { box-sizing: border-box; } [href="#"] { background: red; } [data-arr~="cola"] // 공백으로 분리된 값이 일치하면 선택. <a data-arr="apple cola bacon>...</a> [hreflang|="en"] // 완전히 일치하거나, 하이픈(-)이 따르면 선택. <a hreflang="en">...</a> <a hreflang="en-US">...</a> Lv.2 > 속성 선택자
  24. 24. 형식 E:first-child // ★★★★★ 의미 부모의 첫 번째 자식 E를 선택. 예시 .lnb :first-child {} // .lnb 자손 중 첫 번째 자식 선택. <nav class="lnb"> <h2>...</h2> // .lnb 요소의 *:first-child 이므로 선택. <ul> // nav 요소의 두 번째 자식. <li>...</li> // ul 요소의 *:first-child 이므로 선택. <li>...</li> // ul 요소의 두 번째 자식. </ul> </nav> Lv.2 > 구조 가상 클래스 선택자
  25. 25. 활용 .btn-group > .btn:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; } .list-group > li:first-child { border-top-left-radius: 4px; border-top-right-radius: 4px; } Lv.2 > 구조 가상 클래스 선택자
  26. 26. 형식 E:lang(str) // ★★ 의미 HTML lang 속성과 값을 이용하여 언어를 명시한 요소 E를 선택. 예시 :lang(ko) { font-family: Dotum, sans-serif; } :lang(en) { font-family: Helvetica, sans-serif; } <html lang="ko"> Dotum <p>Dotum <q lang="en">Helvetica</q> Dotum</p> </html> HTML lang 속성에는 유효한 언어 코드(BCP 47) 값을 사용해야 한다. Lv.2 > :lang() 가상 클래스 선택자 IE 7(X)
  27. 27. 형식 E::before // ★★★★★ E::after // ★★★★★ 의미 E::before // 요소 내부 시작 지점 가상 요소 선택. E::after // 요소 내부 종료 지점 가상 요소 선택. 예시 body::before { content: "Hello World!"; } body::after { content: "Goodbye!"; } <body> <::>Hello World!</::> // 시작 지점에 가상 인라인 요소 생성 후 선택. ... <::>Goodbye!</::> // 종료 지점에 가상 인라인 요소 생성 후 선택. </body> Lv.2 > ::before, ::after 가상 요소 선택자 IE 7(X)
  28. 28. 활용 .parent::after{ content: ""; display: block; clear: both; } .a{float:left;} .b{float:right;} .parent .a {float:left;} .b {float:right;} .parent .a {float:left;} .b {float:right;} .parent::after{clear:both;} Lv.2 > ::before, ::after 가상 요소 선택자 IE 7(X)
  29. 29. CSS selectors from level 3
  30. 30. 형식 E ~ F // ★★★ 의미 E 요소 이후에 등장하는 형제 F를 모두 선택. 예시 h2 ~ p {} // h2 요소를 뒤 따르는 모든 p 요소 선택. <h2>...</h2> <div>...</div> <p>...</p> // 앞선 형제 노드 중 h2가 있으므로 선택한다. <ul>...</ul> <p>...</p> // 앞선 형제 노드 중 h2가 있으므로 선택한다. <div>...</div> Lv.3 > 일반 형제 선택자
  31. 31. 형식 E[attr^="val"] // ★★★ E[attr$="val"] // ★★★ E[attr*="val"] // ★ 의미 E[attr^="val"] // 속성 값이 val 으로 시작하는 E 선택. E[attr$="val"] // 속성 값이 val 으로 끝나는 E 선택. E[attr*="val"] // 속성 값이 val 을 포함하는 E 선택. Lv.3 > 속성 선택자
  32. 32. 활용 a[href^="http"] {} <a href="http://example.com/">...</a> img[src$=".png"] {} <img src="example.png" alt="..."> a[href*="/product/"] {} <a href="../product/ex.html">...</a> Lv.3 > 속성 선택자
  33. 33. 형식 E:checked // ★★★★★ E:enabled // ★ E:disabled // ★★★★★ 의미 E:checked // 사용자가 체크한 인풋 요소 E를 선택. E:enabled // 사용 가능한 UI 요소 E를 선택. E:disabled // 사용 불가능한 UI 요소 E를 선택. Lv.3 > UI 요소 상태 가상 클래스 선택자 IE 7~8(X)
  34. 34. 활용 :checked {} <input type="radio"> // checked 속성이 없어도 <input type="checkbox"> // 사용자 액션에 따라 선택. :disabled {} <input disabled> // disabled 속성에 따라서 선택. <button disabled> Lv.3 > UI 요소 상태 가상 클래스 선택자 IE 7~8(X)
  35. 35. 형식 E:target // ★★★ 의미 URI 타겟이 앵커(#)를 가리키는 경우 타겟 요소를 선택한다. 예시 section:target {} http://example.com/index.html#overview <section id="overview">...</section> Lv.3 > 타겟 가상 클래스 선택자 IE 7~8(X)
  36. 36. 활용 .panel { display:none; } .panel:target { display:block; } <a href="#introduction">...</a> <section class="panel" id="introduction">...</section> <section class="panel" id="selectors">...</section> <section class="panel" id="...">...</section> Pure CSS :target slider demo: http://codepen.io/naradesign/pen/gaWggP?editors=1100 Lv.3 > 타겟 가상 클래스 선택자 IE 7~8(X)
  37. 37. 형식 E:not(s) // ★★★ 의미 E 요소 중 s 아닌 요소를 선택. 예시 a:not(.btn) {} // a 요소에 .btn 클래스 없는 경우 선택. img:not([alt]) {} // img 요소에 alt 속성 없는 경우 선택. a:not([href^="http"]) {} <a href="product/index.html">...</a> // a 요소의 href 값이 http로 시작하지 않으므로 선택. Lv.3 > 부정 가상 클래스 선택자 IE 7~8(X)
  38. 38. 형식 E:root // ★ 의미 문서의 최상위 요소 E 선택. HTML 에서는 무조건 <html>. 예시 :root {} // HTML 요소를 선택. <html> <head>...</head> <body>...</body> </html> Lv.3 > 구조 가상 클래스 선택자 IE 7~8(X)
  39. 39. 형식 E:empty // ★★ 의미 자식(또는 텍스트)이 없는 요소 E를 선택. 예시 :empty {} // 비어있는 모든 요소를 선택. <span></span> // 선택 함. <span>내용 있는 요소</span> // 선택 안 함. Lv.3 > 구조 가상 클래스 선택자 IE 7~8(X)
  40. 40. 형식 E:only-child // ★★★ 의미 부모의 유일한 자식이면 E를 선택. 예시 p:only-child {} // p가 유일한 자식일 때 선택. <div><p>...</p></div> // p 선택 함. div의 유일한 자식이므로. <div> <p>...</p> // p 선택 안 함. 유일한 자식 아니므로. <span>...</span> </span> Lv.3 > 구조 가상 클래스 선택자 IE 7~8(X)
  41. 41. 알아두기 E:x-of-type 구조 가상 클래스 선택자 지금부터 :x-of-type 이라는 형식의 구조 가상 클래스 선택자가 등장. 이런 선택자들이 있습니다. E:only-of-type // :only-child 중 E만 필터링. E:first-of-type // :first-child 중 E만 필터링. E:last-of-type // :last-child 중 E만 필터링. E:nth-of-type(n) // :nth-child(n) 중 E만 필터링. E:nth-last-of-type(n) // :nth-last-child(n) 중 E만 필터링. 이것을 기억해 두세요. "-of-type" 이라는 것은 HTML 요소 이름 E로 필더링 된 것을 의미. "-of-type" 으로 끝나는 선택자는 타입을 구분하지 않는 "-child" 선택자에서 E 타입만 선별(필터링) 후, 그 중에서만 선택하도록 구체화 한 것. 다시 말해 "-of-type" 으로 끝나는 선택자는 선택 시 E 타입 아닌 요소의 존재나 순서를 전혀 고려하지 않음.
  42. 42. 형식 E:only-of-type // ★★★ 의미 부모의 자식으로 E 타입이 하나 뿐일 때 선택. 예시 p:only-of-type {} // p가 유일한 타입일 때 선택. <div><p>...</p></div> // p 선택 함. div 에서 유일한 p 타입. <div> <p>...</p> // p 선택 함. div 에서 유일한 p 타입. <span>...</span> // p 아닌 요소는 고려하지 않음. </div> Lv.3 > 구조 가상 클래스 선택자 IE 7~8(X)
  43. 43. 형식 E:last-child // ★★★★★ 의미 부모의 마지막 자식 E를 선택. 예시 .lnb :last-child {} // .lnb 자손 중 모든 마지막 자식. <nav class="lnb"> <h2>...</h2> // .lnb 요소의 첫 번째 자식. <ul> // .lnb 요소의 *:last-child 이므로 선택. <li>...</li> // ul 요소의 첫 번째 자식. <li>...</li> // ul 요소의 *:last-child 이므로 선택. </ul> </nav> Lv.3 > 구조 가상 클래스 선택자 IE 7~8(X)
  44. 44. 활용 .btn-group > .btn:last-child { border-top-left-radius: 0; border-bottom-left-radius: 0; } .list-group > li:last-child { border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; } Lv.3 > 구조 가상 클래스 선택자 IE 7~8(X)
  45. 45. 형식 E:first-of-type // ★★ 의미 부모의 자식 E 타입 중 첫 번째 요소 선택. 예시 p:first-of-type {} // p 타입 중 첫 번째 요소 선택. <article> <img> // 계산에 포함하지 않는 타입. <p>...</p> // p 타입 중 첫째 요소이므로 선택. <div>...</div> // 계산에 포함하지 않는 타입. <p>...</p> // p 타입 중 첫째 아니므로 선택 안 함. </article> Lv.3 > 구조 가상 클래스 선택자 IE 7~8(X)
  46. 46. 형식 E:last-of-type // ★★ 의미 부모의 자식 E 타입 중 마지막 요소 선택. 예시 p:last-of-type {} // p 타입 중 마지막 요소 선택. <article> <p>...</p> // p 타입 중 마지막 요소 아니므로 선택 안 함. <div>...</div> // 계산에 포함하지 않는 타입. <p>...</p> // p 타입 중 마지막 요소이므로 선택. <img> // 계산에 포함하지 않는 타입. </article> Lv.3 > 구조 가상 클래스 선택자 IE 7~8(X)
  47. 47. 알아두기 E:nth-x(n) 구조 가상 클래스 선택자 지금부터 :nth-x(n) 형식의 구조 가상 클래스 선택자가 등장합니다. 이런 선택자들이 있습니다. E:nth-child(n) E:nth-of-type(n) E:nth-last-child(n) E:nth-last-of-type(n) 이것을 기억해 두세요. :nth- :nth- 선택자는 (n)번째 요소 또는 (n)번째 타입을 선택하는 역할. (n)의 형식은 다음과 같습니다. (정수) // :nth-child(4) 4번째 요소 선택. 4 (배수n) // :nth-child(2n) 2배수 모두 선택. 2, 4, 6, 8... (±배수n ±정수) // :nth-child(2n+4) 4번째 요소부터 2배수 선택. // 4, 6, 8, 10...
  48. 48. 형식 E:nth-child(n) // ★★★★★ 의미 자식 중 (n) 번째 요소가 E 라면 선택. 예시 a:nth-child(3) {} <div> <a>...</a> <b>...</b> <a>...</a> // 세 번째 요소가 a 이므로 선택. <b>...</b> </div> Lv.3 > 구조 가상 클래스 선택자 IE 7~8(X)
  49. 49. 활용 li:nth-child(odd) // li:nth-child(even) 형식도 가능. li:nth-child(2n+1) // li:nth-child(odd)와 동일한 결과. li:nth-child(2n) // li:nth-child(2n+1)와 동일. <ul> <li>...</li> <li>...</li> <li>...</li> <li>...</li> </ul> 이 밖에 게시판 등 표 형식에서 tr:nth-child(n) 형식으로 사용하는 경우가 많다. Lv.3 > 구조 가상 클래스 선택자 IE 7~8(X)
  50. 50. 형식 E:nth-of-type(n) // ★★ 의미 자식 E 타입 중 (n) 번째 요소 선택. 예시 a:nth-of-type(2) {} <div> <a>...</a> // a 타입의 첫 번째 요소. <b>...</b> <a>...</a> // a 타입의 두 번째 요소이므로 선택. <b>...</b> </div> Lv.3 > 구조 가상 클래스 선택자 IE 7~8(X)
  51. 51. 형식 E:nth-last-child(n) // ★★★ 의미 자식 중 끝에서 (n) 번째 요소가 E 라면 선택. 예시 b:nth-last-child(3) {} <div> <a>...</a> <b>...</b> // 끝에서 세 번째 요소가 b 이므로 선택. <a>...</a> <b>...</b> </div> Lv.3 > 구조 가상 클래스 선택자 IE 7~8(X)
  52. 52. 형식 E:nth-last-of-type(n) // ★★ 의미 자식 E 타입 중 끝에서 (n) 번째 요소 선택. 예시 b:nth-last-of-type(2) {} <div> <a>...</a> <b>...</b> // b 타입 중 끝에서 두 번째 요소. <a>...</a> <b>...</b> // b 타입 중 끝에서 첫 번째 요소. </div> Lv.3 > 구조 가상 클래스 선택자 IE 7~8(X)
  53. 53. 알아두기 구조 가상 클래스 선택자 활용 DOM 노드 수에 따라 동일한 요소에 다른 너비 값 적용하기는 CSS만으로 가능할까? 예를 들어 탭 메뉴 수에 따라 메뉴의 너비를 다른 값으로 처리해야 할 때... 메뉴가 1 개일 때 li { width: 100%; } 메뉴가 2 개일 때 li { width: 50%; } 메뉴가 3 개일 때 li { width: 33.33%; } 메뉴가 4 개일 때 li { width: 25%; }
  54. 54. 알아두기 구조 가상 클래스 선택자 활용 웹 브라우저가 CSS flex 속성을 지원하는 경우 코드는 아래와 같이 단순하게 짤 수 있다. ul { display: flex; } li { flex: 1; } CSS flex를 이용한 예 - https://goo.gl/zwX45V CSS flex 속성은 IE 10 이상 버전부터 지원.
  55. 55. 알아두기 구조 가상 클래스 선택자 활용 IE 9을 지원해야 하는 경우라면 flex 속성을 사용할 수 없으므로 JavaScript(jQuery) 사용을 고려할 수 있다. var $li = $("ul").find("li"); $li.css("width", 100 / $li.length + "%"); jQuery를 이용한 예 - https://goo.gl/pEBy1O
  56. 56. 알아두기 구조 가상 클래스 선택자 활용 구조 가상 클래스 선택자를 사용하면 CSS 만으로도 IE 9을 지원하는 코드를 작성할 수 있다. li:only-child { width: 100%; } li:first-child:nth-last-child(2), li:first-child:nth-last-child(2)+li { width: 50%; } li:first-child:nth-last-child(3), li:first-child:nth-last-child(3)~li { width: 33.33%; } li:first-child:nth-last-child(4), li:first-child:nth-last-child(4)~li { width: 25%; } CSS 선택자를 이용한 예 - https://goo.gl/V64vSl
  57. 57. CSS selector specificity
  58. 58. 하나의 요소를 가리키는 여러 개의 선택자가 존재하는 경우 우선 순위가 높은 선택자는 우선 순위가 낮은 선택자의 속성 값을 덮어 쓸 수 있다. 선택자 우선 순위 규칙 1 나중에 선언한 코드가 우선순위가 높다. .a { color:red; } // 우선순위 낮음 .b { color:blue; } // 우선순위 높음 <i class="a b">나는 파랑입니다.</i> 삽입 스타일과 외부 스타일 또한 이 규칙의 적용을 받는다. <style> 과 <link> 중 나중에 선언한 코드의 우선순위가 더 높다. Selector specificity > 우선 순위 규칙 1
  59. 59. 삽입 스타일과 외부 스타일 예. 나중에 선언한 코드의 우선 순위가 높다. <style> .a { color:red; } // 우선순위 낮음 </style> <link rel="stylesheet" href="test.css"> test.css .b { color:blue; } // 우선순위 높음 <i class="a b">나는 파랑입니다.</i> 삽입 스타일은 외부 스타일보다 항상 나중에 선언하는 것을 강력하게 권장한다. Selector specificity > 우선 순위 규칙 1
  60. 60. 선택자 우선 순위 규칙 2는 규칙 1 보다 우선 순위가 높다. 선택자 우선 순위 규칙 2 구체성 점수가 높은 선택자가 우선 순위가 높다. 1. 인라인 스타일 // 구체성이 가장 높다. 2. 아이디 선택자 // 구체성이 두 번째 높다. 3. 클래스, 가상 클래스, 속성 선택자 // 구체성이 세 번째 높다. 4. 타입, 가상 요소 선택자 // 구체성이 네 번째 높다. 우선순위를 고려하여 나중에 선언한 선택자라도, 구체성 점수가 낮으면 앞서 작성한 선택자보다 우선 순위에서 밀리게 된다. Selector specificity > 우선 순위 규칙 2
  61. 61. 선택자 구체성 점수를 계산하는 공식은 다음과 같다. 선택자에서 구체성을 발견할 때 마다 아래 칸에 1을 더함. 0 0 0 0 인라인 스타일 아이디 선택자 클래스, 가상 클래스, 속성 선택자 타입, 가상 요소 선택자 특정 선택자의 구체성 점수가 1000 이라면 구체성 점수가 0000~0999인 선택자 보다 우선 순위가 높다. Specificity calculator - https://specificity.keegan.st/ Selector specificity > 우선 순위 규칙 2
  62. 62. DIY
  63. 63. CSS Diner CSS 1~3 선택자를 퀴즈를 풀며 익혀 보세요. https://flukeout.github.io/
  64. 64. :nth Tester 구조 가상 클래스 선택자를 직접 테스트해 보세요. https://css-tricks.com/examples/nth-child-tester/
  65. 65. Specificity calculator 선택자 우선 순위를 계산해 보세요. https://specificity.keegan.st/
  66. 66. CSS 4 다가올 미래의 CSS 4 선택자를 열람하세요. http://css4-selectors.com/
  67. 67.

×