CSS Setup and Selectors

8001 ワード

Casacading Style Sheets : 웹페이지에서 HTML콘텐츠의 스타일을 지정하는데 사용하는 언어
 색상, 글꼴 유형, 글꼴 크기, 그림자, 이미지, 위치 등..
 *인라인 스타일* (style속성은 세미콜론(;)으로 끝맺음!!)
  -> <p style="color:red; font-size:20px;">I'm learning to code!</p>
  <style>태그 문법!!
   :<head>
     <style>
       p {
          color: red;
          font-size: 20px;
       }
     </style>
    </head>
  
  CSS 파일 연결 ~> <link> 사용 (head 내 배치)
   href - 속성값은 CSS파일의 주소! (./style.css)
   type - 링크될 문서의 유형 설명! (text/css)
   rel - HTML파일과 CSS파일 간 관계 설명! (stylesheet)
  ex) <link href="https://www.codecademy.com/stylesheets/style.css"
            type="text/css" rel="stylesheet">
  
  style.css의 기본 문법은 p{
                       } 이다.
  class 선언 (여러 번 사용!!!, 마침표 . 추가)
   태그 선택자의 모든 스타일 재정의
   <p class="brand"> 이면 style.css에서는
   .brand{
   } 로 선언!!
   ->이 class를 여러 개 선언하고 싶다면
     .title{
       color: teal;
      }
     .uppercase{
       text-transform: uppercase;
      } 로 css파일에 선언하고
      html파일에는 <h1 class="title uppercase">로 작성!!
  
  id 속성-(한 번만 사용!!!, id 이름 앞에 # 추가)
   클래스의 모든 스타일 재정의
   #large-title{
    } 로 선언하고
    html파일에는 <h1 id="large-title">로!
  
 **CSS스타일을 결정하는 순서**
  tag선택자 <class선택자 <id선택자
  id선택자가 제일 구체적이기 때문에 세개 다같이 선언되도 id선택자부터 우선적으로 적용!!
  하나 이상의 tag, class, id 선택자를 추가하면 CSS선택자는 특이성 높아짐!
  
  **CSS 다수 선택자를 결합할 때**
   h1.special{
   } --  경우 special 클래스를 갖는 h1 태그만을 선택!
       (만약 p 태그에도 special 클래스가 있다면 p 태그에는 적용xx!)
      html에는 <h1 class="special">로..
  // 클래스 없는 경우 모든 h5를 선택하지 않고 h5안의 요소만 선택하고 싶다면
     .decription h5{
     } 로 작성해야함!  html에는 <h5>~~</h5>처럼 클래스 존재xx
   그냥 h5 {
         color: purple;
       } 보다
      .decription h5{
       color: teal;
      } 이 더 구체적이기 때문에 위에 코드가 먼저 쓰였어도 색은 teal이 된다.
  
  **코드가 반복될 때**
   쉼표로 구분!
   ex) h1 {
        font-family: Georgia;
        }
       .menu {
         font-family: Georgia;
        } 면 중복되지 않게
       h1, 
       .menu { 
         font-family: Georgia;
       } 로!! 깔끔하게..
  
  **리스트 만들기**
   .main-list li{
   } -- li를 선언!