TIL. NO3. CSS

1. CSS 문법

h1{color: yellow; font-size: 2em;}

• h1: 선택자(selector)
• color : 속성(property)

  html의 속성은 attribute

• yellow : 값(value)
• 속성+값 : 선언(declaration)
• { } : 선언부(declaration block)
• 전체 : 규칙(rule set)

주석(개발자들을 위한) : / 내용 /

[CSS 적용 방식]

• Inline
  내용
• Internal (에 속함)
• External (에 속함)

2. CSS 선택자

참고) https://www.w3schools.com/cssref/css_selectors.asp

1. 요소 선택자(태그)

   GROUPING

   • 선택자 : h1,h2,h3 {color:yellow;}
   • 전체 선택자 : * {color:yellow;}
   • 선언 : h1{color: yellow; font-size: 2em;}
   • 선택자&선언 : h1,h2,h3 {color: yellow; font-size:

2. class 선택자 >> .

3. id 선택자 >> #, 문서 내 유일하게 사용

   • 요소와 클래스의 조합 : p.bar{...}
   • 다중 클래스 : .foo.bar{...}
   • 아이디와 클래스의 조합 : #foo.bar{...}

4. 속성 선택자

   1. 단순 속성을 선택 : p[class][id]{color:silver;}
   2. 정확한 속성값으로 선택 : p[class="foo"]{color:silver;}
   3. 부분 속성값으로 선택
      • [class~="bar"] : class 속성의 값이 공백으로 구분한 "bar" 단어가 포함되는 요소 선택
      • [class^="bar"] : class 속성의 값이 "bar"로 시작하는 요소 선택
      • [class$="bar"] : class 속성의 값이 "bar"로 끝나는 요소 선택
      • [class*="bar"] : class 속성의 값이 "bar" 문자가 포함되는 요소 선택

5. 문서 구조 관련 선택자

   • 자손 선택자 : div span {color:red;}

     <div>의 자손 요소인 <span>를 선택하는 선택자  

   • 자식 선택자 : div>span {color:red;}

     <div>의 자식 요소인 <span>를 선택하는 선택자  

   • 인접 형제 선택자 : div+span {color:red;}

     <div>의 형제 관계이면서 바로 뒤에 인접해 있는 요소 <span>를 선택하는 선택자 

6. 가상 선택자

   참고)https://developer.mozilla.org/ko/docs/Web/CSS/Pseudo-classes

   가상 클래스 = 미리 정의해놓은 상황에 적용되도록 약속된 보이지 않는 클래스

   1. 문서 구조와 관련된 가상 클래스
      • first-child : 첫 번째 자식 요소 선택
      • last-child : 마지막 자식 요소 선택
   2. 앵커 요소와 관련된 가상 클래스
      • link : 하이퍼 링크이면서 아직 방문하지 않은 앵커
      • visited : 이미 방문한 하이퍼링크를 의미
   3. 사용자 동작과 관련된 가상 클래스
      • focus: 현재 입력 초점을 가진 요소에 적용
      • hover: 마우스 포인터가 있는 요소에 적용

   참고)https://developer.mozilla.org/ko/docs/Web/CSS/Pseudo-elements

   가상 요소 = HTML 코드에 존재하지 않는 구조 요소에 스타일을 부여할 수가 있습니다.

   • before : 가장 앞에 요소를 삽입
   • after : 가장 뒤에 요소를 삽입
   • first-line : 요소의 첫 번째 줄에 있는 텍스트
   • first-letter : 블록 레벨 요소의 첫 번째 문자

3. 캐스케이딩

1. 중요도(!important)&출처
   = 제작자 스타일 규칙이 사용자 에이전트 스타일 규칙보다 우선합니다.
   

2. 구체성
   = 선택자에는 어떤 규칙이 우선으로 적용되어야 하는지에 대해 정해진 규칙

   0, 1, 0, 0 : 선택자에 있는 모든 id 속성값
   0, 0, 1, 0 : 선택자에 있는 모든 class 속성값, 기타 속성, 가상 클래스
   0, 0, 0, 1 : 선택자에 있는 모든 요소, 가상 요소
   1, 0, 0, 0 : 인라인 스타일

   • 전체 선택자는 0, 0, 0, 0을 가진다.
   • 조합자는 구체성에 영향을 주지 않는다. (>, + 등)
   • !important : 모든 구체성을 무시하고 우선권을 갖음
     p#page { color: red !important; }
   • 상속되는 속성은 아무런 구체성을 가지지 못함

3. 선언 순서 = 뒤에 선언된 규칙일수록 우선