생활코딩

Coding Everybody

코스 전체목록

닫기

선택자와 선언

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

  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. 노래하는프로그래머
    완료!
  2. <!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 로 색깔을바꾸는것만 적용이 안되요 ㅠㅠ
  3. <style>
    css언어
    </style>

    선택자 { 선언문 }
    { 선언문 } = { 속성:속성값; }
  4. 무지개반사
    완료
  5. 2020. 1. 6 수업완료
  6. 2020.01.04
  7. 유새봄
    2년전 댓글이지만 제가 찾아낸게 신기해서 답글을 달아야겠어요 :)
    <body>
    </body>------> 이걸 빼야해요!
    <ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
    </ul>
    </bdoy>----> </body>
    대화보기
    • 완료
    • 치디우기
      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완료
            • jgatsby
              잘 배워갑니다.!
            • matheios
              강의 감사합니다~
            • 2016.12.25 done!
            • 임지호
              이고잉님 수업 원래 그래요ㅋㅋㅋ
              제 생각에는 영상 좀 더 깔끔하게 하시려고 중간중간 편집하셔서 그런듯하네요.
              대화보기
              • 임지호
                CSS 기본적인 문법
                - CSS를 적용하고자 하는 태그(선택자)
                - 선택자에 적용할 디자인(선언)
                ex) <style>
                li(선택자) {color:red;}(선언)
                </style>
                *선언하는 내용 끝에 세미콜론 붙이는 것을 습관화하는게 좋다
              • 권행신
                html 수업에서는 안그랬는데, css 동영상 중간중간에 소리가 잠깐씩 mute되는 구간이 있는데 저만 그런가요 .. ?
              • ss
              • 김종엽
                2016.08.24 완료!
              버전 관리
              egoing
              현재 버전
              선택 버전
              graphittie 자세히 보기