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. datsciseol
    20210115
  2. 따뜻한츄르
    201229
  3. 201223 ✅
  4. 2NG(이엔지)
    <body>
    <h1 >hello world</h1>

    h1 여는태그 부분의 >가 한 칸 떨어져 있네요.
    대화보기
    • 201213
    • 몽실엄마
      오늘도 하나 배워갑니다.
    • switpotato
      20201122: 2차학습 완료
    • 켄드릭
      2020년 10월 29일(목) 13:49 1차 학습완료
    • jaehyunlee
      완료
    • 오석민
      완료
    • 박병진
      20200930완료
    • 콜라
      20200926완료
    • 여니여니
      200920 감사합니다
    • 김성곤
      20200716 감사합니다!
    • leechi
      간단히 선택하고 선언하면 기본적인 css 완성
    • 열심히사는사람
      완료
    • 한강
      선택자는 주어 선언은 서술어~~!!! 감사합니다.
      200526
    • 노래하는프로그래머
      완료!
    • <!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 로 색깔을바꾸는것만 적용이 안되요 ㅠㅠ
    • <style>
      css언어
      </style>

      선택자 { 선언문 }
      { 선언문 } = { 속성:속성값; }
    • 무지개반사
      완료
    • opper
      2020. 1. 6 수업완료
    • Blanc
      2020.01.04
    • 유새봄
      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>

                이렇게 했는데 왜안될까요유
              버전 관리
              egoing
              현재 버전
              선택 버전
              graphittie 자세히 보기