WEB2 - CSS

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

강의 

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

 

 

 

소스코드

변경사항

댓글

댓글 본문
작성자
비밀번호
  1. 이상태
    아무래도 saw클래스와 active id에서 saw와 active가 어떤 특정한 기능을 실제로 갖고 있는 것 처럼 착각할 여지가 있는 것 같습니다(초보자 입장에서는)

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

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

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

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

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

    다 파란색이 될 줄 알았는데 P단락 안의 링크는 계속 검은색으로 고정되네요.... ㅠㅠ
  3. 타나
    감사합니다.
  4. Yeonhwa An
    감사합니다
  5. icdoit
    감사합니다.
  6. 웅이
    감사합니다:)
    대화보기
    • 이창연
      임의로 사용한것입니다.
      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 감사합니다!
                • 최민정
                  ID(#) > class(.) > tag
                • 잘할
                  어머 그랬네여ㅠㅠ 안경을 쓰고했는데도 발견을 못하고!!
                  감사합니다!! 덕분에 잘 적용이 되었습니다~
                  대화보기
                  • 모두비공개
                    클래스를 적으신 부분에 오타가 있습니다!
                    classs -> class 로 수정하시면 될것같아요!
                    대화보기
                    버전 관리
                    egoing
                    현재 버전
                    선택 버전
                    graphittie 자세히 보기