page. [1] [2] [3] [4] [5] [6] [7] [8] [9] [10] [11] [12] [13] [14] [15]

BEM CSS 명명법

B : block

독립적으로 의미를 갖는 단위 컴포넌트
컴포넌트 : 웹 개발에서 재사용 가능한 UI 요소
ex) header, menu, button

E : element

block 내부의 구성요소
ex) button__icon, header__menu

M : modifier

blcok이나 element 의 상태나 변형된 스타일 표현
ex) button—large, card__title-big, card__content—dark

장점

명확한 구조와 계층 관계 표현
재사용성이 높은 모듈화된 CSS
유지보수가 용이
협업 시 코드 이해도 향상유지보수 좋음

CSS Logical Properties

정의

CSS Logical Properties는 웹 페이지의 **글쓰기 방향(writing mode)**과 **텍스트 흐름(directionality)**에 따라 동적으로 적용 위치가 달라지는 CSS 속성들을 말합니다.

기존의 margin-left, padding-top 같은 물리적 위치 기반 속성 대신, margin-inline-start, padding-block-end 같은 논리적 방향 속성을 사용함으로써 다국어 지원, 레이아웃 유연성, 반응형 디자인에 더 유리해집니다.

글쓰기 방향에 따라 레이아웃 속성을 자동으로 조정
다국어, 유연한 반응형 웹 개발에 적합
기존 물리적 속성보다 더 상황 인지적으로 동작

용어설명

구분	의미	예시
`inline`	텍스트가 흐르는 방향 (예: 좌→우 또는 우→좌)	`margin-inline-start`
`block`	줄이 쌓이는 방향 (예: 위→아래 또는 아래→위)	`padding-block-end`
`start/end`	시작과 끝 (언어 및 writing-mode에 따라 달라짐)	`inset-inline-end`

작동 예시

/* 좌→우(ltr) 언어 기준 */
writing-mode: horizontal-tb;
padding-inline-start: 20px;  /* → 왼쪽 padding 적용 */

/* 우→좌(rtl) 언어 기준 */
direction: rtl;
padding-inline-start: 20px;  /* → 오른쪽 padding 적용 */

CSS nesting(중첩 css) 사용방법

정의

CSS Nesting은 CSS에서 계층적 구조를 표현하기 위해 선택자들을 중첩해서 작성할 수 있도록 허용하는 문법이야.

기존에는 SCSS나 Sass에서만 가능했지만, 이제는 CSS 표준으로 일부 브라우저에서 지원되기 시작했어.

CSS Nesting은 CSS 선택자를 계층 구조로 중첩해 쓸 수 있게 하는 기능
원래 SCSS 기능이었지만, 이제 일부 CSS 표준에서도 사용 가능해짐
&를 써서 상위 선택자를 명시해줘야함

⇒ CSS Nesting은 선택자 안에 다른 선택자를 중첩해 작성할 수 있는 CSS의 최신 기능

기본 문법 (CSS Nesting 방식) 예시

.card {
  padding: 1rem;

  & .title {
    font-weight: bold;
  }

  &:hover {
    background-color: #eee;
  }
}

주의할 점

브라우저 호환성: 2025년 기준으로 일부 최신 브라우저에서만 지원됨
표준 CSS에서는 중첩할 때 반드시 선택자 또는 &를 명시해야 함

/* ❌ 이렇게는 안 됨 (불명확함) */
.container {
  .item { color: red; } 
}

/* ✅ 이렇게 해야 함 */
.container {
  & .item { color: red; }
}

SASS 개요

Sass는 세계에서 가장 성숙하고 안정적이며 강력한 전문가급 CSS 확장 언어입니다.

등장배경

css는 웹페이지의 스타일을 정의하는데 매우 유용하지만, 규모가 커지고 복잡해질수록 코드가 장황해지고 중복이 많아져 유지보수가 어려워지는 문제가 발생합니다.
SASS는 이러한 문제를 해결하기 위해 고안된 CSS 전처리기입니다.

mixin 사용법 - 매개변수

https://codepen.io/pjbfkwvv-the-animator/pen/xbGvYpd?editors=0100