🐴좋은 HTML과 CSS 작성을 위한 세가지 원칙
🦒CSS 작동 방식
- Load HTML => Parse HTML => DOM(document Object 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 = Authour CSS
- 브라우저 기본 글꼴 크기 등 사용자가 지정하는 것 = User CSS
- 기본적으로 있는 스타일(a 태그는 파란색) => Browser(user agent) CSS
- CSS 우선 순위 : Importance > Specificity > source order(위→아래)
importance 순위
- User: important 선언
- Author: !important
- Author CSS
- User CSS
- Default browser
Specificity
- 인라인 스타일
- id
- class, pseudo-class(가상 클래스, :root,:first-child,:not()),attribute
- element, pseudo-elements(::after,::first-letter 등)
🎠parse CSS - 2.value값 정리
- value 값 선언
- 캐스케이드(충돌하는 css해결)
- 구체화된 value 값
- Computed value (상대 단위 → px)
- Used value (final calculations, based on layout)
- Actual value (browser and device restrictions)
- CSS 엔진이 상대 단위를 px로 변환하는 과정
- % → n% * 부모 요소의 크기
- em(부모 요소 or 현재 요소 폰트 크기 기반)
- em(font) → n * 부모 요소의 폰트 사이즈
- em(lengths) → n * root의 폰트 사이즈
- 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
공부중