생활코딩

Coding Everybody

코스 전체목록

닫기

여러가지 선택자들

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

http://flukeout.github.io/

 
 
 

댓글

댓글 본문
작성자
비밀번호
  1. Grigo
    두번째 영상까지 완료
  2. Grigo
    두번째 영상까지 완료
  3. alpha
    191001
    21번까지 완료
  4. 치디우기
    수강완료
  5. 류석현
    수강완료
  6. 싸커홍
    26번까지 완료햇는데 27번 이후로도 강의 부탁드립니다 !!
  7. 20190728 완료
  8. 다나가
    190718 - 추가된 문제 Level 27 ~ 32 까지 완료!!
  9. 김주엽
    보류
  10. 구경꾼경
    17번

    .small:last-child

    이렇게 하니 되네네
  11. 노혜주
    완료
  12. 이재훈
    그것때문에 plate:only-child 써서 안됬다가 동현님 댓글보고 plate :only-child 에서 plate 다음 스페이스 하나 생기니 통과 된것때문에 어이가 없었습니다. 왜 스페이스 하나에 작동하고 안하는걸까요?
    대화보기
    • jerry
      재미있어요!
    • 울라울라
      지금은 게임이 안뜨네요ㅜㅜ
    • 티에스토
      정말 감사합니다. 게임도 같이 풀어주는 세심한 배려에 감동했습니다.!
    • 라큰놀
      감사합니다. 정말 잘가르치십니당^^ 코딩의 스승님이세요!!
    • 이근환
      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 자세히 보기