WEB2 - CSS

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

강의 

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

 

 

 

소스코드

변경사항

댓글

댓글 본문
작성자
비밀번호
  1. roy
    완료요
  2. Q2
    한글로 해서 문제인데
    html에서는 속성 - attribute
    CSS에서는 속성 - property
  3. 허정우
    완료
  4. Hyeon-Jun Ha
    완료!
  5. 허공
    190504 감사합니다.
  6. 수오
    감사합니다 ㅎㅎㅎ
    대화보기
    • wjdvnarpdla
      Q1
      A가 맞습니다.

      B의 경우는 사용 가능입니다
      Id의 속성값 이름이 'active' 와 'pre' 로 다른 이름을 사용하고 있기 때문입니다
      이처럼 속성값의 이름만 동일하지 않다면 몇개를 더 쓰더라도 상관이 없습니다


      Q2
      id="active"에서 id의 값인 active란 이름을 중복 사용해서는 안된다는 뜻입니다.
    • 수오
      Q1
      A.
      id선택자가 #active일 때
      태그에 들어가는 id="active" 는 한번만 쓸 수 있다.

      B.
      #active
      {
      }
      #pre
      {
      }
      이런식으로 id선택자를 2개 이상 쓰는것이 불가능하다.

      A와 B둘중에 어느게 맞는건가요??
      이해력이 부족해서 명확하게 이해가 안가네요 ㅠ.ㅠ!


      Q2
      a {
      color:black;
      }
      에서 각각의 명칭이
      a는 선택자
      color:black은 선언,효과
      color는 속성
      black은 속성 값
      이라고 배워서

      <a href="2.html" class="saw" id="active">혈당지수(GI)</a>

      의 코드에서 각 명칭을
      a는 태그
      href,class,id는 속성
      saw,active는 속성값으로 이해했는데

      영상 10:11에서
      'id선택자의 값이 active인 태그가 이 웹페이지에서 한번만 등장하면 그 다음에 active라고 하는 값은 쓰면 안된다. '
      라고 하실 때 'id선택자'라는 말을 id="active" 에서 id를 마우스 커서로 가리키면서 말씀하시더라구요.
      제가 잘못 이해하고 있었던건지 지금 혼란스러워서
      혹시 아시는 분 계시면 답변 부탁드리겠습니다 ㅠㅠ
    • 완료!
    • yjhn0715
      맞습니다. id는 unique하게 사용하는 것이고, class는 그룹 단위로 적용하는 것입니다.

      밑에 방법이 맞습니다 ㅎㅎ
      대화보기
      • phlove
        ID 선택자 살짝 이해가 안되는데요!
        클래스 선택자 몇개를 그룹으로 묶어서 적용할때, 사용하는것이고
        ID클래스는 딱 하나만 지정할때 사용하는 것이라는건가요??
        한 사람에게 주민번호 지정하듯이? 한번만 사용하라는 뜻인가요?
        예를 들어서
        <h1 id="active"> 제목 </h1>
        <h2 id="active"> 부제 </h2>
        <p id="active"> 본문 </p>
        이러면 안되는 거고,

        <h1 id="active"> 제목 </h1>
        <h2 class="a_ctive"> 부제 </h2>
        <p class="a_ctive"> 본문 </p>
        이게 맞다는 건가요?
      • cooipop
        완료요~^^
      • cooipop
        완료요~~^^
      • 끝가지간다
        완료!
      • 칠칠석
        2019년 3월 28일

        완료!
      • supernet
        완료!!
      • 완료@
      • 예썽
        완료!
      • 미니
        완료
      • 아마도 태그 순서 때문일겁니다.
        <h1> <a href="~~"> CSS </a> </h1>
        과 같이 h1이 더 바깥에 싸고 있고, a 태그가 안쪽에서 싸고 있기 때문에 a태그가 더 구체적인 것이 되어서요.
        대화보기
        • 2019-02-16 완료
        • 호두
          감사합니다.
        • 주하쿠
          감사합니다
        • 완료:o
        • sunmoon228
          완료 ^-^
        • boriku
          완료:)
        • dudwn7504
          Id는 한 웹페이지에서 단 한번밖에 못쓴다
          라고 이해하면 되나요?
        • 지미츄
          완료 감사합니다!
        • 완료
        • 김수빈
          완료
        • 김수빈
          완료
        • Aimhee
          완료
        • 삼색냥
          완료
        • 감사합니다^^
        • whynitz
          저도 의문입니다. 강의 영상에서 saw 클래스를 이용해 "HTML"과 "CSS" 색을 바꾸는 건 근본적으로 들어가본 링크의 색을 바꾸는 게 아니지 않나요? ㅠㅠ 밑에 댓글중에 a:visited 를 이용하면 된다길래 시도해 봤는데 저는 들어가본 링크 색이 회색으로 바뀌지 않았습니다..
        • 한강
          감사합니다.
          다들 좋은 밤 되세요~~^^!
        • 김정훈
          완료
        • 한번 더 들으니 다행히도 금세 이해가 갔습니다.

          선택자 중에서는 id>class>tag 순으로 우선순위를 갖고
          같은 선택자 중에서는 최근(아래쪽)에 입력된 순서로 우선순위를 갖는다.
        • 이때까지 문제 없이 잘 따라왔는데 약간 어렵다고 느꼈어요!
          감사합니다.
        • HongKyu Lim
          감사합니다:)
        • 예아쓰
          12/05 다시보기
        • 눈누난나
          style안에 saw앞 클래스라는걸 의미하는 .이 없습니다

          .saw {color:pink;}

          ========================

          본 페이지 안본페이지 구분을 물어보는게 제가 정확히 모르겠지만,
          다 분홍색으로 나오는 이유는 li태그안의 a태그에 클래스 saw를 다 적용했기 때문에 핑크로 보여집니다.
          안본페이지의 색상을 원하시면 클래스 saw를 제거해주세요
          대화보기
          • 눈누난나
            밑에 적용된 것이 우선순위 되는게 맞습니다
            대화보기
            • 눈누난나
              p태그안에 a태그가 자식태그로 속해있으므로 a태그의 스타일인 칼라값이 적용됨
              대화보기
              • Min Sang Shin
                완료
              • 돼지천재
                감사합니다.
              • 김리니어
                saw 와 active가 특정한 기능을 실제로 갖고 있는 것처럼 착각한 초보 1입니다 ㅎㅎ 어리둥절하다가 댓글을 보고 이해했네요 ;- ; ㅎㅎ 감사합니당
                대화보기
                • 감사합니다.
                • 키보드치는남자
                  잘들었습니다
                • 이상태
                  아무래도 saw클래스와 active id에서 saw와 active가 어떤 특정한 기능을 실제로 갖고 있는 것 처럼 착각할 여지가 있는 것 같습니다(초보자 입장에서는)

                  보여주신 건 2.html 페이지에서 1.HTML이라는 텍스트를 회색으로 입히고, 2.CSS라는 텍스트를 빨간색으로 입히는 작업을 클래스와 id를 이용해서 하신 것이지요??

                  이렇게 할 경우 매 페이지마다 현재 보고있는 페이지를 빨간색으로 코딩해줘야하는 번거로움과 동시에, 실제로 클릭하지 않았는데도 앞의 번호들의 클릭한것처럼 회색으로 변해있을 것 같아요. 실제로 방문했거나, 방문중인 걸 자동으로 인식하도록 코딩하는 방법은 없을까요? 아마 뒷강의를 들으면 나올 것 같긴 한데.. 궁금해서 여쭙니다!!

                  아 그리고 이렇게 어려운 개념을 쉽게 설명해주셔서 감사합니다!!
                버전 관리
                egoing
                현재 버전
                선택 버전
                graphittie 자세히 보기