스타일링 전략 - 인라인, 클래스 조건부
📋 실습 안내
✏️ CODE EDITOR (JSX)
▶ 실행 버튼을 눌러 코드를 테스트하세요.
👁️ 내 미리보기
내 코드 실행 결과
🎯 완성 미리보기
목표
위 에디터 코드를 수정해서 이 결과물과 똑같이 만들어보세요!
💡 TODO 주석을 채워서 위 결과물처럼 동작하게 만들어보세요
🤖 AI 선생님에게 질문하기
이번 강의 전용
▼
선생님이 답변 중이에요...
⚠️ 학습 관련 질문만 답변합니다. 관련 없는 질문은 자동으로 학습으로 유도됩니다.
Q1. JSX에서 CSS 클래스를 적용할 때 올바른 속성명은?
💡 JSX에서는 JavaScript 예약어인 class 대신 className을 사용합니다. JSX가 JavaScript로 컴파일될 때 class 키워드와 충돌을 피하기 위함입니다.
Q2. JSX에서 인라인 스타일의 올바른 작성법은?
💡 JSX에서 인라인 스타일은 JavaScript 객체로 전달합니다. 외부 {}는 JSX 표현식, 내부 {}는 JavaScript 객체입니다. CSS 속성명은 camelCase로 작성합니다(fontSize, backgroundColor 등).
Q3. 다음 중 조건부 className을 올바르게 적용한 코드는?
💡 className에 JSX 표현식으로 삼항 연산자를 사용하면 조건에 따라 다른 클래스를 적용할 수 있습니다. class가 아닌 className을 사용해야 하고, 표현식은 중괄호로 감쌉니다.
Q4. 인라인 스타일이 CSS 클래스보다 적합한 경우는?
💡 인라인 스타일은 JavaScript 값이 직접 CSS 값으로 들어가야 할 때 적합합니다. progress 바 너비를 상태값으로 설정하거나 사용자가 지정한 색상 적용 등에 유용합니다. 미디어쿼리나 hover는 인라인으로 불가합니다.
Q5. CSS Modules의 주요 장점은?
💡 CSS Modules는 빌드 시 클래스명을 "컴포넌트명_클래스명__해시" 형태의 고유한 이름으로 변환합니다. 전역 CSS 클래스 이름 충돌 문제 없이 컴포넌트 스코프의 스타일을 작성할 수 있습니다.
😅
아쉽네요!
점수: 0점 — 70점 이상이 되어야 통과합니다.