CSS

선택자 공부 팁

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

CSS Diner

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

http://flukeout.github.io/

CheatSheet

google image search 

댓글

댓글 본문
작성자
비밀번호
  1. 몽키바나나
    막혔던 문제
    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 !!
    다른 것들도 시도해보니 정답으로 넘어가긴 하지만 이게 제 생각에는 정확한 답 같습니다..
  2. 점심호랑이
    감사합니다
  3. SlowStarter
    감사합니다!
  4. 향구
    잘듣겠습니다~
  5. 출처 : 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'
  6. 12번 정말 모르겠어요. + 기호를 써서 하라는데, 바로 앞에 sibling 태그를 +로 앞에 더하면되는거 아닌가요? 콤마를 사용해서 두개 선택했는데 안되는데 좀 알려주세요.
  7. 이근환
    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 자세히 보기