CSS

여러가지 선택자들

여기서는 여러가지 선택자를 알아봅니다. 그런데 지금까지 배운 선택자로도 많은 것을 할 수 있습니다. 만약 CSS 초심자라면 이것을 공부하는 것 보다는 나머지 진도를 우선 나가는 것을 권해드립니다. 나중에 보시면 됩니다. 지루함을 덜기 이해서 아래 게임을 이용해서 수업을 진행하겠습니다. 

http://flukeout.github.io/

 
 
 

댓글

댓글 본문
작성자
비밀번호
  1. 이재훈
    그것때문에 plate:only-child 써서 안됬다가 동현님 댓글보고 plate :only-child 에서 plate 다음 스페이스 하나 생기니 통과 된것때문에 어이가 없었습니다. 왜 스페이스 하나에 작동하고 안하는걸까요?
    대화보기
    • 재미있어요!
    • 울라울라
      지금은 게임이 안뜨네요ㅜㅜ
    • 티에스토
      정말 감사합니다. 게임도 같이 풀어주는 세심한 배려에 감동했습니다.!
    • 라큰놀
      감사합니다. 정말 잘가르치십니당^^ 코딩의 스승님이세요!!
    • 이근환
      orange의 경우 last-child가 아닌 first-child입니다.

      apple과 pickle의 경우는 한개이기에 first도 child도 해당이 되는거구요!

      하지만 문제가 :last-child를 써서 답을 적어야 하기에

      이고잉 선생님께서 답으로 하신 .small:last-child가 좋은 답이라 생각합니다.

      저 같은 경우에는 #fancy .small, pickle .small:last-child라고 답을 적었는데

      다 풀고 수업을 보니 훨씬 좋은 선택자를 고르는 답이 많은것 같습니다!
      대화보기
      • 복습중이에요 감합니다
      • refers
        17번이 궁금하네요... . .small 에 해당하는것이 apple와 pickle 외에 orange도 해당이 되는것같은데. apple와 pickle만 선택되어 클리어 됩니다. orange를 제가 어떻게 이해하면 될까요?
      • 띠링
        31,32번 문제는 정규표현식을 떠올리게 하네요. ^ $ *
        와~ 다 풀었다!
        고잉님은 어디서 이렇게 재밌는 걸 알아내시는 겁니까?
        덕분에 즐겁게 공부했습니다.
      • 바실로마첸코
        옆에 있는 힌트들 보고 한번에 클리어했네요 으허허
      • 푸른하늘
        9일차 공부 감사합니다
      • Jupi
        ### 안푸신 분들 조심 ###
        ## 27번 부터 ##

        27번 부터는 힌트로 [attribute] 라고 적혀 있는데,
        attribute 는 '속성'이란 의미를 같습니다.

        그럼 속성은 무엇이고, 속성값은 무엇인지 파악하시면 손쉽게 푸실수 있습니다.
      • John Lee
        26번째 까지 해주셨는데 지금은 32번째까지 있네요 20번째하고 27번째부터 32번까지 풀이좀 해주세요~
        당췌모르겠네요.^^
      • Noel J Park
        계속 업데이트가 되나봐요. 지금은 32단계까지네요.
      • 오빠는다르다
        감사합니다~!!!!!!
      • jimmyzip
        선택자 공부 tip 강의에서 그냥 해볼때에는 다 풀었어도 애매하게 넘어갔는데, 설명 들으며 다시 해보니 직접 쓰면 좋을 것 같은 선택자가 몇 보이네요. 예를들면, +나 ~를 활용하면, jQuery DOM이 아니어도 css로 sibling 요소에 hover 효과를 적용할 수 있겠군요..css hover를 처음 알게 되었을 때에는 부모자녀 요소끼리만 되는 줄 알고 있었는데, 이런 선택자들을 활용하면 페이지가 한결 가벼워지겠어요
      • 김동현
        16단계 3번째 오이가 추가됬네요

        plate :only-child !
      • protester
        뜨~약! 열심히 동영상 쫓아가서 만세 부르려던 순간.....Attribute 선택자가 추가~...!
      • nevertoolate
        difficult!!!
        repeat is the solution. ^&^;;;;;
      • 오들오들오드리
        강의 잘 들었습니다! 감사해요
      • 넓은바다
        강의 감사합니다.
      • 아사다마오리족
        기존강의듣고 올게여
      • 강지후
        강의 완료 20170713
        어렵다...
      • daanb
        ,둘다 선택 선택자
        *별표는 모두 선택 선택자
        A+B
        A~B
        A>B
        orange:first-child
        only child
        last child
      • 쿠쿠다스
        홈페이지 들어가면 접시가없어요...
        게임하려면 어떻게 해야하나요?
      • 14번째
        5.15.
      • YoungHoon OH
        3,4번 남음
      • 1,2번 청취했어요 나머지는 후 수업 완료 후 들을 예정입니다~ 강의 넘 고퀄이고 귀에 쏙쏙들어와요 !!
      • php가 첫취업?
        이거 기존 강의 다 끝내고 해야할거같애요 ㅠㅠ
      • 광뀨
        0213 완료
      • matheios
        레벨 19가 조금 다릅니다~ 앞에 사물을 적어줘야 하네요~ 혼자 잘 안풀렸는데 해설 강의 와 함께 하니 잘 되네요~ 감사합니다~
      • 폭스킴
        내부자들 보다 재밌는 선택자들
      • 덕분에 잘합니다
        32단계까지 다 했네요~^^

        더 열심히 공부할게요! ^^
      • 잉여잉여
        레벨 16 :only-child 문제가 모양이 조금 바뀌어서 * :only-child 가 아닌 plate :only-child 로 해야 해결되네요 :)
      • 아이드롭
        게임 더 늘어났어여 ㅋㅋㅋㅋㅋㅋ 도와주세욥
      • Gyu Seok Sim
        이거 내용이 더 많아 졌내요
      • 최현승
        161008 완료
      • 파스타
        쉽게 가르치는 재주가...
        광화문 교보문고에 갔더니 생활코딩 책이 있더라구요.
        여기 강의를 모두 책으로 만들어도 좋을것 같은데 말이죠. 좀 방대해도 시리즈로...
      • 피스티스
        와~~ 게임해봤는데 재밌으면서 머리에 쏙쏙 들어오네요^^
      버전 관리
      egoing
      현재 버전
      선택 버전
      graphittie 자세히 보기