믹스인 및 포함
@mixin으로 재사용 가능한 스타일 블록을 만들고 @include로 어디서든 포함합니다.
믹스인 및 포함은(는) CoddyKit의 무료 CSS Academy 강의입니다. 이것은 4개 중 2번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 CSS Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. CSS Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
믹스인이란 무엇입니까
사스의 믹스인은 재사용 가능한 CSS 선언 블록입니다. 일반 클래스와 달리 매개변수를 받을 수 있으므로 복사해 붙여넣는 방식보다 유연합니다. @mixin으로 정의하고 @include로 사용합니다.
기본 믹스인
매개변수가 없는 믹스인은 재사용 가능한 블록일 뿐입니다:
<div class="hero">Centered hero content</div>
인수를 사용하는 믹스인
믹스인에 값을 전달하여 출력을 사용자 지정하십시오:
<button class="btn-primary">Primary</button>
<button class="btn-danger">Danger</button>
기본 인수
믹스인 인수에 기본값을 설정하여 선택 사항으로 만들 수 있습니다:
<div class="card">Card with default shadow</div>
<div class="modal">Modal with custom shadow</div>
이름 지정 인수
명확하게 작성하려면 이름으로 믹스인 인수를 전달하십시오:
<div class="tooltip">Tooltip</div>
@content — 블록을 사용하는 믹스인
믹스인은 @content를 사용하여 콘텐츠 블록을 받을 수 있습니다. 호출 시 전달한 블록은 @content가 나타나는 위치에 삽입됩니다:
<a href="#" class="link">Hover or focus this link</a>
<a href="#" class="link-demo">Same link, hover state shown statically</a>
반응형 믹스인
미디어 쿼리에 사용하는 일반적인 믹스인입니다:
<div class="sidebar">Sidebar (280px wide on desktop ≥ 1024px)</div>
타이포그래피 믹스인
일관된 글꼴 크기 체계를 위한 텍스트 스타일 믹스인입니다:
<h2 class="heading">Heading text style</h2>
<p class="body">Body text style</p>
믹스인과 함수 비교
믹스인은 CSS 선언을 출력하고 함수는 값을 반환합니다. 여러 CSS 규칙을 출력하려면 믹스인을 사용하고, 계산된 단일 값이 필요하면 함수를 사용하십시오.
믹스인 과도한 사용 피하기
믹스인을 너무 많이 사용하면 디버깅하기 어려운 추상화 계층이 생깁니다. 패턴이 3회 이상 재사용될 때만 믹스인을 만드십시오. 일회성 스타일에는 CSS를 직접 작성하십시오.
빠른 확인
사스 믹스인 정의 안에서 @content는 어떤 역할을 합니까?
복습
@mixin으로 믹스인을 정의하고 @include로 사용합니다. 믹스인은 선택적인 기본값과 함께 매개변수를 받을 수 있습니다. @content를 사용하면 호출자가 CSS 블록을 믹스인에 삽입할 수 있으므로 미디어 쿼리 도우미와 같은 래퍼 패턴을 구현할 수 있습니다. 추상화 비용을 피하려면 여러 번 재사용되는 패턴에만 믹스인을 만드십시오.
자주 묻는 질문
“믹스인 및 포함” 강의는 무료인가요?
네 — “믹스인 및 포함” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 CSS Academy 강의 전체를 잠금 해제할 수 있습니다. CSS Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“믹스인 및 포함”에서 뭘 배우나요?
@mixin으로 재사용 가능한 스타일 블록을 만들고 @include로 어디서든 포함합니다. 브라우저에서 직접 실행하는 실습 코드로 CSS Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
CSS Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 CSS Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 2번째 강의입니다.
“믹스인 및 포함” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 CSS Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 CSS Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.