CSS 수업

HTML을 꾸며주는 아름다운 언어

CSS 수업 HTML을 꾸며주는 아름다운 언어

선택자의 조합

하위 선택자

  • 특정 엘리먼트의 하위에 나오는 엘리먼트를 선택하는데 사용
  • 부모가 먼저 나오고 자식이 나중에 나옴
  • 공백을 통해서 부모와 자식을 구분
<style type="text/css">
    #navigation li{
        color:blue;
    }
</style>
<div id="navigation">
    <ul>
        <!-- 글씨가 파란색으로 표현됨 -->
        <li>홈</li>
        <li>제품소개</li>
        <li>고객센터</li>
    </ul>
</div>
<ul>
    <!-- 아래 내용은 영향을 받지 않음 -->
    <li>홈</li>
    <li>제품소개</li>
    <li>고객센터</li>
</ul>

하나의 CSS선언을 여러개의 선택자에 적용하기

  • 하나의 css선언을 여러 엘리먼트 셀렉터에 적용하고 싶을 때 사용
  • 선택자와 선택자를 ',(콤마)'로 구분
<!--
h1과 #link 선택자 사이에 ,(콤마)를 두어 글씨의 색을 붉은색으로 지정
-->
<style type="text/css">
    h1, #link{
       color:red;
    }
</style>
<h1>생활코딩에 오신 것을 환영합니다.</h1>
<a id="link" href="http://opentutorials.org">생활코딩</a>

자식선택자 -child selector

  • 특정 엘리먼트의 직접적인 하위 엘리먼트에 대해서만 선택할 때 사용(하위 선택자와 다름)
  • ie6는 지원되지 않음
<!--
id navigation의 직접적인 자식인 li만 테두리가 생기고, 
<li>사이트</li>의 하위 엘리먼트에는 테두리가 생기지 않는다.
-->
<style type="text/css">
    #navigation > li{
        border:1px solid red;
    }
</style>
<ul id="navigation">
    <li>홈</li>
    <li>사이트
        <ul>
           <li>생활코딩</li>
           <li>코딩생활</li>
        </ul>
    </li>
    <li></li>
</ul>

 

댓글

댓글 본문
작성자
비밀번호
  1. 1
  2. 김종엽
    2016.08.24 완료!
  3. Ian Si Mong Seong
    수강완료
    2016.08.01
  4. 이승민
    강의 잘봤습니다. 감사합니다 ㅎ
  5. Rhys Jung
    감사합니다. 알아듣기 쉬운 설명 감사합니다.
  6. 잘봤습니다 자식선택자란 말이 생소했는데 할아버지 아빠 손자로 이해하니 쉽네요 ㅎㅎㅎ 할아버지가 바로밑에 자식인 아빠까지만 혜택을 주고 손자는 안준다.. ㅋㅋ 이해하고 넘어갑니다
  7. JustStudy
    고맙습니다
  8. 빨강머리앤
    감사합니다..
  9. 이웃집토토로
    #본토픽 코드생성기의 버그리포트

    우분투 기반 OS환경에서 기인하는 문제인지는 모르겠지만
    주석이 달려있는 CSS가 포함된 코드에 한해서
    코드생성기 더블클릭해서 전체 선택 시 보이지 않는
    공백문자="           "가 발생하였습니다.
    공교롭게도 공백문자가 포함되어 CSS문법에 오류가 생기게 됩니다.
    참고로 공백문자는 작은 역삼각형처럼 생겼습니다.
  10. 이웃집토토로
    4.01 권고사항에는 스타일 시트의 종류를 반드시 표기하라고 되어 있는데 html5 기준으로는 필요 없습니다.

    그런데 만약 레거시 시스템을 유지보수하는 과정에서 text/css를 명시하지 않고 코딩해서 올렸는데 하필이면 DTD선언 등으로 엄격한 문법을 적용받는 파일이었을 경우 결과는 장담하지 못할 것 입니다. 특히 사용자의 브라우저가 오래되거나 마이너한 버전인 경우 문제가 발생할 수 있습니다.

    즉, 타겟사용자와 개발환경에 따라 다른데... B2B나 글로벌 서비스가 아니라면 문제가 없을 것 같습니다.
    불안하시면 W3C의 첫번째 권고사항대로 <META http-equiv="Content-Style-Type" content="text/css">
    헤드에서 선언해주면 좋을 것 같습니다.

    참고문서 - https://www.w3.org......2.1
    대화보기
    • thank you^^
    • I love computer
      초보자들에게 큰 힘이 되겠군요.
      멋진 강의 고맙습니다
    • 다른 강의 처럼 이 강의도 재밌네요.^^
      어렵긴 했지만 정말로 감사합니다
    • 농구공
      정말 너무 어려워요...하지만 잘 보았습니다 흐흐
    • 김민아
      잘 보았습니다 감사합니다~
    • Su Hwan Yun
      자식 선택자를 적용할 때 border:1px solid red;는 직속적인 자식만 적용이 되는데 color나 font-size는 제한없이 전부 적용이 되네요. 원래 이러는 건가요??
    • 늘생릭코네
      좋은 내용입니다.
    • YellowBall
      잘 들었습니다.
    • 강좌 너무 잘 보고 있습니다
      질문하나 드리겠습니다~ 강좌를 보면 <style type="text/css"> 부분에서요, 이제 type="text/css" 를 안써도 무관한가요? 옜날에 작심 40시간 강좌에서는 그랬던것 같아서요
    • 성별님
      책으로 내시면 사고싶네용ㅋㅋ
    • egoing
      옙 경로입니다.
      대화보기
      • 미키만세
        안녕하세요 생활코딩을 공부중인 미키만세입니다.

        공부하다 궁금한게 있어 문의드립니다.

        특정사이트에서 구글개발자도구를 보다 css만을 사용하여 코딩하는것을

        봤습니다.

        예를들면

        <style type="text/css">
        .item-Detail .item-info .box {
        *zoom: 1;
        background-color: #f8f7f7;
        border-top: 1px solid #dad8d8;
        border-bottom: 1px solid #dad8d8;
        margin-bottom: 45px;
        padding: 20px 20px 14px 20px;
        }
        </style>

        위와같이 class를 한줄에 여러번 사용하는 경우입니다.
        이런경우 class의 경로를 말하는 것인지요?

        item-Detail 클래스안에 item-info클레스안에 box박스클래스를 가진속성을
        하단의 값으로 제어하라 이런뜻인지요?
      • ch8773
        ie6버전에서는 ">" 선택자 적용이 않되므로 익스플로러 버전을 확인 해 보시고 아니면 모든 선택자에 대한 초기화 선언을 하지 않아서 그럴수 있습니다.
        대화보기
        • 노을
          저도 이거에대해서 알고싶은데
          이고잉님 답글에 보면 course..까지밖에안나오고
          주소가 끝까지 답글에 안나와있어요 ㅠㅠ 저만그런가요?


          -----------------------


          egoing1년 전

          나중에 아래 수업을 통해서 알게 됩니다. ^^
          http://opentutorials.org/cours...

          ------------------------------이렇게용..ㅠㅠ
          대화보기
          • 노을
            읭..? a태그에 적응 안되던데용ㅎ0ㅎ..
            대화보기
            • mimiandchopa
              잘보았습니다~
            • huziya
              열심히 보고 갑니다^^
            • 조원준
              궁굼한점이있는데 만약에

              <html>
              <head>
              <meta charset="utf-8" />
              <style type="text/css">
              li{
              font-size:20px;
              color:green;
              }
              </style>
              </head>
              <body>
              <p>
              <li class="black">1장</li>
              <li>세탁기</li>
              <li>제품</li>
              <li>설명서</li>
              <ul>
              <li>사용법</li>
              <li>주의사항</li>
              </ul>
              <a href="http://www.youtube.com">유투브</a>
              </p>
              </body>
              </html>

              여기에 제가 li 라는 태그에만 스타일을 준걸로아는데 a 태크에도 적용이되서 뭐가 문제인지 알고싶습니다.
            • IWCTWTMG
              감사합니다.
              완벽하게 이해됬어요!
            • hasungpa
              감사합니다. 유익하게 잘 보고 있습니다.
            • blessrain
              감사합니다~ 차근차근보니, 너무 좋네요~
            • 131015 jhc
            • jyowen
              혼자 책으로 같은내용을 공부할땐 이게 무슨내용인가 싶었는데, 동영상을 차례차례 보니까 하나하나 이해가 가는게 정말 즐겁습니다!ㅋㅋ
            • mimiandchopa
              감사합니다. 잘보았습니다.
            • 용12
              잘봤습니다!ㅎㅎ
            • chrm
              으아닠ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ감사합니다
              대화보기
              • egoing
                나중에 아래 수업을 통해서 알게 됩니다. ^^
                http://opentutorials.org/cours...
                대화보기
                • Go Lee
                  <style type="text/css">#navigation > li{ border:1px solid red; color:blue;}</style>
                  <ul id="navigation"><li>홈</li><li>사이트<ul><li>생활코딩</li><li>코딩생활</li></ul></li><li></li></ul>
                  위와 같이 [자식선택자] 예제에 "color:blue" 선언을 추가해 보았는데요이 색관련 선언은 손자인 "생활코딩", "코딩생활"까지 영향이 미치네요..설명대로라면 해당 선택자의 바로 아래 자식인 "홈", "사이트" 들에게만글자색 파랑의 선언의 효과가 미쳐야 하는게 아닌가요?제가 어떤 부분을 놓치고 있는걸까요? 혼란스럽습니다T-T
                • neO matpclub
                  설명 정말 딱이네요..ㅋㅋ
                  대화보기
                  • Starmomo
                    쫒아가서 챙겨주는 하위선택자, 콕!콕! 집어 챙겨주는 ,(콤마). 자식만 챙겨주고 손주는 안챙겨주는 자식선택자로 정리하면 하겠습니다.
                  • haha
                    재밌는 표현이네요 ^.^
                    대화보기
                    • Chuck
                      막판에 애매모호했는데 이 말 한 마디로 1초만에 이해되었네요! ㅎㅎ
                      대화보기
                      • 나그네
                        ㅋㅋㅋㅋㅋㅋㅋㅋ 넘 웃겨요
                        대화보기
                        • sugarui
                          자식만 챙겨주고 손주는 안챙겨주는 자식선택자..
                        • 이상윤
                          하위 엘리먼트 선택할때 >(꺽쇠) 익스6에서 안되는걸로 알고 있습니다
                        버전 관리
                        egoing
                        현재 버전
                        선택 버전
                        graphittie 자세히 보기