속성과 Class 바인딩
속성, Class와 스타일을 동적으로 바인딩합니다.
속성과 Class 바인딩은(는) CoddyKit의 무료 Vue Academy 강의입니다. 이것은 3개 중 3번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Vue Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Vue Academy 강의에는 총 3개의 강의가 포함되어 있습니다.
클래스와 스타일 바인딩
상태에 따라 요소의 클래스나 스타일을 변경해야 하는 경우가 많습니다.
Vue에서는 :class와 :style에 문자열뿐 아니라 객체와 배열도 전달할 수 있도록 특별히 처리합니다.
:class 객체 문법
:class에 객체를 전달합니다. 키는 클래스 이름이고, 참으로 평가되는 값의 클래스가 포함됩니다.
<div :class="{ active: isActive, disabled: isDisabled }">
Status box
</div>
<!-- if isActive is true, the "active"
class is applied -->정적 클래스와 동적 클래스 결합
정적 class 속성과 동적 :class는 함께 병합됩니다.
<div class="card" :class="{ highlighted: isSelected }">
Always has "card";
adds "highlighted" when selected.
</div>:class 배열 문법
배열을 전달하면 여러 클래스를 적용할 수 있습니다.
<div :class="[baseClass, themeClass]">Box</div>
<!-- data:
baseClass = "panel"
themeClass = "dark" -->배열 안의 조건문
배열 안에 조건식을 섞어 사용할 수 있습니다.
<div :class="[isActive ? 'active' : '', errorClass]">
...
</div>
<!-- or nest an object inside the array -->
<div :class="[baseClass, { active: isActive }]">
...
</div>인라인 스타일 바인딩
:style 지시문은 객체를 사용해 인라인 스타일을 바인딩합니다.
fontSize와 같은 camelCase 속성 이름을 사용합니다.
<p :style="{ color: textColor, fontSize: size + 'px' }">
Styled text
</p>
<!-- data: textColor = "red", size = 18 -->:style과 배열
스타일 객체의 배열을 전달하면 Vue가 이를 병합합니다.
<div :style="[baseStyles, overrideStyles]">
Merged styles
</div>자동 접두사 추가
CSS 속성에 공급업체 접두사가 필요하면 Vue가 브라우저에서 지원되는 경우 자동으로 추가할 수 있습니다.
- 표준 속성을 작성합니다
- 필요하면 Vue가 올바른 접두사를 적용합니다
덕분에 스타일 바인딩을 깔끔하게 유지할 수 있습니다.
동적 속성 바인딩
어떤 속성이든 :attr을 사용해 동적으로 바인딩할 수 있습니다.
<img :src="photoUrl" :alt="photoCaption" />
<input :placeholder="hintText" :maxlength="limit" />
<a :href="link" :target="openInNewTab ? '_blank' : '_self'">Go</a>불리언 속성
disabled와 같은 불리언 속성은 값이 참일 때만 Vue가 포함합니다.
<button :disabled="isSubmitting">Submit</button>
<!-- if isSubmitting is false,
the disabled attribute is removed -->조건에 따라 여러 클래스 바인딩하기
여러 클래스를 한 번에 전환하는 실용적인 예제입니다.
<li
class="todo"
:class="{
done: task.completed,
overdue: task.isLate,
priority: task.urgent
}"
>
{{ task.title }}
</li>빠른 확인
클래스와 스타일 바인딩에 대한 이해도를 확인해 보세요.
복습: 속성과 클래스 바인딩
다음과 같은 동적 바인딩을 배웠습니다:
- :class 객체 문법은 참 여부에 따라 클래스를 전환합니다
- :class 배열 문법은 목록을 적용합니다
- :style은 camelCase 키를 사용해 인라인 스타일을 바인딩합니다
- 어떤 속성이든 :attr로 바인딩할 수 있습니다
- 불리언 속성은 값이 참일 때만 나타납니다
다음: component 기초와 통신입니다.
자주 묻는 질문
“속성과 Class 바인딩” 강의는 무료인가요?
네 — “속성과 Class 바인딩” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Vue Academy 강의 전체를 잠금 해제할 수 있습니다. Vue Academy 강의에는 총 3개의 강의가 포함되어 있습니다.
“속성과 Class 바인딩”에서 뭘 배우나요?
속성, Class와 스타일을 동적으로 바인딩합니다. 브라우저에서 직접 실행하는 실습 코드로 Vue Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
Vue Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 Vue Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 3개 중 3번째 강의입니다.
“속성과 Class 바인딩” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 Vue Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 Vue Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.