CSS

여러가지 선택자들

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

http://flukeout.github.io/

 
 
 

댓글

댓글 본문
작성자
비밀번호
  1. 라큰놀
    감사합니다. 정말 잘가르치십니당^^ 코딩의 스승님이세요!!
  2. 이근환
    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일차 공부 감사합니다
    • ### 안푸신 분들 조심 ###
      ## 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
      어렵다...
    • ,둘다 선택 선택자
      *별표는 모두 선택 선택자
      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 자세히 보기