WEB2 - CSS

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

강의 

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

 

 

 

소스코드

변경사항

댓글

댓글 본문
작성자
비밀번호
  1. 김리니어
    saw 와 active가 특정한 기능을 실제로 갖고 있는 것처럼 착각한 초보 1입니다 ㅎㅎ 어리둥절하다가 댓글을 보고 이해했네요 ;- ; ㅎㅎ 감사합니당
    대화보기
    • opryu
      감사합니다.
    • 키보드치는남자
      잘들었습니다
    • 이상태
      아무래도 saw클래스와 active id에서 saw와 active가 어떤 특정한 기능을 실제로 갖고 있는 것 처럼 착각할 여지가 있는 것 같습니다(초보자 입장에서는)

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

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

      아 그리고 이렇게 어려운 개념을 쉽게 설명해주셔서 감사합니다!!
    • 광장공
      a {
      color:black;
      text-decoration: none;
      }
      p {color:blue;}
      span {color:black;}

      스타일 적용하려는데 하나 걸리는게 있는데요 ㅠㅠ 제가 P로 묶인 부분을 파란색으로 표시하려고 하는데
      그 P 단락에도 a태그로 된 링크가 하나 있거든요??

      그런데 a태그나 p태그나 똑같이 태그선택자가 아닌가요??? 그렇다면 더 밑에 있는 P선택자로 인해서 그 안의 부분은

      다 파란색이 될 줄 알았는데 P단락 안의 링크는 계속 검은색으로 고정되네요.... ㅠㅠ
    • 타나
      감사합니다.
    • Yeonhwa An
      감사합니다
    • icdoit
      감사합니다.
    • 웅이
      감사합니다:)
      대화보기
      • 이창연
        임의로 사용한것입니다.
        saw라고 한 이유는 한번 보고 지나간 페이지라는 의미에서 하신거 같고
        active는 지금 보고있는 페이지 이기때문이라고 설명해주시는거 같네요.
        대화보기
        • 웅이
          강의에서 class값으로 사용한 saw 와 id값 active는 그냥 임의로 사용하신건가요, 아니면 특정 명령을 위한 값인가요?
        • 완료
        • 진영
          완료
        • <head>
          <title>WEB - CSS</title>
          <meta charset="utf-8">
          <style>


          a {
          color: black;
          }

          #active {
          color: red
          }

          .saw {
          color: gray;
          }

          h1 {
          font-size: 21px;
          text-align: center;
          /*아마 a라는 지시자와 중복이 되면서 안먹히는 듯 함*/
          color: red;
          }
          </style>
          </head>

          이렇게 하는 경우 h1은 red로 했는데 왜 a 선택자를 우선으로 해서 색이 검정색으로 나올까요?
        • 한라봉
          완료
        • 필립
          완료
        • 임재현천재
          완료!감사합니다!
        • 조예진
          class="saw"이런식으로 만들면 실제로 본 페이지를 인식해서 자동으로 색을 바꿔주는게 아니라 저희가 직접 본 페이지를 지정해주는거 아닌가요?
        • Lee Sangjun
          아으 어렵다. ㅋㅋ
        • 시간속으로
          완료
        • aimerthis(이성민)
          감사합니다
        • 감사합니다.
        • 과천영일
          조금 어려웠어요. 하지만 다음것을 하다보면 이해가 되겠지요? 이번편도 감사합니다.
        • jethro
          아래와 같이 추가하면 방문한 사이트의 a 태그 안 텍스트 색을 바꿀 수 있습니다.

          <style>
          a:visited {
          color: pink;
          }
          #active:visited {
          color: darkblue;
          }
          </style>
          대화보기
          • 김수환
            이번 강의는 조금 이해하기 어려웠네요
            그런데, 이 코드는 진짜로 들어간 링크의 색을 바꾸는 게 아니고 선택한 코드의 색을 바꾸는 거잖아요
            실제로 클릭했을 때의 링크의 색을 바꾸는 건 css에서 나오지 않나요?
          • 송진영
            이번 편은 조금 어려웠습니다. ㅎㅎ 그래도 감사합니다!
          • wdb10004@gmail.com
            감사합니다...ㅎㅎ
          • 소금돌
            우선순위가... id, class, tag 순이고
            같은 class 라도 나중에 나오는 녀석이 우선순위가 높다.
          • Kim TaeHwan
            매 강의마다 Summary 올려주셔서 감사합니다ㅎㅎ
            대화보기
            • Kim TaeHwan
              매 강의마다 친절하게 설명을 차근차근 해주셔서 감사합니다ㅎㅎ
              대화보기
              • 스티치
                html부터 차근차근히 듣는 중인데요.
                이번 수업에서 처음으로 막막함을 느꼈습니다.
                이제 진짜 제대로 공부할때라고 생각해요
                일단 여기서 멈추고 이번강의를 무한 재생해야겠어요 ㅎㅎ
              • 솔백아
                2018.05.03 감사합니다~
              • Dani Choi
                class
                - 의도: 하나로 묶는다. Grouping.
                - class property에는 여러개의 value가 들어올 수 있고 띄어쓰기로 구분한다
                - 여러 class selector로 하나의 tag를 공동으로 제어할 수 있다 BUT
                - 순서에 따라 priority is changed. The latest one is valid. Therefore, we use id

                id
                - value가 단 하나만 등장해야한다. 중복되어서는 안된다. Only one value, can not be repeated.
                -

                <selector's priority>
                id>class>tag
              • 오호힛
                class 선택자들 끼리는 우선순위는 같은데
                순서때매 .saw에서 핑크로 바꼈다가 .active에서 red로 바뀌게 되는거죠
                대화보기
                • 스페이스몽키
                  이번 강의도 감사드립니다!
                • 이하빛
                  .saw {
                  color:pink;
                  }
                  .active {
                  color: red;
                  }

                  이 부분 설명해주실 때 우선순위가 높은 명령을 먼저 듣는다고 하셨는데
                  위에 있는 게 우선순위 1순위가 아니라 밑에 있을 수록 우선순위가 되는건가요?
                • 이하빛
                  <!doctype html>
                  <html lang="en">
                  <head>
                  <meta charset="UTF-8">

                  <title>2.html</title>
                  <style>
                  #grid {border: 5px solid pink;
                  display:grid;
                  grid-template-columns: 300px 1fr;
                  }

                  a {
                  color:blue;
                  }

                  saw {
                  color:pink;
                  }
                  div{border: 5px solid gray;

                  }
                  </style>
                  </head>
                  <body>
                  <h1><a href="http://naver.com" class="saw">WEB</a></h1>


                  <div id="grid">

                  <div>
                  <ol>
                  <li><a href="1.html" class="saw">HTML</a></li>
                  <li><a href="2.html" class="saw">CSS</a></li>
                  <li><a href="3.html" class="saw">JavaScript</a></li>
                  </ol>
                  </div>

                  <div>
                  <h2>HTML saw</h2>
                  <P><a href="https://www.naver.com" target="_black" title="html5 naver" class="saw">html naver homepage</a></P> is the stadard naver home saw
                  </div>

                  </div>


                  </body>
                  </html>



                  이렇게 했는데 saw글자가 색이 변하지 않습니다ㅜ
                  그리고 .saw로 해서도 봤는데, 다 본페이지라고 떠서(핑크) 안 본페이지와 구분해서 볼 방법을 알고싶어요~
                • Dreaming_Joyy
                  선택자간의 우선순위... 구체적인것이 포괄적인것에 우선한다. 굉장히 언어학적이고 논리적이네요!! 수많은 선택자들을 통해서 내가 원하는 것을 세밀하게 타겟팅해서 조정할 수 있고, 수많은 일들을 단순화하고 분류해서 효율성을 기할 수 있다!! 엄청난데요??
                • 김진엽
                  감사합니다!
                • Clickim
                  id 선택자를 여러가지 요소에 적용하고 style을 해당 id에 적용하면 실제로 id가 같은 요소들은 모두 해당 style이 적용이 됩니다. 하지만 id는 한가지 요소를, class는 여러가지 요소의 style를 지정할 때 사용하라고 권고하는 것 입니다
                  대화보기
                  • simplelife
                    class 속성과 id 속성이 여러값을 같이 지정할 수 있느냐/아니냐는 차이를 가진다는 점은 알았습니다.
                    그런데 id 속성은 주로 어떨 때 사용하길래 한가지 객체에만 사용되게끔 하나요?
                  • 설렁탕
                    잘 봤습니다.
                  • 제갈량
                    지금 소개된 선택자들은 가장 기본적인 선택자만 언급이 되어 있습니다.
                    나중가면 더 어려운 선택자들이 많습니다.
                    그룹 선택자, 형제 선택자, 자식 선택자, 타겟 선택자, 가상 선택자 등등등...
                    선택자도 상당히 다양한 형태가 있습니다.
                  • jayxwoo
                    강의 잘 들었습니다 :)
                  • 옥슬이
                    멘붕이네
                  • 헷갈리기 시작하네요,..ㅜㅜ
                  • 제로스
                    tag selector
                    class selector .saw<element class ="saw">
                    id selector #active<element id ="active">
                  • 위버
                    그보다 오늘 수업은 엄청 어렵네요 ㅠ ㅠ 머리야 다 받아들여라..
                  • 위버
                    #active 설명하실때 a 를 밑으로 내려와도 #active 명령이 우선이라고 설명하실때 a가 무슨 기능을하고 있고 원래는 최근 명령이니ㅏ이렇게 되어야하는데 #active 때문에 저렇게 되어서 작동하지 않는다 하는 식으로 설명해주시면 간단히 복습차원에서도 좋을거같고 이해가 더 잘될거 같아요..
                  • Mingi Son
                    180209 감사합니다!
                  버전 관리
                  egoing
                  현재 버전
                  선택 버전
                  graphittie 자세히 보기