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. 푸른하늘
    9일차 공부 감사합니다
  2. 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 자세히 보기