생활코딩

Coding Everybody

코스 전체목록

닫기

선택자 공부 팁

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

CSS Diner

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

http://flukeout.github.io/

CheatSheet

google image search 

댓글

댓글 본문
  1. 켄드릭
    2020년10월29일(목) 1차 학습완료
  2. jaehyunlee
    완료
  3. 오석민
    완료
  4. 박병진
    2020.10.01 완료
  5. 콜라
    20200926완료
  6. 여니여니
    200920 감사합니다!
  7. switpotato
    20200824완료감사합니다!
  8. 김성곤
    20200717 감사합니다!
  9. jaehyunlee
    완료
  10. 007bbang
    감사합니다~ 이해하기가 더 쉽네요
    대화보기
    • 한강
      게임 치크시트 감사합니다~~^^!
      200527
    • 나의라임오지는나무
      20200317
    • css선택자 게임도전 / cheatsheet
    • 신세기
      이 강의를 보고 CSS 다이너 게임의 한국어판을 만들었습니다. https://sinseiki.github.io/cssdiner 에서 하실 수 있습니다.
    • 무지개반사
      완료
    • 2020. 1. 6 수업완료
    • 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 태그를 +로 앞에 더하면되는거 아닌가요? 콤마를 사용해서 두개 선택했는데 안되는데 좀 알려주세요.
      • 이근환
        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 게임 재밌네요 ㅋㅋㅋ
        • JN87
          180101 감사합니다!

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

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

          27번 문제를 통해 설명하자면 가운데 3개의 접시에는 그 접시를 누구를 위해서(for) 만들었는지가 적혀있습니다. 에단이나 엘리스나 각기 다른 이름이 있지요. 하지만 공통점은 다른 2접시는 누구를 위해(for)가 없는데 반해 저것들은 for가 있습니다. 그러니 정답은
          [for]로 기록해서 for가 달려있는 모든 것을 선택하라 라고 해 주면 됩니다.
        • 이성훈
          27번부터 막히네요
        • 서지윤
          27번...모르겠네요 ㅠㅠㅠ
        버전 관리
        egoing
        현재 버전
        선택 버전
        graphittie 자세히 보기