WEB2 - CSS

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

강의 

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

 

 

 

소스코드

변경사항

댓글

댓글 본문
  1. 빵먹고싶다
    22.11.26
  2. 미니베니
    감사합니다~
  3. 엠제이
    10132022
  4. 보통사람 박코딩
    할수있다
  5. 아아뜨아
    221005
  6. Emperor CHA
    생활코딩 Web1부터 수강하면서 가장 여러가지 개념이 한꺼번에 나온 회차네요 ㅎㅎ
    쉽게 설명해주신 이고잉님 항상 감사드립니다 :)
  7. 코딩드림
    22.09.23
  8. 코딩왕초보
    2022.09.22
  9. solfany
    2022.09.17 수강완료
  10. 당당
    2022.09.08
  11. 모카
    2022.08.26
  12. MelonMusk
    08/19
  13. 뿔고래
    선택자의 우선순위가 있다.
    tag
    class
    id

    여러가지의 선택자를 이용해서 태그의 선택을 세분화 시킨다면 우리가 적어야 하는 코드의 양을 획기적으로 줄일 수 있고 스타일을 수정하려고 할 때에 1억개의 태그의 스타일을 일일이 수정하지 않아도 될 것이다.
  14. 참새튀김
    22.08.15
  15. 코딩다람쥐
    2022.08.12 수강완료
  16. 22.08.10
  17. 헤밍웨이
    220809 완료하였습니다.
  18. 가능해
    2022.08.08
  19. 히야
    2022년 8월 4일 수강 완료했습니다. 감사드립니다!
  20. 여름이
    22.7.31.
  21. phoenix0428
    2022-07-29
  22. 코드만다
    22.07.26
  23. 꾸준히가답이다
    gogo
  24. 미야
    아 visited! 네 그게 궁금했어요 그렇군요 saw는 그냥 클래스 이름일 뿐 저는 saw 자체로 태그인 줄ㅋㅋㅋ감사합니다 덕분에 hover랑 link 배웠어요
    대화보기
    • 지금 saw를 걸은건 그냥 class 이름이 saw일 뿐이지 정말로 봤다는 의미는 아닙니다. 뒤에 추가적으로 visited를 달아준다면 실제로 본 페이지에 효과가 걸리겠지요. 예를들어 a태그에 마우스로 클릭한 상태일 때 색상에 변화를 주고 싶다면 a:active { color:red; } 이런 식으로 뒤에 진짜 그 효과를 달아주어야 말씀하신대로 적용이 되겠지요~ 마우스를 올린다거나 마우스를 영역 밖으로 뺀다거나 다양한 경우들이 있으니 공부해보셔요
      대화보기
      • 미야
        궁금한 게 있는데요 제가 웹페이지를 실제로 봤느냐 아니냐에 따라서 색깔이 다르게 들어갈 수는 없는 건가요? 지금은 그냥 제가 saw를 걸면 a에 걸린 웹페이지를 봤건 말건 전부다 saw에 걸어놓은 색깔로 들어가서요.
        혹시 원래 봤냐 아니냐에 따라서 색깔 달라지는 게 맞는 건데 제가 태그를 뭘 잘못 걸은 건지..아예 없는 웹페이지도 a로 걸어봤는데 전부 다 회색으로 뜨네요
      • 시대의 흐름
        2022.07.03 수강완료!
      • toonfac
        220703 오후 4시 11분 완료
      • 22.06.28
      • 예스아이캔
        22.06.26
      • kjs090717
        저는,
        제목과 아래에 작게 부제를 적고 싶어요.
        제목에는 'title' 클래스 속성을 주고 <style> 로 폰트와 크기, 색을 변경했어요.
        그런데 여기서 부제에서 제목과 같은 폰트에 같은 색으로 하고싶어요.
        그러면 부제에도 또다른 클래스 속성을 주고, 폰트와 색은 같은 내용을 반복해서 써야하나요?
        부제에서는 텍스트 크기의 내용만 적고 다른 속성은 그대로 두는 법이 없을까요?

        (폰트 바꾸는 법을 내가 찾아보고, 내 힘으로 알아낸 방법으로 폰트가 바뀌었을때 엄청 기뻤어요!^^)

        <!DOCTYPE html>
        <html>
        <head>
        <title>6年2組</title>
        <meta charset="utf-8">
        <link href="https://fonts.googleapis.com/css2?family=M+PLUS+2:wght@300&display=swap" rel="stylesheet">
        <style>
        .subtitle {
        font-size: 15px;
        text-align: center; #이 반복 되는 내용을 없애고 싶음
        font-family: 'M PLUS 2', sans-serif; #이 반복 되는 내용을 없애고 싶음
        }
        .title {
        font-size: 50px;
        text-align: center;
        font-family: 'M PLUS 2', sans-serif;
        }
        </style>
        </head>
        <body>
        <div class="title">6年2組</div>
        <div class="subtitle">令和3年度平岡公園小学校6年2組同窓会</div>
        </body>
        </html>
      • 나중에 작성하다보면 엄청 헷갈리게 될 것같은데,,
        Class, Id, 태그 외 효율적으로 그룹지어서 헷갈리지 않을 수 있는 방법 생각해보자
        22.05.28
      • 달걀
        22/05/23
      • learntocoding
        우선 순위 선택자

        아이디 > 클래스 > 태그

        CSS 언어로 선택자를 언급할 경우

        아이디 : #
        클래스 : .
        태그 : 태그명

        스타일 태그 내에서 태그끼리의 선택자 우선 순위는 html 문서 내에 가장 하단, body 태그 내에서 가까운 선택자
      • 김재원
        5/16
      • 소파
        2022.04.29 선택자
      • 매듭달열하루
        22.04.27
        선택자는 태그 < class(.) < id(#) 순서로 우선순위가 높다.
        css를 만든사람은 구체적인 것을 포괄적인 것보다 우선순위를 높였다.
        왜냐하면 그래야지만 태그, 즉 포괄적인 것을 이용하여 전체적인 것을 정하고 ID, 즉 구체적인 것을 이용하여 예외적인 것들을 정하는 것이 훨씬 효율적이기 때문이다.
      • 고배배
        220417
      • 서우
        22.04.11.
      • 주파랑
        선택자(selector) *중요도 높음!
        - 영상 속에서 다룬 선택자들을 힘이 센? 먼저 적용되는 순으로 쓰면 id☞class☞그냥 html태그 순이다.
        -color property에 쓸 수 있는 property value는 여러 방법이 있는데, 거기에 쓸 수 있는 색상값을 정리해 둔 사이트를 발견했다. (https://www.w3.org......rds)
        -그리고 선택자를 여러 개 쓰니까 '왜 이 속성을 이 선택자에 쓸 때랑 저 선택자에 쓸 때랑 다르게 페이지에 출력될까' 궁금증 발생함!!
      • 태그 선택자 < class 선택자 (.) < id 선택자 (#) 순서로 큼.
        구체적인 것을 포괄적인 것보다 우선순위를 높임.
        왜냐하면 포괄적인 것을 이용하여 전체적인 것을 정하고 예외적인 것을 구체적인 선택자를 이용하여 설정하는 것이 더 편하고 효율적이기 때문.
      • 너구리기린
        2022.03.25
      • ^^
      • 이윤
        220307
      • DH니스
        2020.03.05
      • 지구
        2022.03.05
      • keepgoing
        2022.03.03
        모든 것을 암기하기 보단 약간의 이해를 하여라.
        태그 선택자 > 클래스 선택자(.) > id 선택자(#)
        keepgoing
      • 0226민규
        선택자알아내기 + 선택자간의 우선순위
      • new 개발자
        20220222
      • 푸른초인
        22.02.21.
      버전 관리
      egoing
      현재 버전
      선택 버전
      graphittie 자세히 보기