CSS

선택자 공부 팁

여기서는 선택자를 쉽게 공부하고, 찾아 쓸 수 있는 방법을 알아봅니다. 

CSS Diner

CSS 선택자를 게임의 형식을 통해서 익힐 수 있는 사이트

http://flukeout.github.io/

CheatSheet

google image search 

댓글

댓글 본문
  1. datsciseol
    20210115
  2. 주니어개발자
    너무 좋은 소스
  3. 따뜻한츄르
    201229
  4. 201223 ✅
  5. nicktheman
    정말 어려웠네요 ㄷㄷ..
    몇개는 답지도 봐서 좀 슬프네요
    복습까지 하겠습니다! 엄청 헷갈려요 ㅠ
  6. 몽실엄마
    게임도 해봤어요 7단계에서 모르겠어요..
  7. 201213
  8. Seunghyuk Rodrigo Kim
    감사합니다
  9. 켄드릭
    2020년10월29일(목) 1차 학습완료
  10. jaehyunlee
    완료
  11. 오석민
    완료
  12. 박병진
    2020.10.01 완료
  13. 콜라
    20200926완료
  14. 여니여니
    200920 감사합니다!
  15. switpotato
    20200824완료감사합니다!
  16. 김성곤
    20200717 감사합니다!
  17. jaehyunlee
    완료
  18. 007bbang
    감사합니다~ 이해하기가 더 쉽네요
    대화보기
    • 한강
      게임 치크시트 감사합니다~~^^!
      200527
    • 나의라임오지는나무
      20200317
    • css선택자 게임도전 / cheatsheet
    • 신세기
      이 강의를 보고 CSS 다이너 게임의 한국어판을 만들었습니다. https://sinseiki.github.io/cssdiner 에서 하실 수 있습니다.
    • 무지개반사
      완료
    • opper
      2020. 1. 6 수업완료
    • Blanc
      2020.01.04
    • alpha
      191001 수강완료
    • 태태
      수강완료
    • 치디우기
      2019/08/26 수강완료
    • 류석현
      15가최대 인것같네요!
    • 류석현
      수강완료
    • FIRE
      20190727 완료
    • 다나가
      190718 - 수업완료!!
    • 김주엽
      수업완료
    • 홍명교
      완료
    • 노혜주
      완료
    • lygon
      2019-02-22 완료
    • 숨이
      완료했습니당
    • christine
      항상 유익한 강좌 감사합니다♥ 목소리도 너무 좋으셔서 강좌에 더 빠져드네요 :)
      강좌 내용도 너무너무 알짜배기에다가 하나도 지루하지 않고 재밌게 이해가 잘 되도록 진행해주셔서 html부터 css까지 이틀만에 뛰었습니다! 그래도 하나도 안 복잡하고 모두 이해 했어요! 정말 정말 감사드립니다 ♥
      게다가 재밌는 게임까지!! 재밌게 플레이할게요~ 선생님 강좌는 모두 볼 예정입니다 :) 감사해요!!
    • 애나초
      8번부터 막힙니다 슬픕니다 ..
    • 김민영
      완료
    • Chang Yeon Lee
      어렵네요 일주일에 한번정도 복습하면 될듯
    • Chang Yeon Lee
      ㅋㅋ 13번 bento+pickle.small,pickle.small+pickle로 길게 써서 통과했는데 답안지 보니까 bento~pickle ㅠㅠ
      머리가 나쁘면 손발이 고생한다는 말이 딱맞네요
    • 로버트한
      치트시트 정말 좋은 정보 감사합니다. ~~ㅎ
    • 안재규
      .small:last-child
      이렇게만 하셔도 돼요~
      대화보기
      • 몽키바나나
        막혔던 문제
        17번 Select the small apple and the pickle 접시에 있는 사과와, 마지막에 있는 피클을 선택

        <div class="table">
        <plate id="fancy">
        <apple class="small" />
        </plate>
        <plate />
        <plate>
        <orange class="small" />
        <orange />
        </plate>
        <pickle class="small" />
        </div>

        1. 접시위 사과 선택하기
        접시위에 있는 사과만을 선택해야 하므로 선택자가 없다면 plate apple
        문제에는 plate와 apple에 각각의 id, class 선택자가 있으므로 #fancy .small이 정확한 답

        2. 맨 뒤의 피클 선택하기
        뒤쪽의 피클을 선택해야 하므로 선택자가 없다면 pickle:last-child
        문제에는 pickle에 class 선택자가 있으므로 .small:last-child가 정확한 답

        3. 접시 위 사과, 맨 뒤 피클 같이 선택
        1번 2번을 합치면 17번 문제의 정답
        #fancy .small, .small:last-child !!
        다른 것들도 시도해보니 정답으로 넘어가긴 하지만 이게 제 생각에는 정확한 답 같습니다..
      • 점심호랑이
        감사합니다
      • SlowStarter
        감사합니다!
      • 향구
        잘듣겠습니다~
      • 출처 : https://gist.github.com/kuro414/bf21d7e3efb15
        #01 plate Select the plates
        #02 bento Select the bento boxes
        #03 #fancy Select the fancy plate
        #04 plate > apple Select the apple on the plate
        #05 #fancy pickle Select the pickle on the fancy plate
        #06 .small Select the small apples
        #07 orange.small Select the small oranges
        #08 bento > orange Select the small oranges in the bentos
        #09 plate, bento Select all the plates and bentos
        #10 * Select all the things!
        #11 orange.small, pickle, plate > apple Select everything on a plate
        #12 plate + apple Select every apple that's next to a plate
        #13 bento ~ pickle Select the pickles beside the bento
        #14 plate > apple Select the apple directly on a plate
        #15 plate orange:first-child Select the top orange
        #16 plate *:only-child Select the apple and the pickle on the plates
        #17 #fancy *:last-child , pickle Select the small apple and the pickle
        #18 plate:nth-child(3) Select the 3rd plate
        #19 bento:nth-last-child(3) Select the 1st bento
        #20 apple:first-of-type Select first apple
        #21 plate:nth-of-type(even) Select all even plates
        #22 plate:nth-of-type(2n+3) Select every 2nd plate, starting from the 3rd
        #23 plate apple.small:only-of-type Select the apple on the middle plate
        #24 orange:last-of-type , apple:last-of-type Select the last apple and orange
        #25 bento:empty Select the empty bentos
        #26 apple:not(.small) Select the big apples
        #27 [for] Select the items for someone
        #28 plate[for="Sarah"],plate[for="Luke"] Select the plates for someone
        #29 [for="Vitaly"] Select Vitaly's meal
        #30 [for^='Sa'] Select the items for names that start with 'Sa'
        #31 [for$='ato'] Select the items for names that end with 'ato'
        #32 [for*='obb'] Select the meals for names that contain 'obb'
      • 12번 정말 모르겠어요. + 기호를 써서 하라는데, 바로 앞에 sibling 태그를 +로 앞에 더하면되는거 아닌가요? 콤마를 사용해서 두개 선택했는데 안되는데 좀 알려주세요.
      버전 관리
      egoing
      현재 버전
      선택 버전
      graphittie 자세히 보기