CSS

선택자 공부 팁

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

CSS Diner

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

http://flukeout.github.io/

CheatSheet

google image search 

댓글

댓글 본문
  1. 김성곤
    20200717 감사합니다!
  2. jaehyunlee
    완료
  3. 007bbang
    감사합니다~ 이해하기가 더 쉽네요
    대화보기
    • 한강
      게임 치크시트 감사합니다~~^^!
      200527
    • 나의라임오지는나무
      20200317
    • css선택자 게임도전 / cheatsheet
    • 신세기
      이 강의를 보고 CSS 다이너 게임의 한국어판을 만들었습니다. https://sinseiki.github.io/cssdiner 에서 하실 수 있습니다.
    • 무지개반사
      완료
    • 2020. 1. 6 수업완료
    • 2020.01.04
    • 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번...모르겠네요 ㅠㅠㅠ
        • 이성준
          저 게이무 넘흐 어렵네요
        • 오빠는다르다
          감사합니다~!!!!
        • 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
        • 그라텔
          문제를 다 풀긴 했는데 가끔씩 막히는것같아요...
          문제가 어려운건아닌데 틈틈히 막히니 고민하다가 안되면 넘기는 ㅠㅠ
        버전 관리
        egoing
        현재 버전
        선택 버전
        graphittie 자세히 보기