초급자가 이해하기 쉬운 예제 중심 설명

조건문을 일상 생활로 이해하기

조건문을 일상 생활의 예시로 먼저 이해해봅니다.
코드 문법보다 익숙한 상황에서 개념을 먼저 잡으면, 이후 SCSS 예제를 읽을 때도 각 분기가 어떤 상황을 표현하는지 훨씬 쉽게 연결할 수 있습니다.

일상 생활 예시

일상 생활에서도 조건문을 사용합니다:

상황
조건문 표현
SCSS 코드

날씨에 따른 옷 입기

만약 비가 오면 우산을 가져가고, 그렇지 않으면 가져가지 않는다

@if $weather == 'rain' { 우산 } @else { 없음 }
점수에 따른 등급

만약 점수가 90점 이상이면 A, 80점 이상이면 B, 그렇지 않으면 C

@if $score >= 90 { A } @else if $score >= 80 { B } @else { C }
시간에 따른 인사

만약 오전이면 "좋은 아침", 오후면 "좋은 오후", 저녁이면 "좋은 저녁"

@if $time == 'morning' { 아침 } @else if $time == 'afternoon' { 오후 } @else { 저녁 }

SCSS 조건문으로 변환

일상 생활의 조건문을 SCSS 코드로 변환해봅니다.

날씨 예시를 조건문으로 변환

								// 일상: 만약 비가 오면 우산을 가져간다
								$weather: 'rain';

								@if $weather == 'rain' {
								  .umbrella {
								    display: block;  // 우산 표시
								  }
								} @else {
								  .umbrella {
								    display: none;  // 우산 숨김
								  }
								}

점수 예시를 조건문으로 변환

								// 일상: 점수에 따른 등급
								$score: 85;

								@if $score >= 90 {
								  .grade {
								    color: #28a745;  // A 등급 (초록색)
								  }
								} @else if $score >= 80 {
								  .grade {
								    color: #0a58ca;  // B 등급 (파란색)
								  }
								} @else {
								  .grade {
								    color: #dc3545;  // C 등급 (빨간색)
								  }
								}

시간 인사 예시를 조건문으로 변환

								// 일상: 시간에 따른 인사
								$time: 'afternoon';

								@if $time == 'morning' {
								  .greeting {
								    content: "좋은 아침입니다";
								    color: #ffc107;  // 아침 (노란색)
								  }
								} @else if $time == 'afternoon' {
								  .greeting {
								    content: "좋은 오후입니다";
								    color: #0a58ca;  // 오후 (파란색)
								  }
								} @else {
								  .greeting {
								    content: "좋은 저녁입니다";
								    color: #6c757d;  // 저녁 (회색)
								  }
								}

반복문을 일상 생활로 이해하기

반복문도 일상 생활의 예시로 먼저 이해해봅니다.
숫자 세기, 장바구니 물건 계산처럼 반복 구조를 떠올려 보면, SCSS에서 @for, @each가 실제로 무엇을 자동화하는지 직관적으로 이해할 수 있습니다.

일상 생활 예시

일상 생활에서도 반복문을 사용합니다:

상황
반복문 표현
SCSS 코드

1부터 10까지 숫자 세기

1, 2, 3, 4, 5, 6, 7, 8, 9, 10을 하나씩 말한다

@for $i from 1 through 10 { $i }
장바구니 물건 계산

장바구니의 각 물건을 하나씩 꺼내서 가격을 더한다

@each $item in $cart { 처리 }
학생 명단 불러오기

명단의 각 학생 이름을 하나씩 불러본다

@each $name in $students { $name }

SCSS 반복문으로 변환

일상 생활의 반복문을 SCSS 코드로 변환해봅니다.

숫자 세기 예시를 반복문으로 변환

								// 일상: 1부터 5까지 숫자를 하나씩 말한다
								@for $i from 1 through 5 {
								  .number-#{$i} {
								    // $i는 1, 2, 3, 4, 5로 증가
								    content: "#{$i}번째";
								  }
								}

장바구니 예시를 반복문으로 변환

								// 일상: 장바구니의 각 물건을 하나씩 처리
								$cart: apple, banana, orange;

								@each $item in $cart {
								  .item-#{$item} {
								    // $item은 apple, banana, orange를 하나씩 가져옴
								    display: block;
								  }
								}

학생 명단 예시를 반복문으로 변환

								// 일상: 명단의 각 학생 이름을 하나씩 불러온다
								$students: kim, lee, park, choi;

								@each $name in $students {
								  .student-#{$name} {
								    // $name은 kim, lee, park, choi를 하나씩 가져옴
								    display: list-item;
								  }
								}

단계별 학습 예제

초급자를 위한 단계별 학습 예제를 제공합니다.
문제 상황 → 단계별 해결 → 컴파일 결과 순서로 따라가며 연습하면, 조건문과 반복문이 실제 프로젝트에서 어떻게 쓰이는지 손에 익히는 데 도움이 됩니다.

예제 1: 간단한 조건문 (버튼 색상)

문제 상황

버튼 타입에 따라 다른 색상을 적용하고 싶습니다.

단계 1: 변수 정의

									$button-type: 'primary';

단계 2: 조건문 작성

									$button-type: 'primary';

									@if $button-type == 'primary' {
									  .button {
									    background: #0a58ca;
									  }
									} @else {
									  .button {
									    background: #6c757d;
									  }
									}

단계 3: 결과 확인

									.button {
									  background: #0a58ca;
									}
									/* $button-type이 'primary'이므로 첫 번째 조건 실행 */

예제 2: 간단한 반복문 (마진 클래스)

문제 상황

마진 탑 클래스를 5개 만들고 싶습니다 (.mt-1, .mt-2, .mt-3, .mt-4, .mt-5).

단계 1: 반복문 구조 작성

									@for $i from 1 through 5 {
									  // 여기에 클래스를 만들 코드 작성
									}

단계 2: 클래스 이름 작성

									@for $i from 1 through 5 {
									  .mt-#{$i} {
									    // 마진 값 작성
									  }
									}

단계 3: 마진 값 계산

									@for $i from 1 through 5 {
									  .mt-#{$i} {
									    margin-top: #{$i * 8}px;
									  }
									}

단계 4: 결과 확인

									.mt-1 { margin-top: 8px; }
									.mt-2 { margin-top: 16px; }
									.mt-3 { margin-top: 24px; }
									.mt-4 { margin-top: 32px; }
									.mt-5 { margin-top: 40px; }
									/* 5개 클래스가 자동으로 생성됨 */

실전 예제: 버튼 시스템 만들기

조건문과 반복문을 함께 사용하여 실제로 사용할 수 있는 버튼 시스템을 만들어봅니다.

목표

다음과 같은 버튼 클래스를 자동으로 생성하고 싶습니다:

.btn-primary, .btn-secondary, .btn-success, .btn-danger
각 버튼은 다른 배경색을 가짐
호버 시 색상이 어두워짐

단계별 구현

1단계: 색상 맵 정의

									$button-colors: (
									  primary: #0a58ca,
									  secondary: #6c757d,
									  success: #28a745,
									  danger: #dc3545
									);

2단계: @each로 순회

									$button-colors: (
									  primary: #0a58ca,
									  secondary: #6c757d,
									  success: #28a745,
									  danger: #dc3545
									);

									@each $name, $color in $button-colors {
									  // 여기에 버튼 스타일 작성
									}

3단계: 버튼 스타일 작성

									@each $name, $color in $button-colors {
									  .btn-#{$name} {
									    background: $color;
									    color: #ffffff;
									    padding: 8px 16px;
									    border-radius: 4px;

									    &:hover {
									      background: darken($color, 10%);
									    }
									  }
									}

4단계: 완성된 코드

									$button-colors: (
									  primary: #0a58ca,
									  secondary: #6c757d,
									  success: #28a745,
									  danger: #dc3545
									);

									@each $name, $color in $button-colors {
									  .btn-#{$name} {
									    background: $color;
									    color: #ffffff;
									    padding: 8px 16px;
									    border-radius: 4px;

									    &:hover {
									      background: darken($color, 10%);
									    }
									  }
									}

5단계: 결과 확인

									.btn-primary {
									  background: #0a58ca;
									  color: #ffffff;
									  padding: 8px 16px;
									  border-radius: 4px;
									}

									.btn-primary:hover {
									  background: #084298;
									}

									.btn-secondary {
									  background: #6c757d;
									  color: #ffffff;
									  padding: 8px 16px;
									  border-radius: 4px;
									}

									.btn-secondary:hover {
									  background: #545b62;
									}
									... (나머지 버튼 생략) ...

자주 하는 실수와 해결 방법

초급자가 자주 하는 실수와 해결 방법을 정리합니다.

실수 1: 인터폴레이션 빼먹기

선택자 이름에 변수를 사용할 때 인터폴레이션을 빼먹는 실수입니다.

❌ 잘못된 예시

									@for $i from 1 through 5 {
										.item-$i {  // 에러! 인터폴레이션 없음
											margin: $i * 8px;
										}
									}

✅ 올바른 예시

									@for $i from 1 through 5 {
										.item-#{$i} {  // 올바름! 인터폴레이션 사용
											margin: $i * 8px;
										}
									}

실수 2: through와 to 혼동

through와 to의 차이를 모르고 잘못 사용하는 실수입니다.

								// through: 끝 숫자 포함 (5번 반복)
								@for $i from 1 through 5 {
								  // $i는 1, 2, 3, 4, 5
								}

								// to: 끝 숫자 제외 (4번 반복)
								@for $i from 1 to 5 {
								  // $i는 1, 2, 3, 4 (5는 제외)
								}

일반적으로 through를 더 많이 사용합니다.

실수 3: 맵 순회 시 변수 순서

맵을 순회할 때 변수 순서를 잘못 쓰는 실수입니다.

								$colors: (
								  primary: #0a58ca,
								  secondary: #6c757d
								);

								// ❌ 잘못된 순서: 값, 키 (에러 발생)
								@each $color, $name in $colors {
								  // 순서가 바뀌면 값이 잘못됨
								}

								// ✅ 올바른 순서: 키, 값
								@each $name, $color in $colors {
								  // $name은 키, $color는 값
								}

실수 4: 조건문에서 = 와 == 혼동

조건문에서 비교 연산자를 잘못 사용하는 실수입니다.

								$type: 'primary';

								// ✅ 올바른 사용
								@if $type == 'primary' {
									// == (비교 연산자): $type이 'primary'와 같은지 비교할 때 사용
								  color: blue;
								}

								// ❌ 잘못된 사용
								@if $type = 'primary' {
								  // 에러 발생!
								  // = 는 할당 연산자이므로 조건문에서 사용할 수 없음
								  // SCSS 컴파일러가 "조건문에서 변수에 값을 할당할 수 없다"고 에러를 발생시킴
								}

=는 할당 연산자로 변수에 값을 저장할 때 사용하고,
==는 비교 연산자로 두 값을 비교할 때 사용합니다.
조건문에서는 값을 비교해야 하므로 반드시 ==를 사용해야 합니다.

학습 체크리스트

조건문과 반복문을 제대로 이해했는지 확인하는 체크리스트입니다.

조건문 체크리스트

다음 항목을 모두 이해했는지 확인하세요:

@if 기본 문법: @if 조건 { } 형태로 작성할 수 있는가?
@else 사용: @else로 거짓일 때의 코드를 작성할 수 있는가?
@else if 사용: 여러 조건을 @else if로 확인할 수 있는가?
비교 연산자: ==, !=, >, < 등을 사용할 수 있는가?
논리 연산자: and, or, not을 사용할 수 있는가?
믹스인과 함께 사용: 믹스인 안에서 조건문을 사용할 수 있는가?

반복문 체크리스트

다음 항목을 모두 이해했는지 확인하세요:

@for 기본 문법: @for $i from 1 through 5 형태로 작성할 수 있는가?
through vs to: through와 to의 차이를 이해하는가?
인터폴레이션: 선택자 이름에 변수 사용 시 #{}를 사용할 수 있는가?
@each 기본 문법: @each $item in $list 형태로 작성할 수 있는가?
맵 순회: @each $key, $value in $map 형태로 맵을 순회할 수 있는가?
클래스 자동 생성: 반복문으로 유틸리티 클래스를 생성할 수 있는가?

추가 학습 자료

더 깊이 학습하기 위한 추가 예제를 제공합니다.

연습 문제 1: 간격 유틸리티 만들기

다음 요구사항에 맞는 간격 유틸리티를 만들어보세요:

.mt-1부터 .mt-10까지 마진 탑 클래스 생성
각 클래스는 8px의 배수로 마진 값 설정 (예: .mt-1 = 8px, .mt-2 = 16px)

								@for $i from 1 through 10 {
								  .mt-#{$i} {
								    margin-top: #{$i * 8}px;
								  }
								}

연습 문제 2: 색상 유틸리티 만들기

다음 요구사항에 맞는 색상 유틸리티를 만들어보세요:

primary, secondary, success 색상에 대해 배경색 클래스 생성
각 클래스는 .bg-primary, .bg-secondary, .bg-success 형태

								$colors: (
								  primary: #0a58ca,
								  secondary: #6c757d,
								  success: #28a745
								);

								@each $name, $color in $colors {
								  .bg-#{$name} {
								    background-color: $color;
								  }
								}

정리

초급자가 이해하기 쉬운 예제 중심 설명에 대해 알아본 내용을 정리합니다.

일상 생활 비유: 조건문과 반복문을 일상 생활 예시로 이해
단계별 학습: 간단한 예제부터 시작하여 점진적으로 복잡한 예제로
실전 예제: 버튼 시스템 만들기 등 실제로 사용할 수 있는 예제
자주 하는 실수: 인터폴레이션 빼먹기, through/to 혼동, 변수 순서 등
학습 체크리스트: 조건문과 반복문을 제대로 이해했는지 확인
추가 학습 자료: 연습 문제를 통해 실력 향상

이제 조건문과 반복문의 기초를 모두 배웠습니다. 다음 섹션에서는 파일 분리와 SCSS 구조 설계에 대해 자세히 알아봅니다.