WEB2 - CSS

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

강의 

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

 

 

 

소스코드

변경사항

댓글

댓글 본문
작성자
비밀번호
  1. 셰퍼드
    2019. 07.17
    완료
  2. 말차녹차
    2019/07/16 완료
  3. 김영인
    Q.
    속성과 태그의 구분이 햇갈립니다.

    a태그 내에 stlye을 적어서 CSS를 쓴다고 할 때,
    stlye이 태그인건가요 속성인건가요?

    <a href="1.html" style="color:orange;"> 라고 했을 때,
    '저는 html a태그에 style속성을 활용해 CSS를 쓴다.'라고 이해했는데,
    강의에서는 stlye태그를 이용한다고 하더라구요.ㅠㅠ

    이번 강의에서 처음으로 막히네요
  4. 별강
    1.id 선택자 는 오직 하나만 선택
    2.class 선택자 는 중복선택은 되지만 태그선택의 예
    3.tag 선택자 는 가장 포괄적임
  5. 드라고르
    190709 완료
  6. 완료요
  7. Q2
    한글로 해서 문제인데
    html에서는 속성 - attribute
    CSS에서는 속성 - property
  8. 허정우
    완료
  9. Hyeon-Jun Ha
    완료!
  10. 허공
    190504 감사합니다.
  11. 수오
    감사합니다 ㅎㅎㅎ
    대화보기
    • 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
                완료
              버전 관리
              egoing
              현재 버전
              선택 버전
              graphittie 자세히 보기