54일차
SASS(SCSS) 기초 1강 BEM CSS 명명법
- BEM(Block Element Modifier) 명명법의 특징
- 구성 요소
1.Block: 독립적으로 의미를 갖는 단위 컴포넌트 - 예: header, menu, button, form 등
- → 예: .button, .nav, .card
2.Element: Block 내부의 구성요소. Block 없이는 의미 없음 - 예: menuitem, formlabel, card__title
- → 예: .buttonicon, .cardcontent
3.Modifier: Block이나 Element의 상태나 변형된 스타일을 표현 - 예: button--large, card__title--highlighted
- → 예: .button--active, .card__content--dark
- 장점
- 명확한 구조와 계층 관계 표현
- 재사용성이 높은 모듈화된 CSS
- 유지보수가 용이
- 협업 시 코드 이해도 향상
SASS(SCSS) 기초 2강 CSS Logical Properties
CSS Logical Properties
CODEPEN - CSS Logical Properties
2508, SASS/SCSS 기초, CSS Logical Properties
SASS(SCSS) 기초 3강 CSS nesting(중첩 css) 사용방법
css nesting 문서
CODEPEN - CSS nesting
<!-- 폰트어썸 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" />
<!-- 테일윈드 -->
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
2508, SASS/SCSS 기초, CSS nesting(중첩 css) 사용방법
SASS(SCSS) 기초 4강 CSS nesting에서 media 쿼리 중첩
Range Media Queries
폰트어썸 - 아이콘, 모든 무료아이콘
CODEPEN - media 쿼리 중첩
2508, SASS/SCSS 기초, CSS nesting에서 media 쿼리 중첩
헤