조나스 선생 강의 메모

좋은 HTML과 CSS 작성을 위한 세가지 원칙 (절대 잊지 마세요)

CSS 작동 방식

• Load HTML ⇒ Parse HTML ⇒ DOM(document Objuct Model):html 코드 저장
• Parse HTML ⇒ Load CSS ⇒ Parse CSS ⇒ CSS Object Model(CSSOM) : DOM과 유사한 트리구조
• parse CSS에서 하는 것:
  • 1. cascade(충돌되는 css 처리)
  • 2. Process final CSS values (백분율을 px값으로)
• DOM + CSSOM ⇒ Render tree(페이지 렌더링) ⇒ Website rendering: the visual formatting model (브라우저) ⇒ 최종 렌딩된 웹사이트

parse CSS - 1. 충돌하는 CSS 해결 (캐스케이드)

• 개발자가 작성하는 CSS ⇒ Author CSS

• 브라우저 기본 글꼴 크기 등 사용자가 지정하는 것 ⇒ User CSS

• 기본적으로 있는 스타일(a 태그는 파란색) ⇒ Browser (user agent) CSS

• CSS 우선 순위 : IMPORTANCE > SPECIFICITY > SOURCE ORDER(위~아래)

• Importance 순위

  1. User : important 선언
  2. Author : !important
  3. Autor CSS
  4. User CSS
  5. Default browser

• Specificity 순위

  1. 인라인 스타일
  2. ID
  3. class, pseudo-class(가상 클래스, :root, :first-child :not(), :hover), attribute
  4. element, pseudo-elements(::after, ::first-letter 등)

  parse CSS - 2. value값 처리

  1. value 값 선언
  2. 캐스케이드 (충돌하는 CSS 해결)
  3. 구체화된 value 값
  4. Computed value (converting relative values to absolute)
  5. Used value (final calculations, based on layout)
  6. Actual value (browser and device restrictions)

  ---

  • CSS 엔진이 상대 단위를 px로 변환하는 법
    • % ⇒ n% * 부모 요소의 크기
    • em(부모 요소 or 현재 요소 폰트 크기 기반)
      • em(font) ⇒ n * 부모 요소의 폰트 사이즈
      • em(lengths) ⇒ n * 현재 요소의 폰트 사이즈
    • rem(root의 폰트 크기 기반) ⇒ n* root의 폰트 사이즈

  parse CSS - 3.상속

  .parent {
  	font-size: 20px;
  	line-height: 150%;
  }
  .child {
  	font-size: 25px;
  }
  

  여기서 .child의 line-height의 값은 20 * 150 = 30px이다.

  속성이 상속될 때는 부모요소에서 계산된 값이 넘겨진다.

  px to rem

  • px에서 rem으로 바꾸는 법: root font-size는 어디서 설정하냐 : CSS 파일에서 html {font-size: };
  • rem 계산하기 귀찮을 때 팁! root font-size를 62.5%로 한다

웹사이트 렌더링: 시각적 서식 모델(visual formatting model)

• 문서를 처리하여 시각적 매체에 표시하는 알고리즘
• 알고리즘은 뭘 따지냐. .
  • 상자의 크기 콘텐츠(텍스트, 이미지)⇒패딩⇒마진⇒보더⇒채우기 영역
  • 상자의 유형(block, inline,inline-block)
  • 포지셔닝 (normal flow(기본값), floats, absolute)
  • z-index