October 2024
Beginner to intermediate
452 pages
9h 28m
Korean
Content preview from 실전 코드로 배우는 Vue.js
Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
O’Reilly covers everything we've got, with content to help us build a world-class technology community, upgrade the capabilities and competencies of our teams, and improve overall team performance as well as their engagement.I wanted to learn C and C++, but it didn't click for me until I picked up an O'Reilly book. When I went on the O’Reilly platform, I was astonished to find all the books there, plus live events and sandboxes so you could play around with the technology.I’ve been on the O’Reilly platform for more than eight years. I use a couple of learning platforms, but I'm on O'Reilly more than anybody else. When you're there, you start learning. I'm never disappointed.I'm always learning. So when I got on to O'Reilly, I was like a kid in a candy store. There are playlists. There are answers. There's on-demand training. It's worth its weight in gold, in terms of what it allows me to do.
154
실전 코드로 배우는 Vue.js
3.123.12
CSSCSS
모듈과 컴포넌트 스타일 모듈과 컴포넌트 스타일
컴포넌트 단위로
CSS
스타일의 범위를 지정하는 또 하나의 수단은
CSS
모듈
3
이다.
CSS
모
듈은 평범하게 작성한
CSS
스타일을
template
및
script
섹션에서 자바스크립트 객체(
모
듈
) 형태로 소비
consume
할 수 있도록 해준다.
Vue
SFC
컴포넌트에서
CSS
모듈을 사용하려면 [예제
3
-
36
]처럼
HeadingComponent
의
style
태그에
module
속성을 추가해야 한다.
예제
3-36
HeadingComponent
의
CSS
모듈 설정
<!-- HeadingComponent.vue -->
<style module>
.heading {
color: #178c0e;
font-size: 2em;
}
.description {
color: #b76210;
font-size: 1em;
}
</style>
이제 컴포넌트의
$
style
프로퍼티 객체 필드를 통해
CSS
선택자에 접근할 수 있다. 기존
template
섹션의
h1
과
p
는
heading
과
description
라는 정적 클래스가 지정되어 있다.
이들을 제거하고 [예제
3
-
37
]처럼 엘리먼트의 클래스를
$
style
객체 필드로 바인딩한다.
예제
3-37
$
style ...
Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.
Read now
Unlock full access
More than 5,000 organizations count on O’Reilly
O’Reilly covers everything we've got, with content to help us build a world-class technology community, upgrade the capabilities and competencies of our teams, and improve overall team performance as well as their engagement.Julian F.
I wanted to learn C and C++, but it didn't click for me until I picked up an O'Reilly book. When I went on the O’Reilly platform, I was astonished to find all the books there, plus live events and sandboxes so you could play around with the technology.Addison B.
I’ve been on the O’Reilly platform for more than eight years. I use a couple of learning platforms, but I'm on O'Reilly more than anybody else. When you're there, you start learning. I'm never disappointed.Amir M.
I'm always learning. So when I got on to O'Reilly, I was like a kid in a candy store. There are playlists. There are answers. There's on-demand training. It's worth its weight in gold, in terms of what it allows me to do.