CSS 아키텍처

soyeon·2021년 12월 26일
0

TIL

목록 보기
2/31
post-thumbnail

🐴좋은 HTML과 CSS 작성을 위한 세가지 원칙

🦒CSS 작동 방식

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

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

  • 개발자가 작성하는 CSS = Authour CSS
  • 브라우저 기본 글꼴 크기 등 사용자가 지정하는 것 = User CSS
  • 기본적으로 있는 스타일(a 태그는 파란색) => Browser(user agent) CSS
  • CSS 우선 순위 : Importance > Specificity > source order(위→아래)

importance 순위

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

Specificity

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

🎠parse CSS - 2.value값 정리

  1. value 값 선언
  2. 캐스케이드(충돌하는 css해결)
  3. 구체화된 value 값
  4. Computed value (상대 단위 → px)
  5. Used value (final calculations, based on layout)
  6. Actual value (browser and device restrictions)

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

🎠parse CSS - 3. 상속

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

여기서 .child의 line-height의 값은 20*1.5 = 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

🦒components and BEM (유지 및 관리가 수월해지는 코딩)

컴포넌트 중심으로

  • 재사용할 수 있는 레이아웃 구성
  • 구성 요소는 독립적이어야한다. (부모 요소에 의존x)
    🍧BEM:Block Element Modifier
.block {}
.block__element{}
.block__element--modifier {}
  • block: 재사용 가능! 똑 떼어서 다른 곳에 쓸 수 있음
  • element: block에서 어떤 역할인지 ex).nav__logo
  • modifier: 블럭이나 엘레먼트의 속성. 생긴 게 조금 다르거나 다르게 동작할 때 ex)tab__item--focused

🍧SASS 파일 구조: 7-1패턴
7개의 SASS 폴더와 그걸 모아놓은 CSS파일

sass/
|
|– abstracts/
|   |– _variables.scss    # Sass Variables
|   |– _mixins.scss       # Sass Mixins
|
|– vendors/
|   |– _bootstrap.scss    # Bootstrap
|
|– base/
|   |– _reset.scss        # Reset/normalize
|   |– _typography.scss   # Typography rules
|
|– layout/
|   |– _navigation.scss   # Navigation
|   |– _grid.scss         # Grid system
|   |– _header.scss       # Header
|   |– _footer.scss       # Footer
|   |– _sidebar.scss      # Sidebar
|   |– _forms.scss        # Forms
|
|– components/
|   |– _buttons.scss      # Buttons
|   |– _carousel.scss     # Carousel
|   |– _cover.scss        # Cover
|   |– _dropdown.scss     # Dropdown
|
|– pages/
|   |– _home.scss         # Home specific styles
|   |– _contact.scss      # Contact specific styles
|
|– themes/
|   |– _theme.scss        # Default theme
|   |– _admin.scss        # Admin theme
|
 – main.scss              # Main Sass input file
profile
공부중

0개의 댓글