Fronthtml css

How CSS Works

css

How to bulid a good website

반응형 웹

다양한 기기들의 다른 스크린 사이즈에 각각 최적화 된 화면을 보여주는 것

유지보수, 확장 가능한 코드

깔끔하고 누구나 알아보기 쉽게 잘 설계, 조직화 된 코드를 짜야된다. 웹 어플리케이션이 성장함에 따라 자연스럽게 코드 양이 늘어나거나 문제 발생 시 잘 설계된 코드는 시간과 비용을 현저히 줄여준다.

성능

웹사이트 성능 저하를 피하기 위해 가능한 적은 요청과, 코드, 이미지를 효율적으로 조정하는게 필요하다.

What happens to css when we load up a webpage?

  1. 브라우저가 HTML 파일 로드

  2. HTML 의 코드를 한줄 한줄 해독

  3. 해독 과정에서 코드를 DOM 구조로 빌드

  4. CSS 파일 또한 로드

  5. CSS 파일을 한줄씩 해독

    5-1. CSS Cascade (충돌하는 css 선언 조정)

    5-2. CSS 최종 속성값 결정

  6. CSSOM 빌드 (Like DOM)

  7. DOM + CSSOM -> 최종 tree 구조 빌드
  8. VIsual Formatting Model
  9. Website rendering (실제 브라우저 통해 보여지는 단계)

단계별 정리

How CSS is parsed?

  1. Cascading and Specificity

CASCADE?

특정 요소에 한 가지 이상의 속성 값이 지정됐을 때 최종적으로 어떤 속성값을 적용할 것인지 조정하고 결정하는 단계

(Author 지정 값 / css, style 에 유저 직접 지정 값 / 브라우저 자체 기본속성값 등.. 중에서 어느 속성을 최종 적용 할 것인가!? 의 문제)

Importance —> specificity —> source order 순으로 비교, 요소에 적용 될 속성값 최종 결정

1) importance

(!important 키워드 포함된 blue 로 최종 결정!)

2) specificity ( 어느 것이 더 세부적, 구체적인가?)

3) source Order (importance, specificity 가 같다면 가장 나중에 쓰여진 속성 적용)**

참고사항

  1. Value Processing

CSS 적용 할 최종 속성값을 산출하는 과정

  1. Declared value (선언된 값) —>
  2. Cascaded value( 속성 값 두가지 이상 일 때, 어느걸 적용 할까~? —>
  3. Specified value (속성 값 하나 일 때) —>
  4. Computed value (상대적인 값들 -> 절대값(px로 변환 됨) —>
  5. Used value (레이아웃 따라 값 산출 부모, % 라던지..) —>
  6. Actual value (브라우저 나 디바이스 기본설정 따라 최종 값 산출)

relative —> absolute value (px)

font-size : 부모의 font-size 기준

length: 부모의 width 기준

Font-based : em(font) : 부모 / em(length)(현재 요소 크기) / rem (root 기준)

Viewport-based : vh(height) / vw(width)

3.inheritance

요소에 지정된 css value가 없다면 부모에게서 상속 될 수 있는 요소가 있는지 확인 하고 부모의 computed value를 상속받아 적용한다.

How CSS render a website? (Visual Formatting Model)

웹사이트 레이아웃은 각각의 컴포넌트(내용)들을 담은 박스들의 합이다.

이 박스들을 구상한 레이아웃에 따라 조화롭게 배치해야한다.

1) Box Model

2) Box Types

3) Positioning Schemes

4) Stacking Contexts

중첩, 레이어 개념 어느것을 최상위로 보여 줄 것인지

How to build good CSS architecture?

효율적으로 CSS 를 3단계로 나눠서 구현하는 방식

1) 설계

컴포넌트 단위 베이스, 어디서나 재사용 가능하고 독립적으로 작성 할 것

2) 구현 (의미있는 네이밍, 조직화 된 classes, ids)

BEM

block 홀로 의미를 갖는 컴포넌트 단위

block—element 특정 블록 내에서만 의미 갖는 컴포넌트

modifier (기본형에서 변형된, 한번만 사용되는)

3) 폴더별 관리 (Sass)

Share