4일차. CSS 이해하기

<알고 있었던것들>

• CSS : HTML을 꾸며주는 표현형언어
• 주석 : /*내용*/
• 적용방식
  • (인라인) 태그 안에 직접 style=""
  • (internal) head 태그안에 style 태그 삽입
• 요소 선택자: 태그이름에 들어가고 해당 선택자에 모든 요소 적용

<몰랐던 것들>

• CSS(Cascading Style Sheets)
• CSS 구문("h1{color:yellow; font-size:2em;}"
  • 선택자(selector) - "h1"
  • 속성(property) - "color"
  • 값(value) - "yellow"
  • 선언(declaration) - "color: yellow", "font-size: 2em"
  • 선언부(declaration block) - "{ color: yellow; font-size:2em; }"
  • 규칙(rule set) - "h1 { color: yellow; font-size:2em; }"
• 적용방식
  • (external) <link rel="stylesheet" href="css/style.css">
• 전체 선택자: *
• 선택자와 선언은 그룹화 가능(,)
• class 선택자 : 요소에 구애받지 않고 스타일 규칙 적용 style 태그 안에 혹은 css파일에는 .선택자{} , 적용하고 싶은 태그 안에 class=""추가
• id 선택자 : #로 시작, 태그에 id속성으로, 문서 내에서 유일한 요소에 사용, 구체성
• 선택자 조합도 가능 : 요소.클래스/ .클래스.클래스 / #아이디.클래스
• 정확한 속성값 선택
  • p[class="foo"] { color: silver; } /*<p>이면서 class 속성값이 foo이면 적용*/
  • p[id="title"] { text-decoration: underline; }
• 부분 속성값
  • [class~="bar"] : class 속성의 값이 공백으로 구분한 "bar" 단어가 포함되는 요소 선택
  • [class^="bar"] : class 속성의 값이 "bar"로 시작하는 요소 선택
  • [class$="bar"] : class 속성의 값이 "bar"로 끝나는 요소 선택
  • [class*="bar"] : class 속성의 값이 "bar" 문자가 포함되는 요소 선택
• /* body 요소의 자식인 div 요소의 자손인 table 요소 바로 뒤에 인접한 ul 요소 선택! */
  body > div table + ul { ... }
• 가상 클래스 : 미리 정의해놓은 상황에 적용이 되도록 약속되어 있는 보이지 않는 클래스
  :pseudo-class{
     property:value;
  }
• 문서구조와 관련된 가상클래스
  • :first-child{color:red;} : 첫번째 자식 요소
  • :last-child{color:blue;} : 마지막 자식 요소
• 링크 관련된 가상 클래스
  • :link : 하이퍼링크이면서 아직 방문하지 않은 앵커 <a href=">
  • :visited : 이미 방문한 하이퍼링크
• 사용자 동작 관련 가상 클래스(앵커에 많이 사용)
  • :focus : 현재 입력 포커스를 갖고 있는 요소에 적용
  • :hover : 마우스 포인터가 위치해 있는 요소에 적용
  • :active : 사용자 입력에 의해 활성화된 요소에 적용
• 가상요소
  • :before{content:""} : 가장 앞에 요소를 삽입
  • :after{content:""} : 가장 뒤에 요소를 삽입
  • :first-line : 요소의 첫 번째 줄에 있는 텍스트
  • :first-letter : 블록 레벨 요소의 첫 번째 문자
• 구체성 계산
  • 값을 비교할 때는 좌측에 있는 값부터 비교하며, 좌측 부분의 숫자가 클수록 높은 구체성을 갖습니다.구체성은 아래의 규칙대로 계산됩니다. 
  •  0, 1, 0, 0 : 선택자에 있는 모든 id 속성값
  • 0, 0, 1, 0 : 선택자에 있는 모든 class 속성값, 기타 속성, 가상 클래스
  • 0, 0, 0, 1 : 선택자에 있는 모든 요소, 가상 요소
  • 전체 선택자는 0, 0, 0, 0을 가진다.
  • 조합자는 구체성에 영향을 주지 않는다. (>, + 등)
  • h1 { ... } /* 0,0,0,1 */
    body h1 { ... } /* 0,0,0,2 */
    .grape { ... } /* 0,0,1,0 */
    *.bright { ... } /* 0,0,1,0 */
    p.bright em.dark { ... } /* 0,0,2,2 */
    #page { ... } /* 0,1,0,0 */
    div#page { ... } /* 0,1,0,1 */
• 인라인 스타일로 속성 선언되었을때는 1,0,0,0이고 제일 큰 구체성을 갖는다.
• !important는 모든 구체성을 무시하고 우선권을 갖는다.
  p#page{color:red !important;}
• margin, padding, background, border 등 박스 모델 속성들은 상속되지 않는다
• cascading- 3가지 규칙
  • 중요도(!important)와 출처
    • 5. 사용자 에이전트 스타일
    • 4. 사용자 스타일
    • 3. 제작자 스타일
    • 2. 제작자 !important 스타일
    • 1. 사용자 !important 스타일
  • 구체성
  • 선언 순서