CSS

선택자 공부 팁

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

CSS Diner

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

http://flukeout.github.io/

CheatSheet

google image search 

댓글

댓글 본문
작성자
비밀번호
  1. 로버트한
    치트시트 정말 좋은 정보 감사합니다. ~~ㅎ
  2. 안재규
    .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 태그를 +로 앞에 더하면되는거 아닌가요? 콤마를 사용해서 두개 선택했는데 안되는데 좀 알려주세요.
    • 이근환
      17번이 처음 접시의 사과와 마지막 피클을 줍는 것이 문제인데

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

      첫번째인 접시의 사과는
      id가 fancy인 접시안의 class가 small인 사과를 선택하면 되는데요!
      코드로 풀어보면
      #fancy .small로 작성할수 있구요

      마지막에 있는 피클의 경우는 last-child라는 선택자를 사용해야 하기에
      pickle .small:last-child 로 작성할수 있습니다.

      둘다 한번에 선택해야 하기에

      #fancy .small, pickle .small:last-child가 정답이 되겠습니다!
      대화보기
      • ohmygod
        17번 어떻게 하는지 모르겠어요 ㅠㅠ
      • 시밍
        css 게임 재밌네요 ㅋㅋㅋ
      • 180101 감사합니다!

        Cheat Sheet 사용의 생활화
        구글 이미지 검색시 코드에 대해 잘 정리해둔 여러 Cheat Sheet들이 있으니
        외우기보다는 필요시 참고하는 것도 좋다. (예제 검색어 : CSS Cheat Sheet)
      • 푸른하늘
        9일차 공부 감사합니다
      • 장훈
        27번 스포주의

        27번은 [for]로 하시면 됩니다.
        [***] 이라는 명령문은 []안에 들어있는 제목값 이라고 해야되나요 property라고 해도 되는건지 잘 모르겠는데, 어쨌든 그 안에 들어있는 이름으로 정의된 값이 있는 모든 것 이라고 생각하시면 됩니다.

        27번 문제를 통해 설명하자면 가운데 3개의 접시에는 그 접시를 누구를 위해서(for) 만들었는지가 적혀있습니다. 에단이나 엘리스나 각기 다른 이름이 있지요. 하지만 공통점은 다른 2접시는 누구를 위해(for)가 없는데 반해 저것들은 for가 있습니다. 그러니 정답은
        [for]로 기록해서 for가 달려있는 모든 것을 선택하라 라고 해 주면 됩니다.
      • 이성훈
        27번부터 막히네요
      • 서지윤
        27번...모르겠네요 ㅠㅠㅠ
      • 이성준
        저 게이무 넘흐 어렵네요
      • 오빠는다르다
        감사합니다~!!!!
      • jimmyzip
        CSS Dinner 다 풀긴 했는데, 설명을 안보면 왜 그렇게 하는지 잘 모르겠는게 몇몇 있긴 하네요
      • 프로그래밍초보
        문제는 다풀었는데 뭔가 아직 애매한 구석이 많은듯해여~ㅋㅋㅋ 한국어로 설명보면 다 정리 될 듯 합니다ㅋㅋ
      • nevertoolate
        http://flukeout.github.io/
        I don't understand, but I will try it again when I learn more about CSS. ^&^;;;;;;;
      • 강지후
        강의 완료 20170712
      • 그라텔
        문제를 다 풀긴 했는데 가끔씩 막히는것같아요...
        문제가 어려운건아닌데 틈틈히 막히니 고민하다가 안되면 넘기는 ㅠㅠ
      • 쿠쿠다스
        감사합니당
      • Sujin Han
        3번부터 막히네요.ㅜㅜ
      • 공삼이육
        You did it!
        You rock at CSS.
        막혀도 혼자 해결하니까 더 재밌어용 좋은 사이트 알려주셔서 감사합니다
      • 14번째
        5.6.
      • php가 첫취업?
        일단 완전 처음이니 여기서 멈추고...php 복습,,html 핵심 복습 하고...제 도메인으로 정리할까 합니다 ㅜㅜ

        php는 어렵지만 할만했고..html은 기억해야할게 좀 있다는것 빼고 무난했지만..css는 전문적으로 교육받은적도 없고..생초짜다...보니.....이고잉님 말씀대로...선택자 공부 팁까지 마치고...아 css는 이런식으로 구동하는구나...하고
        알아두고...복습과정으로 넘어갈까합니다
      • php가 첫취업?
        처음하는 입장에선...막막..
      • kimkong
        감사합니다!
      • 우와 32레벨 다깼습니다 ㅠㅠ 뭔가 CSS 정복한 기분ㅋㅋㅋ
        어느포인트에서 막히는 부분이있는데
        그것만 넘어가시면 뒤에는 쉽게되는것같아요!
      • css diner 레벨 32까지 업데이트 되어있습니다..
        혼자서는 어려울듯하니 이에대한 공략도 업뎃해줬으면 좋겠습니다,,
      • 구름정원
        css Diner 정복하고 왔습니다. 정말 많은 공부가 되네요.
        인터넷으로 찾은 답이 제 답과 다른게 많아서 더 많은 공부가 됐습니다.

        고수님들의 답을 보면서 제 빈곤한 상상력을 체감했습니다.
      • matheios
        강의 감사합니다. 선택자 게임 제게는 어렵네요~ㅠㅠ
      • 임지호
        cheatsheet : 개발자세계에서 언어요약본같은 느낌.
        구글 이미지 검색으로 찾으면 많이 나온다.
        개발할 때 하나씩 구비해서 필요할 때 찾아서 쓰면 좋다
      • GunLoc
        잘봤어요 선택자익히는데에 도움이 많이 될듯해요
      • 최현승
        161008완료
      • 냐앙
        정말 잘 이용하고 있습니다!
      • GiYong Jung
        너무나 유용합니다
      • 이 게임 엄청 좋네요 와....
      • 김종엽
        2016.08.25 완료!
      버전 관리
      egoing
      현재 버전
      선택 버전
      graphittie 자세히 보기