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. 로버트한
    잘 보았습니다.^^
  2. 고유르
    복습완료
    대화보기
    • SlowStarter
      감사합니다!
    • 스페이스몽키
      복습하는 겸 하나하나 다 보고 있습니다. 감사합니다~!
    • 최천일
      잘 보고 있어요~~~~
    • 180101 감사합니다!
    • 김성인
      완료! 감사합니다.
    • 푸른하늘
      9일차 공부 감사합니다
    • 밑의 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 자세히 보기