웹 스터디

선택자

토픽 웹 스터디 > CSS

선택자(selector)란?

CSS의 효과가 적용될 태그를 지정

Id 선택자

  • id 속성은 전체 문서에서 하나의 태그를 식별하기 위해서만 사용됨
  • 우선순위가 가장 높음
  • css 선택자에서는 #을 사용해서 id임을 표시
  • 다음 예제는 id값이 memo인 태그의 컨텐츠를 빨간색으로 표시하도록 함
<style type="text/css">
#memo {
   color:red;
}
</style>
<div id="memo">
    red
</div>

Class 선택자

  • class 속성은 일련의 태그를 그룹핑해서 하나처럼 제어하기 위해서 사용
  • class 속성에는 공백으로 구분된 여러개의 class가 표시될 수 있음
  • css선택자에서는 '.'을 사용해서 class임을 표시
<style type="text/css">
.red{
    color:red;
}
</style>
<div class="red">red</div>
<p class="red intro">Hello world</p> <!-- 하나의 클래스에 두개의 클래스 이름이 정의됨 -->

type 선택자

  • 특정 태그명을 가진 엘리먼트 전체를 제어하기 위해서 사용
  • css선택자에서는 태그의 이름을 사용함
<style type="text/css">
h1{
   color:red;
   font-size:30px;
}
</style>
<h1>Hello world</h1>

 

댓글

댓글 본문
  1. sting
    sting 11
  2. 1
  3. 김종엽
    2016.08.24 완료!
  4. Daehyeop Ko
    감사합니다
  5. cicada
    감사합니다
  6. Ian Si Mong Seong
    수강완료
    2016.08.01
  7. 냐냥
    클래스를 중복으로 먹이면, 클래스 선택자 선언부분의 순서에 따라서 중복된 속성이 어떻게 적용되는지가 달라지는군요.

    예제에서 red intro의 경우 .intro를 font:green;으로 .red 밑에 선언하면 hello world가 녹색이 되는데 .red 위에 선언하면 빨간색이 되는군요. 즉 위에서부터 순서대로 적용시키니 클래스 중복의 경우는 맨 밑에 선언한 클래스대로 되나보군요. 물론 선언시 중복이 안된 속성들은 적용시 중복한대로 다 적용되구요.

    적고보니 밑에 댓글에 다 있었네요 ㅎㅎ 이 부분이 본문에 추가설명되면 좋겠네요.
  8. 김형진
    덧글을보고 P태그안에 클래스로 지정된 "red intro"가 헤드의 스타일로 박혀있는 red정보와 intro정보를 둘다 발현시킨다는 것을 이해했습니다.

    한가지 궁금한건, 적어주신 내용처럼 렌더링 시키려면 P태그쪽 class의 속성이 각각"memo"/"memo intro"가 되어야 하는거 아닐지요.
    또는 헤더쪽 명령어가 memo가 아닌 red이거나요.
    대화보기
    • 박상문
      css decoration 설명에서 property와 value로 설명해주셨는데,
      property보다 attribute가 더 적절한 용어라고 생각합니다.

      HTML 자체에서는 attribute라는 용어를 사용하고 이를 해석해서 DOM을 만들 때
      각각의 atrribute에 대응하는 property가 만들어진다고 알고 있습니다.
    • 이승민
      강의 잘봤습니다 감사합니다 ㅎ
    • YoungHun Jung
      .memo{color:red;}
      .intro{font-style: italic;}

      <p class="red">1</p>
      <p class="red intro">2</p>

      위에서 보면, 아래의 p태그는 class가 red와 intro로 공백을 두고 함께 지정 되어있는 걸 알 수 있습니다.
      따라서 위의 p태그가 적용되는 내용은 클래스 red와 intro의 css내용이 모두 적용 되겠지요.

      저렇게 사용하는 이유는 복잡한 상황에서 어떤 태그는 red 클래스만, 어떤 다른 태그는 red와 intro 클래스 둘다 스타일을 적용할 필요가 있기 때문일 것 같아요~.

      위 예시에서는
      1은 빨간 색(memo 클래스) 1로,
      2는 빨간 색(memo 클래스)이면서 이텔릭체(intro 클래스)가 적용된 2가
      출력되는 것에서 알 수 있을 것 같습니다~
      대화보기
      • 초심
        안녕하세요 웹공부를 시작한지 얼마 안된 초보자입니다.
        명강의를 쭉듣다가 궁금점이 생겨서 질문 합니다.
        <style>태그안에 .red값이 <div class="red">와 <p class="red intro">에 둘다 적용이 되는지 모르겠습니다. 분명 <div>와 <p>에 지정된 class 속성값 이 다른데 어떻게 해서 둘다 적용 되는지 궁금합니다.
      • JustStudy
        고맙습니다
      • 빨강머리앤
        감사합니다.^^
      • WayneKing
        Go
      • 이웃집토토로
        클래스가 성씨라면 ID값은 이름입니다. 한 반에 이름이 같은 사람이 있을 수 있죠.
        이 둘을 반드시 구분을 해야하는 상황이라면 이름만으로는 둘이 구분이 안가겠죠?
        만약 성씨마저 똑같다면 어떻게 구분할까요?..... 정답은 구분하지 못한다입니다.
        다만 이를 경험적으로 유추해서 찍거나 할텐데 선생님(브라우저)따라 맞기도 하고
        틀리기도 할 겁니다. 여기서 중요한건 하나의 이름으로는 하나의 존재밖에 정의내리지
        못한다는 것입니다. 따라서 애초에 반을 반들 때 성과 이름이 같은 사람이 있다면
        둘을 구분할 필요가 없는 경우를 전제로 만들어진 것일 겁니다.
        그러나 둘을 꼭 구분해야 한다면 그들에게한해서 이름대신 별명을 붙여주겠죠
        그것이 클래스가 혹은 속성 선택자가 되거나 방법은 복잡성에 따라 다양합니다.

        01. id 값을 한번만 쓸 수 있다는 말은 통상적으로 id선택자는 단일 태그를 지정할 때
        쓰기 때문입니다. 굳이 중복해서 쓰려면 쓰면 당연히 쓸 수 있어요.
        대부분의 브라우저가 융통성 있게 출력해줍니다.
        그러나 자바스크립트 등에서 이렇게 하면 에러가 출력됩니다.
        득보다 싫이 많기에 id선택자를 중복으로 사용할 이유가 전혀 없습니다.


        02. ID도 Class처럼 선속성이 후속성에 의해 지워진다?
        분명 CSS 캐스케이딩 개념에서 그렇게 표시되는 경우가 있지만 id값은 한번만 사용해야 하기에 중복해서 사용한 시점에서 정규문법이 아니며 html파일을 저장해서 브라우저로 실행해보시면 오히려 파란색으로 나오는 브라우저가 많을 것입니다. (틀린 문법) 대신 클래스를 같이 잡아주면 됩니다. 혹은 그냥 클래스값을 셀렉터로 사용해도 됩니다.
        대화보기
        • pillage
          Style Tag 내에서 동일한 ID 를 사용할수 없다는걸 말씀하신것 같네요.
          설령 같은 ID 를 다른 속성을 줬다고 하더라도 후에 오는 속성 때문에 앞에 것은 지워진다는것 같구요.

          #gf {color:blue;} <!--gf 란 ID 에 Blue 속성 설정! (선속성)--!>
          #gf {color:red;} <!--gf 란 ID 에 Red 속성 설정!(후속성)--!>
          </style>
          </head>
          <body>
          <ol>
          <li id="gf">fff</li> <!--선속성은 지워지고 후속성으로 인해 붉은색 fff 가 나타남 --!>
          <li id="gf">vvv</li><!--선속성은 지워지고 후속성으로 인해 붉은색 vvv 가 나타남 --!>
          </ol>

          요런뜻이 아닐까요??
          대화보기
          • 1616
            강의 정말 잘 봤습니다.
            언제나 감사해요^^
          • 코코이이
            id값도 한번만이 아니라 여러번 쓰이는거 같은데요..
            이 코드값을 보시면 id가 gf 인 태그에 둘다 적용이 됩니다.
            <!DOCTYPE html>
            <head>
            <meta charset="UTF-8";>
            <style>
            #gf{
            color:blue;
            }
            .bbn{
            color:red;
            }
            </style>
            </head>
            <body>
            <ol>
            <li id="gf">fff</li>
            <li id="gf">vvv</li>
            <li class="bbn">bbn</li>
            <li class="bbn">bbn2</li>
            </ol>
            </body>
            </html>
          • 초보
            자세히 보시면 class="red 띄고 intro"로 되어 있는걸 보실 수 있는데 이건 두 개의 클래스를 같이 적용 시키라는 의미여서 red클래스를 적용 시키고 동시에 intro클래스도 적용 시키라는거죠 red클래스는 color:red가 적용 되어 있으니 글씨가 빨간색으로 변하며 intro는 스타일이 적용되어 있지 않기 때문에 아무런 변화가 없습니다
            대화보기
            • 다혜
              div부모요소밑에
              p자식요소가 있기때문에 같이 적용된거같은데..
              맞나요?
              ㅡㅜ아닌데.. div로닫아줫기때문에 적용된거같진않고 뭐죠?
              고수님들 댓글달아주세염 ㅠㅠ
              대화보기
              • 김민석
                감사합니다.
              • YellowBall
                잘 들었습니다.
              • 머머
                red intro 두개의 클래스를 적용한 것입니다.

                근데 위 동영상에서는 red에 대한 내용만 있고 intro의 대한 내용이 없어서 해깔리시는것 같아요.

                요지는 하나의 div에 여러 클래스의 효과를 적용 할 수 있다는 것이랍니다.
                대화보기
                • kush
                  강의 잘봤습니다. 아직은 좀 헷갈리네요 (css초보인지라...)
                  red intro는 저도 이해가 안됩니다 사실 ㅠㅠ
                • sadi
                  <style>
                  .red { color:red; }
                  .intro { color:blue; }
                  .space { padding-left:20px; }
                  </style>

                  <div>
                  <p class="red">red</p>
                  <p class="red intro space">Hello world!</p>
                  </div>

                  class="red intro space"
                  OR 개념이 아니라 해당 클래스에 설정된 스타일값을 다 적용하라는 의미입니다.

                  <style></style>에 선언된 클래스의 순서대로 값이 적용될 뿐입니다.
                  .intro 가 나중에 선언되어 최종 블루로 덮입니다.

                  class="red intro space" 클래스 적용 순서와

                  .red { color:red; }
                  .intro { color:blue; }

                  이 부분의 순서를 바꾸면서 적용해보세요~
                  대화보기
                  • DIOST
                    감사합니다
                    대화보기
                    • 스마트
                      강의 감사합니다.
                    • proSiGi
                      타입선택자 : h1
                      클래스선택자 : .test
                      ID선택자 : #test2

                      이게 핵심이군요. 감사합니다 ㅎㅎ
                    • 율아빠
                      class="red intro"에 대한 스타일이 없는데 왜 같이 지정이 될까? 이부분에 대해서 저도 궁금했습니다.

                      일단 테스트 결과 하위종속 개념은 아닙니다.
                      <div></div>의 태그는 끝태그로 정리가 되었기에 종속될 수 없습니다.
                      class내의 공백은 or의 개념으로 이해가 됩니다.

                      즉 class 이름이 "red" 이거나 "intro"일때
                      폰트를 red 색상으로 변환시켜라! 라는 의미입니다.

                      일예로

                      <!DOCTYPE html>
                      <html>
                      <head>
                      <style type="text/css">
                      .intro{
                      color:red;
                      }
                      </style>
                      </head>
                      <body>
                      <div class="red">red</div>
                      <p class="red intro">Hello world</p> <!-- 하나의 클래스에 두개의 클래스 이름이 정의됨 -->

                      </body>
                      </html>

                      위와 같이 테스트 하시면
                      .intro에만 red 컬러로 적용되는것을 확인 할 수 있습니다.
                    • 유형찬
                      선생님이 하위태그인 p태그의 클래스명을 "red intro"로 준 이유는 이해를 위해 일부로 넣으신 것 같습니다. 님말대로 "red intro"클래스명을 선택자로 사용하지 않았습니다. 그럼에도 p태그의 Hellow world가 red색상으로 표시되는 이유는 부모클래스?역할을 하는 div태그의 클래스명 "red"는 Class선택자를 가지고 있으므로 상속?처럼 하위 태그 클래스도 같이 적용될 수 있다? 그것을 말씀해 주시려고 따로 "red intro"를 선택자로 넣지 않으신 것 같습니다.
                      대화보기
                      • egoing
                        강의가 오래되서 질문의 의도를 확실히 파악은 못했습니다 ^^;;
                        대화보기
                        • munteng
                          class="red intro"에 대한 스타일은 없는데???

                          제가 잘못 알고 있는 건가요???
                        • 도로시
                          좋은 강의 감사합니다. 이고잉님 덕분에 100% 초보에서 조금씩 조금씩 코딩 세계에 들어가고 있어요 ^^

                          질문이 하나 있습니다~
                          id와 class의 차이는 이해가 되는데요. 실제로 id 선택자도 자주 활용되나요?
                          혹시나 싶어 지금 페이지의 요소 검사를 해 보았더니 모두 class 선택자를 활용해서 css 효과를 적용하신 것 같더라구요.
                        • egoing
                          id는 문서 내에서 특정한 태그를 식별하는 역할을 하기 때문에 id에는 하나의 값만 올 수 있습니다. 하지만 class는 특정한 태그들을 그룹핑하는 역할을 하기 때문에 동일한 클래스 값을 여러 태그가 가질 수 있고, 동시에 하나의 태그가 여러개의 클래스 값을 가질수도 있습니다.
                          대화보기
                          • 바위구름
                            class 지정자의 경우 공백을 기준으로 2개의 클래스 명을 하나의 대상에 줄 수는 있다는건 필요에 의한게 아니라 버그(?)로 봐야 하나요? 위의 코드에는 .intro라는 클래스 선택자가 없어서 코드에 추가(값은 blue) 하고 테스트 해보니 결과적으로 blue가 적용되더라고요 ㅋ(이런저런 속성을 주다가 선택적으로 하나의 클래스만 다른 효과를 주고 싶을때 사용하려고 만든건가요?)
                          • huziya
                            이해는 되는데..점점 뭔가 복잡해지는 느낌이 드네요..^^;;
                          • 별모모
                            [ 태그에서 클래스는 여러 개, id는 단 하나만 ] 클래스는 한 태그에서 여러개의 클래스를 적용하여 다양하게 표현할 수 있습니다. 하지만, id 선택자는 한 태그에 단 하나의 id만 선택될 수 있습니다.

                            즉, 여러 개의 <div> 태그 중에서 어떤 <div>에는 하나의 클래스만 적용하지만, 어떤 <div>태그에서는 좀 더 다양한 속성을 적용하고 싶을 때, 여러 개의 클래스를 사용할 수 있습니다. 하지만, id 태그는 하나만 사용할 수 있다는 것.
                            대화보기
                            • IWCTWTMG
                              감사합니다!!
                              헷갈렸는데 댓글을 보고 다 이해했네요!
                            • zxcvxr
                              aptana에서는 깨지네요 jsfiddle에서는 정상적으로 나오고요..
                              대화보기
                              • 131011 jhc
                              • 신입 사원
                                동영상에 </body>로 열고 </body>로 닫았는데요. Aptana에서도 오류없이 실행이 되나요?
                              • mimiandchopa
                                감사합니다.
                              • 용12
                                정말 감사합니다 잘봤습니다!!
                              • 철민 장
                                하나의 클래스에 두개의 클래스 이름이 정의됨 --> 이부분이 이해가 가질 않습니다.
                              • Starmomo
                                아, 이제야 이해했습니다. 예제 CSS에 .red 클래스만 보여서 이해를 못했는데,그러니까, p태그에 정의된 클래스는 red 클래스, intro 클래스 두 개가 적용된 것이군요. 아래 처럼요...
                                <style type="text/css">.red{ color:red;}.intro{font-size:20px;}</style><div class="red">red</div>
                                Hello world
                                대화보기
                                • egoing
                                  id는 문서에서 단 한번만 등장해야 합니다. 이런 제한을 극복하고 여러개의 엘리먼트를 그룹핑해서 관리하기 위한 것이 클래스의 쓰임입니다. 그렇기 때문에 위의 P 태그는 red 클래스와 intro 클래스 모두의 영향을 받아야 함을 의미하기 위해서 중복으로 클래스를 정의 할 수 있는 것이죠.
                                  대화보기
                                  • Starmomo
                                    <style type="text/css">.red{ color:red;}</style><div class="red">red</div>< p class="red intro"> Hello world < /p > < !-- 하나의 클래스에 두개의 클래스 이름이 정의됨 -- >
                                    [질문]1. 클래스는 .red 하나이지만, class="red intro"라고 하면 .red 클래스가 지정되는 것인지요?2. 하나의 클래스에 두 개의 클래스 이름을 정의할 수 있다면, 왜 클래스 이름을 정의해서 쓰는 것인지요?
                                  • Starmomo
                                    Html 문장에서 한 구문에 id, class, type가 함께 적용되어 그 속성이 서로 부딪칠 때, 우선순위에 따라 속성값이 적용되므로, id(100)의 속성이 우선적용되고, 그 다음에 class(10)속성이 반영되고, 그 다음에 type(1)속성이 반영되어 예제 text에 반영된 속성은 111이 되는 거군요.
                                    가) h1 .b1 #a1 -> 1+10+100 : 111 ^^
                                    우선순위에 따라서 결과가 나타난다면...이케 되어야 하지 않을까요.(가) h1 .b1 #a1 -> 1+10+100 : 111(나) .b1 h1 -> 10 + 1 : 11(다) h1 -> 1
                                    따라서 가장 우선순위가 높은 건 (가)이고, 가장 낮은 건 (다) 입니다.
                                    또 다음과 같은 경우에는
                                    (라) #a1 -> 100(마) div#a1 -> 1 + 100 : 101따라서, (라)보다 (마)의 경우가 우선순위가 더 높은거군요.
                                    이제야 이해합니다.
                                    대화보기
                                    • tana
                                      한꺼번에 다 쓸수 있습니다.
                                      [div id="id" class="class"] 의 경우
                                      div#id.class { color:red; }
                                      대화보기