WEB2 - CSS

CSS 선택자를 스스로 알아내는 방법

강의 

내용이 많고 복잡합니다. 시간을 충분히 확보하고 시작하세요.

 

 

 

소스코드

변경사항

댓글

댓글 본문
  1. 랄프
    선생님 근데 왜 class , id 같은 것들은 a 태그 안에 넣어서 써야되는건가요? 밖에 쓰니까 안되네요..
  2. mymie
    완료
  3. 임찬혁
    완료
  4. 서준
    완료
  5. 추장
    완료
  6. younghwani
    완료!
  7. 가지덮밥
    넵! 잘 이해하신 것 같습니다
    대화보기
    • 푸른벚꽃
      맞습니다.

      저도 몰랐는데 전 수업에서 검색하라고 해서
      css a property
      라고 검색하니 a 태그에 쓸 수 있는 속성들이 검색되어 위와 같이 나왔습니다.

      모르는 분은 검색을 해보시는 것이 좋을 것 같네요, 생각보다 자세하고 많은 것을 얻어가실 수 있습니다.
      왜 코딩하시는 분들이 구글이 선생님이라고 하는지 알게 되실 겁니다 ㅎㅎ
      대화보기
      • chimhyangmoo
        2021.01.09
      • 걸어가는신사
        2021.01.09
      • T.Hwang
        완료~
      • jeisyoon
        감사합니다.
      • 그리내
        id값은 중복해서 사용할수 없다고 설명하시는데, 그 이유가 기능상으로는 중복해서 작동은하나 결국 구체성을 잃어버리기 때문에 그런건가요? 예를 들면 id="active"를 페이지의 HTML링크, CSS링크에 모두 적용하면 같은 컬러가 나오는데, id값의 목적인 구체성이라는 면에서 id값의 목적이 사라져버리기 때문에 그런건가요? 궁금합니다.
      • 정혜선
        이고잉 선생님.. 정말 빛 그 자체십니다. 내용이 정말정말 어려운데 선생님이 아닌 다른 사람의 설명이였다면 저 이해하는데 상당한 시간이 걸렸을 것 같습니다.. 어려운 내용에서 더 강의실력이 빛을 발하는군요!! 어려운거 끝냈으니 마지막까지 힘차게 달리겠습니다! 이 강의를 보고 댓글을 꼭 달아야겠다 싶어 회원가입 했슴다 크크
      • 김세훈
        안녕하세요 진솔님.
        답변 해주셔서 너무너무 감사드립니다.

        진솔님께서 말씀해주신데로라면
        강의에서 class 를 saw 라고 저장해놓은 것이나
        id를 active 라고 저장해놓은 것이나 실질적인 의미는 없는 것이군요
        제가 컴퓨터에 워낙 일자무식이라 선택자의 이름으로 입력된 saw나 active라는게 특별한 의미가 있는 것으로 알았습니다. 그래서 해당코드를 입력한 어느페이지에서든지 특별히 해당 페이지에 접속해있지 않아도 붉은색으로 노출이 되었네요.

        정말정말 감사드립니다.
        저도 후딱 발전해서 진솔님처럼 답해줄 수 있는 유저가 되고 싶네요.
        눈 많이 오니 조심하시고 즐거운 하루 보내세요 :)
        대화보기
        • 이현수
          2021.01.06(수)
        • jinsol
          1. 본문에 나온 active는 그냥 id명일 뿐입니다.
          실제로 표현하고 싶을 때는 스타일에 이런 식의 태그를 사용하셔야 합니다.

          a:link { }: 방문하지 않은 링크
          a:visited { }: 방문한 링크
          a:hover { } : 마우스가 링크 위에 위치하고 있을 때
          a:active { } : 링크를 클릭할 때


          <style>
          a:link {
          color:black;
          }
          a:active {
          color:red;
          }
          </style>
          이런 식으로 작성하셔야 합니다.
          만약 class나 id가 있는 태그에 적용하고 싶다면
          #active:active {
          color: red;
          }
          이런식으로 줄 수 있지만
          그렇게 되면 속성이 있는 곳을 방문했을때만 스타일이 적용됩니다.

          2.id는 한 태그에 한번만 사용하시고 id에 사용한 active라는 명도 다른 id에서 사용하면 안됩니다.
          하나의 태그에 유일한 이름을 정해준다는 의미입니다.

          도움이 되셨으면 좋겠습니다^^
          새해 복 많이 받으세요
          대화보기
          • jinsol
            21.01.05
          • 김세훈
            active 태그 관련한 질문과 선택자 관련 질문이 있습니다.

            <1> 제가 액티브 태그를 잘 이해하지 못하여 질문드릴 수도 있는 내용인데요.

            본문에서 언급하시고 사용하신 active 태그에 대해 해당 페이지에 방문하고 있는 중에 붉은색으로 이를 표기하라는 것으로 저는 파악했습니다.

            이 내용을 바탕으로 css페이지 방문시에만 2.CSS라는 내용이 빨간색으로 내용이 표기되고자 의도 하였고,
            1. html , 2. css 3.java script 각각의 페이지에 대해 모두 id="active"> #active{ color:red; 를 적용하였습니다.

            그런데 출력이 생각한 것과 정반대로 출력되고 있습니다.
            1,3 페이지 접속시 본문 2.css가 붉은 색으로 표기되고, 막상 2페이지(css페이지) 접속시 기존 회색이 표기됩니다.

            제가 active 에 대해 거꾸로 이해하고 있는지, 코드 작성이 틀린 것인지 궁금합니다.

            <2> Id 태그 관련하여 설명하시는 도중 "id 값이 active가 나오면 안된다" 라는 내용을 말씀하셨는데요
            이때 해당 문서에서 선택자 id값을 단 한 번 쓸 수 있기 때문에 더 이상 id태그를 지정하면 안된다는 것인지
            id선택자에 대해 지정한 태그인 active를 더이상 사용하면 안된다는 것인지 두 내용이 헷갈려 질문드립니다.


            매번 친절하게 도와주셔서 감사드립니다 :)
            다들 건강 유의하세요!
          • 선린 이원석
            완료
          • 뿡삥뽕
            2021.01.01
          • 이동훈
            상대적으로 더 구체적인 것이 우선한다.
          • 버석군
            좋은 수업 감사드립니다.

            1. class selector .
            2. id selector #
            3. 선택자 우선순위: 구체적>포괄적 (id>class>tag)
            4. 동일 등급 선택자 끼리는 나중에 선언된 것부터 적용
          • 샴파뉴
            2020.12.26
          • 고니스타크
            5일차
            id 선택자 클래스 선택자 태그선택자. *는 전부
          • 2020.12.25 완료!
          • Y00NW00
            l understand!!!!!!!!!!!!!!!!!!!!!
          • 모히또
            들을 수록 코딩이란 참 효율적이란 걸 깨닫게 됩니다. 이제라도 공부 시작하길 잘했어요! 짱잼
          • 같은 형태(예: 같은 class 선택자) 의 선택자일 경우 마지막에 등장한 선택자가 우선순위가 높다.
            우선순위: #id (구체적, 유일무이) >.class > element=tag (포괄적)
          • 생활둘기
            2020 12 16
          • Sung San Kim
            2020.12.10
            항상 재밌게 보고 있습니다.
          • 소르
            감사합니다~~
          • 조성호
            2020.12.10 완료
            소중한 시간이었습니다. 감사합니다.
          • hyunsse
            12/9 21:11
          • 스쳐간바람
            감사합니다
          • 20201128
          • 좋은 수업 감사합니다 횽님

            class 태그는 css 언어가 아니라 html 언어라고 하셨는데
            태그를 이용할때는 style 안에다가 썻는데
            그럼html 셀렉터를 가져다가 효과는 css 줄수 있는다라고 이해해도 괜찮을까요 횽님
          • Hyun Woo Ju
            20201123 수강완료 !
          • 윤지
            2020-11-21 완료
          • 듀리
            2020.11.15
          • ' a:visited ' 는 pseudo class (가상 선택자)와 관련있네요.
          • 말랑깅
            20.11.05
          • 아연
            2020.11.03
          • 2020.11.02.MON.
          • 둘기
            20.11.01 완료
          • 훼리
            id>class>tag 2020/10/30
          • 답글 읽어보다가 찾았어요!!
            꼬미네 님께서 a:visited 참조: https://www.w3schools.com......asp
            알려주셨네요.

            여기는 답글들도 생각해 볼게 많아서 읽어보게 되네요 ㅎㅅㅎ
            대화보기
            • 위즐이
              음.. 잘 모르겠네요 다른 자료들 더 찾아보는게 맞는것 같네요.

              강의 하시는 분이 답글을 따로 달아주시지는 않는 것 같아서..
              대화보기
              • 강의에서의 방문 순서는 HTML -> CSS 일 경우,
                [결과1] (HTML, 회색), (JavaScript, 검은색)이 됩니다.
                만약, 방문 순서가 JavaScript -> CSS 로 바뀐다면,
                [결과2] (HTML, 검은색), (JavaScript, 회색)이 되어야 하지만,
                강의의 방법대로 하면 [결과1] 과 같이 나타나게 됩니다... ㅠㅜ id로 해결되는게 아닌거 같아요..
                대화보기
                • 위즐이
                  class="saw" 로 방문 했던 링크를 구분 한다는거 아닌가요?

                  지금 방문하고 있는 페이지를 표시하는거는 id를 통해 표시해주고
                  대화보기
                  버전 관리
                  egoing
                  현재 버전
                  선택 버전
                  graphittie 자세히 보기