CSS Academy · 강의

파일 구성: ITCSS 및 7-1 패턴

확장 가능한 프로젝트를 위해 Inverted Triangle 또는 7-1 패턴으로 CSS 파일을 구성합니다.

파일 구성: ITCSS 및 7-1 패턴은(는) CoddyKit의 무료 CSS Academy 강의입니다. 이것은 4개 중 3번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 CSS Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. CSS Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

CSS 파일을 정리하는 이유

프로젝트가 성장하면 하나의 CSS 파일을 관리하기 어려워집니다. 파일 구성 구조를 사용하면 팀에서 CSS를 논리적인 계층으로 나누고, 올바른 순서로 불러오며, 쉽게 탐색할 수 있습니다.

ITCSS: 역삼각형 CSS

ITCSS는 특이도가 높아지는 순서에 따라 CSS를 계층으로 구성합니다. 역삼각형처럼 가장 넓은 범위의 가장 일반적인 규칙을 위에 배치하고, 가장 구체적인 규칙을 아래에 배치합니다. 이는 자연스러운 캐스케이드를 따르는 방식입니다.

ITCSS 계층

ITCSS의 7개 계층(가장 일반적인 계층부터):

설정 — 변수와 디자인 토큰
도구 — 믹스인과 함수
일반 규칙 — 초기화/정규화
요소 — 기본 HTML 요소 스타일
객체 — 레이아웃 추상화(꾸밈 없음)
컴포넌트 — UI 컴포넌트
유틸리티 — 재정의와 도우미. 여기서는 !important를 허용합니다

ITCSS 파일 구조

일반적인 ITCSS 파일 구성:

  <pre class="file-tree">src/styles/
  01-settings/
    _colors.scss
    _typography.scss
    _spacing.scss
  02-tools/
    _mixins.scss
  03-generic/
    _reset.scss
  04-elements/
    _headings.scss
    _links.scss
  05-objects/
    _container.scss
    _media.scss
  06-components/
    _button.scss
    _card.scss
  07-utilities/
    _text-align.scss
    _display.scss</pre>

7-1 패턴

7-1 패턴은 사스를 7개의 폴더와 모든 항목을 불러오는 1개의 기본 파일로 구성합니다:

abstracts/ — 변수, 함수, 믹스인
base/ — 초기화, 타이포그래피, 기본 요소
components/ — 버튼, 카드, 모달
layout/ — 헤더, 푸터, 사이드바, 그리드
pages/ — 페이지별 스타일
themes/ — 여러 테마
vendors/ — 서드파티 CSS

기본 진입 파일

기본 main.scss는 모든 부분 파일을 순서대로 불러옵니다:

  <pre class="file-tree">@use 'abstracts/variables';
@use 'abstracts/mixins';
@use 'base/reset';
@use 'base/typography';
@use 'components/button';
@use 'components/card';
@use 'layout/header';</pre>

구성을 위한 CSS 계층(@layer)

최신 CSS의 @layer는 전처리기 없이 ITCSS와 동일한 캐스케이드 순서 지정 이점을 제공합니다. 계층은 한 번 선언되며 소스 순서와 관계없이 우선순위가 고정됩니다.

  <div class="card text-primary">Layered card text</div>

나란히 배치하기와 중앙 집중식 구성

중앙 집중식 스타일 파일의 대안으로 컴포넌트 CSS를 나란히 배치할 수 있습니다. 컴포넌트 파일 옆에 CSS 파일을 두는 방식입니다. CSS 모듈이나 자바스크립트 안에서 CSS를 작성하는 방식을 사용하는 React/Vue 프로젝트에서 흔히 볼 수 있습니다.

사스 부분 파일 이름 지정

사스 부분 파일은 밑줄로 시작합니다(_button.scss). 밑줄은 해당 파일이 독립적으로 컴파일되지 않고 기본 파일로 불러와야 한다는 것을 사스에 알립니다.

대안으로 사용하는 PostCSS

사스를 사용하지 않는다면 @import 플러그인을 적용한 PostCSS 또는 @layer와 함께 사용하는 네이티브 CSS @import로 전처리기 없이도 동일한 파일 구성을 구현할 수 있습니다.

컴포넌트 CSS 파일

ITCSS, 7-1 또는 나란히 배치된 파일을 사용하든 각 컴포넌트에는 자체 파일이 있어야 합니다. 스타일을 적용할 컴포넌트의 이름을 따서 파일 이름을 지정하십시오: _card.scss, button.css, Nav.module.css.

빠른 확인

ITCSS에서 역삼각형의 가장 위쪽(가장 넓고 특이도가 가장 낮은)에 위치하는 계층은 무엇인가요?

요약

ITCSS는 캐스케이드를 따라 CSS 계층을 일반적인 것부터 구체적인 것까지 순서대로 배치합니다. 7-1 패턴은 하나의 기본 파일에서 불러오는 7개의 폴더로 사스를 구성합니다. 최신 CSS의 @layer는 동일한 캐스케이드 제어 기능을 기본으로 제공합니다. 중앙 집중식 구성이든 나란히 배치하는 방식이든 핵심 원칙은 컴포넌트마다 파일 하나를 두고, 불러오는 순서를 일관되게 유지하는 것입니다.

자주 묻는 질문

“파일 구성: ITCSS 및 7-1 패턴” 강의는 무료인가요?

네 — “파일 구성: ITCSS 및 7-1 패턴” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 CSS Academy 강의 전체를 잠금 해제할 수 있습니다. CSS Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“파일 구성: ITCSS 및 7-1 패턴”에서 뭘 배우나요?

확장 가능한 프로젝트를 위해 Inverted Triangle 또는 7-1 패턴으로 CSS 파일을 구성합니다. 브라우저에서 직접 실행하는 실습 코드로 CSS Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

CSS Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 CSS Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 3번째 강의입니다.

“파일 구성: ITCSS 및 7-1 패턴” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 CSS Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 CSS Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← CSS Academy(으)로 돌아가기