CSS

선택자와 선언

어떤 태그를 디자인하기 위해서는 디자인하려는 태그를 

  1. 선택하고 (선택자)
  2. 선택한 대상에게 효과를 줘야 합니다. (선언)

이번 시간에는 CSS에서 가장 기본적인 문법이라고 할 수 있는 이 선택자(selector)와 선언(declaration)에 대해서 알아봅니다. 가장 중요한 내용이라고 할 수 있습니다. 

선택자와 선언

 

예제 - selector_declaration_1.html

<!DOCTYPE html>
<html>
  <head>
    <style>
      li{
        color:red;
        text-decoration:underline;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
    </ul>
  </body>
</html>

 

댓글

댓글 본문
  1. jaehyunlee
    완료
  2. 오석민
    완료
  3. 박병진
    20200930완료
  4. 콜라
    20200926완료
  5. 여니여니
    200920 감사합니다
  6. 김성곤
    20200716 감사합니다!
  7. leechi
    간단히 선택하고 선언하면 기본적인 css 완성
  8. 열심히사는사람
    완료
  9. 한강
    선택자는 주어 선언은 서술어~~!!! 감사합니다.
    200526
  10. 노래하는프로그래머
    완료!
  11. <!DOCTYPE html>
    <html>
    <head>
    <style>
    h1{color:blue}
    </style>
    </head>

    <body>
    <h1 >hello world</h1>

    </body>
    </html>

    여기서 <h1>태그에 css 로 색깔을 파란색으로 바꿨는데 적용이 안되는데 이유가 뭔가요?
    hl 과 h1을 인식못해서 그런건가요? h2부턴 적용이잘되고 <body> 태그 밑에 <h1> 태그 안의 속성에서 색깔을 바꿔주면 잘적용되는데 <head>태그의 <style>에서 <h1>태그에 css 로 색깔을바꾸는것만 적용이 안되요 ㅠㅠ
  12. <style>
    css언어
    </style>

    선택자 { 선언문 }
    { 선언문 } = { 속성:속성값; }
  13. 무지개반사
    완료
  14. 2020. 1. 6 수업완료
  15. 2020.01.04
  16. 유새봄
    2년전 댓글이지만 제가 찾아낸게 신기해서 답글을 달아야겠어요 :)
    <body>
    </body>------> 이걸 빼야해요!
    <ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
    </ul>
    </bdoy>----> </body>
    대화보기
    • Grigo
      완료
    • 치디우기
      2019/8/25 수강완료
    • 다나가
      190718 - 완료!!
    • 김주엽
      수업완료
    • 잘될자
      190502 수강완료
    • 홍명교
      2019.04.16. 수강완료
    • 김예은
      190402 수강완료 감사합니다
    • lygon
      2019-02-22 완료
    • 한승민
      190212
    • steal
      20190124 완료
    • 숨이
      완료했습니당
    • 김민영
      완료
    • 리젤린
      css공부 시작합니다!
    • 로버트한
      잘 보았습니다.^^
    • 고유르
      복습완료
      대화보기
      • SlowStarter
        감사합니다!
      • 스페이스몽키
        복습하는 겸 하나하나 다 보고 있습니다. 감사합니다~!
      • 최천일
        잘 보고 있어요~~~~
      • JN87
        180101 감사합니다!
      • 김성인
        완료! 감사합니다.
      • 푸른하늘
        9일차 공부 감사합니다
      • Jupi
        밑의 body 태그가 bdoy 로 적혀 있어요~
        대화보기
        • 이경일
          선택자를 통해 디자인할 대상을 지정해준다.
          선택자 뒤엔 다수의 선언이 올 수 있다.
          각 선언을 구분하는 구분자는 세미콜론 ';'
          선언 안에서 속성과 속성값을 구분하는 구분자는 콜론 ':'이다.
        • underlin -> underline
          대화보기
          • 박지원
            <body>가 두개가 있어요! ul위의 <body>를 지워 주셔야 할것같아요!
            대화보기
            • 고병화
              <!DOCTYPE html>
              <html>
              <head>
              <style>
              li{
              color:red;
              text-decoration:underlin;
              }
              </style>
              </head>
              <body>
              </body>
              <ul>
              <li>HTML</li>
              <li>CSS</li>
              <li>JavaScript</li>
              </ul>
              </bdoy>
              </html>

              이렇게 했는데 왜안될까요유
            • 오빠는다르다
              감사합니다~!!!
            • 강지후
              <!DOCTYPE html>
              <html>
              <body>
              강의 완료 20170630
              2번째 관문 <strong>CSS</strong>!
              </body>
              </html>
            • dandan
              효과가 더 따라오면 세미콜론을 찍어준다. 구분하기 위해.....
              가독성을 위해 줄바꿈.


              css selector 구글 이미지 검색

              selector 선택자 (주어)
              declaration 선언 (서술어)

              color - 속성
              red - 속성값
              : 속성과 속성값 구분자
              ; 선언과 선언을 구분하는 구분자
            • MS lee
              ㅎㅎ
              CODEPEN 저거요, 재미삼아 다른글씨 넣어서 장난쳐보니 참 재미있네요...
            • 공삼이육
              감사합니다~!
            • 14번째
              5.6.
            • php가 첫취업?
              2017-04-30
            • 광뀨
              0209완료
            버전 관리
            egoing
            현재 버전
            선택 버전
            graphittie 자세히 보기