CSS, Sass

• 2022/01/05

CSS Box Model

• CSS layout의 기본이 되는 모델
• content-box, padding-box, border-box, margin-box 순으로 하나의 element를 감싸고 있음.
• box의 타입은 inline,block 두 가지.
• display: inline, display:inline-block, display:block 으로 서로 다른 box type을 적용함.

CSS Box Model - box-sizing

• width, height는 디폴트로 content-box의 크기를 정의.
• width: 100px으로 정의 시, content의 크기만 100px이 되며, padding,border의 크기는 100px에 추가됨.
• box-sizing: border-box로 box sizing의 방식을 변경할 수 있음.
• border-box는 padding,border를 width,height에 포함.
• 보통 이해하기 쉬운 레이아웃을 정의하기 위해 box-sizing: border-box를 선호.
  

CSS Position

CSS Units

Sass

• Syntactically Awesome Style Sheets. CSS Preprocessor.
• SCSS, Sass 문법을 지원함.
• 모듈, 믹스인, nested style, 변수, 조건문, 반복문 등의 기능으로 CSS를 프로그래밍 언어적으로 활용하도록 확장.
• styled-components는 Sass를 기본적으로 지원함.

Sass &

.rest-button {
  &.active {}
  &.disabled {}
  &:hover {}
  &:not(:first-of-type) {}
  & + & {}
  & ~ & {}
  & > button {}
}

• &는 자기 자신을 나타내는 placeholder
• 기존 CSS의 selector 문법을 응용하여 복잡한 스타일을 적용.
• 컴파일시 ex) .reset-button.active {}

Sass variable

$color-red: red;
$color-white: #fff;

.reset-button {
  color: $color-red;
  $:hover {
    color: $color-white;
  }
}

• 믹스인,partial와 함께 Sass가 제공하는 코드 관리 방법 중 하나.
• 색상, 사이즈 등 자주 등장하는 값을 주로 변수로 사용함.

Sass nested style

$color-red: red;
$color-white: #fff;

.reset-button {
  color: $color-red;
  $:hover {
    color: $color-white;
  }
  > button {
  }
}

• 별도의 class를 정의할 필요 없이, 하나의 block안에 여러 CSS를 적용할 수 있는 방법.
• CSS specificity가 그대로 적용되므로, 너무 깊게 nested되면 스타일 유지보수가 힘듦.

Sass mixins, import, include

@mixins font-style-1 {
  font-size: 36pt;
  line-height: 1.5;
  font-weight: 700;
  letter-spacing: -0.05;
}

@import "./font-styles.scss" .button {
  @include font-style-1;
  background: red;
}