[TIL] 어드밴스드 CSS (유데미)

유데미의 css강의를 완주했습니다.

https://www.udemy.com/course/advanced-css-and-sass/

Sass의 nesting을 활용하는 BEM을 배우게 되어 유용했습니다. BEM은 block__element—modifier의 이니셜입니다. 다음 예제와 같은 용법을 말합니다.

.button {                // Block
  background: blue;

  &__text {              // Element (.button__text)
    color: white;
  }

  &--large {             // Modifier (.button--large)
    padding: 20px;
  }
}

mobile first 와 desktop first 접근의 media query 차이에 대한 내용도 유익합니다. mobile first에서는 min-width를 쓰고 desktop first에서는 max-width를 쓴다고 하네요.

Flexbox 와 grid 가 이 강의의 핵심 주제인데 설명이 아주 명확합니다. 강사가 살짝살짝 헤매면서 간접경험으로 배우는 것도 많네요.

매우 추천합니다