728x90
반응형

Web Development/vue 50

[콜럼Vue스] 명명 라우트

명명 라우트 (Named Routes)명명 라우트는 Vue Router에서 라우트를 정의할 때 이름을 부여하는 방식으로, 라우트를 보다 쉽게 참조하거나 네비게이션할 수 있게 해줌. 라우트 이름을 사용하면 URL을 직접 입력하거나 하드코딩하는 대신, 라우트의 이름을 통해 경로를 참조할 수 있음. 명명 라우트 정의라우트를 정의할 때 name 속성을 추가하여 라우트에 이름을 부여할 수 있음.const routes = [ { path: '/user/:id', component: UserComponent, name: 'user' // 라우트 이름 정의 }]명명 라우트로 네비게이션라우트 이름을 이용해 네비게이션하려면 router.push 또는 에서 이름을 참조할 수 있음.// router.p..

[콜럼Vue스] 중첩라우트

중첩 라우트는 Vue Router에서 다중 뷰 또는 중첩된 컴포넌트 구조를 지원하는 기능을 말함.즉, 부모 라우트의 컴포넌트 안에 자식 라우트를 정의하여, 하나의 페이지에서 여러 개의 컴포넌트를 계층적으로 관리할 수 있게 해줌.중첩 라우트 설정 방법중첩 라우트를 구현하기 위해서는 부모 라우트의 component에 라우트 아울렛(router-view)을 설정하고, 자식 라우트들을 children 속성에 정의해야 함. 기본 구조const routes = [ { path: '/parent', component: ParentComponent, children: [ { path: 'child', component: ChildComponent } ]..

[콜럼Vue스] 동적라우트

동적 라우트는 URL 경로에 변수를 포함하여 여러 가지 유사한 경로를 처리할 수 있는 기능을 말함. Vue Router에서 동적 라우트는 특정 URL 패턴에 매칭되는 경로를 정의하고, 해당 경로에서 동적으로 변하는 부분을 파라미터로 받을 수 있음.동적 라우트 설정 방법동적 라우트는 경로에 콜론(:)을 붙여 정의함.예를 들어, :id라는 동적 파라미터를 사용하면 /user/1, /user/2와 같은 경로가 모두 동일한 라우트에 매칭될 수 있음.const routes = [ { path: '/user/:id', component: UserComponent }]위 코드에서 path에 있는 :id 부분이 동적 파라미터로, /user/1, /user/2 등의 URL에 매칭됨. 여기서 :id는 동적으..

[콜럼Vue스] Vue-router

vue-router는 Vue.js 에서 공식적으로 제공하는 클라이언트 측 라우팅 라이브러리임.이를 사용하면 Vue.js 애플리케이션 내에서 여러 페이지 또는 컴포넌트 간에 라우팅을 쉽게 처리할 수 있음 기본사용법라우터설정 -> 라우터 사용 -> 라우트 링크와 라우트 표시라우터설정import { createRouter, createWebHistory } from 'vue-router'import Home from '../views/Home.vue'import About from '../views/About.vue'const routes = [ { path: '/', component: Home }, { path: '/about', component: About }]const router = create..

[콜럼Vue스] <script setup>

2. TodoList.vue 3. TodoListItem.vue {{ todoItem.todo }} 삭제 4. InputTodo.vue 추가 주요 변경 사항:defineProps와 defineEmits:props와 emit을 각각 선언하고 관리할 수 있다.기존의 props 및 emits 옵션과는 다르게, 각각 defineProps() 및 defineEmits()를 사용하여 컴팩트하게 선언할 수 있다.ref와 반응형 데이터:반응형 데이터는 모두 ref()로 선언되어 관리된다.todoList, newTodo 등은 상태를 관리하는 반응형 데이터로 사용된다.자동 컴포넌트 등록:에서는 컴포넌트를 import한 후 따로 등록하지 않아도 바로..

[콜럼Vue스] 생명주기 훅(Life Cycle Hook)

참고자료 : 원쌤의 퀵 Vue.js1. Option API의 생명주기 훅export default { data() { return { message: 'Hello Vue!' } }, // 컴포넌트가 생성되기 직전에 호출됨 beforeCreate() { console.log('beforeCreate') }, // 컴포넌트가 생성된 후 호출됨 created() { console.log('created') }, // DOM에 컴포넌트가 마운트되기 직전에 호출됨 beforeMount() { console.log('beforeMount') }, // DOM에 컴포넌트가 마운트된 후 호출됨 mounted() { console.log('mounted')..

[콜럼Vue스] Watch, WatchEffect

watchwatch는 특정 데이터의 변화를 감지할 때 사용된다. 이 데이터는 ref나 reactive 객체일 수 있으며,\사용자가 지정한 감시 대상에 대한 변화를 추적한다.watch의 특징특정 데이터를 감시함.데이터의 이전 값과 변경된 값을 모두 사용할 수 있음.즉시 실행되지 않고, 데이터 변경 시에만 실행됨.watchEffectwatchEffect는 반응형 데이터에 대한 의존성을 자동으로 추적하고, 그 의존성이 변경되면 코드를 실행한다.watchEffect는 감시할 대상을 명시적으로 지정하지 않아도, 내부에서 사용된 모든 반응형 데이터를 자동으로 추적한다.watchEffect의 특징의존성 추적을 자동으로 수행함.사용된 모든 반응형 데이터가 변경되면 코드를 재실행함.즉시 실행되며, 초기 실행 시에도 코드..

[콜럼Vue스] Computed

computed 속성은 Vue에서 제공하는 강력한 기능으로,데이터나 다른 속성에 의존하는 값을 효율적으로 계산해 반환하는 반응형 속성기본적으로는 캐싱(caching)을 지원하여,의존하는 데이터가 변경되지 않으면 다시 계산하지 않고 이전에 계산된 값을 반환한다.따라서 비용이 많이 드는 연산이나 복잡한 연산을 최적화하는 데 매우 유용하다.computed 속성 기본 사용법 이름: {{ fullName }} firstName과 lastName이라는 반응형 데이터를 선언.computed 속성인 fullName은 firstName과 lastName에 의존해 그 값을 계산한다.fullName은 firstName이나 lastName이 변경될 때만 다시 계산되며, 그렇지 않으면 캐싱된 값을 반환한다.computed 속..

[콜럼Vue스] 비동기 컴포넌트 (Async Component)

Vue에서 비동기 컴포넌트(Async Component)는 컴포넌트를 동적으로 로드하여, 필요한 시점에만 렌더링하는 기법임.이 방법은 대규모 애플리케이션에서 초기 로딩 시간을 줄이고, 라우팅 또는 사용자 상호작용에 따라 필요할 때만 컴포넌트를 불러올 수 있게 해줌.비동기 컴포넌트를 사용하는 이유초기 로딩 시간 최적화앱의 모든 컴포넌트를 한 번에 로드하는 대신, 사용자가 접근하는 순간에 로드함으로써 초기 로딩 시간을 줄일 수 있음.코드 스플리팅Webpack과 같은 번들러가 **비동기 컴포넌트를 분리된 청크(chunk)**로 만들어서, 필요한 파일만 네트워크로 로드하게 만듦.사용자 경험 개선대기 시간이 길어지는 부분에서는 로딩 스피너나 에러 핸들링을 통해 사용자 경험을 개선할 수 있음.defineAsyncC..

[콜럼Vue스] 텔레포트 (Teleport)

Vue에서 Teleport는 컴포넌트의 DOM 구조를 현재 컴포넌트 트리 외부의 특정 위치로 이동시키는 기능임.이를 통해 렌더링된 요소를 HTML의 다른 부분에 배치하면서도, Vue의 반응형 데이터 및 이벤트가 유지되도록 도움.보통 모달, 툴팁, 드롭다운 같은 UI 컴포넌트를 구현할 때 유용. Teleport의 사용법기본 사용 예시 메인 컴포넌트 이 모달은 body에 렌더링됨 위 코드에서는 teleport 태그를 통해 .modal 컴포넌트가 HTML의 태그로 이동하여 렌더링됨.to 속성: 텔레포트가 렌더링될 목적지를 지정하는 필수 속성. 예를 들어, 모달과 같은 요소를 페이지 어디서든 쉽게 제어하려면 body에 텔레포트하는 것이 일반적임.Tel..

reactive와 ref 차이

Vue3에서는 reactive와 ref 를 사용해 반응형 상태 (Reactive State)를 관리함이 두 기능은 비슷하지만 사용 목적과 방식에 차이가 있음 아래에서 각 기능의 차이와 언제 사용하는 것이 좋은지 알아보겠음 1. ref란?단일 값 또는 원시 데이터 타입 (string, number, boolean 등)을 반응형으로 관리할 때 사용객체, 배열도 ref로 감쌀 수 있지만, 이 경우 내부 속성에 직접 접근하려면 .value가 필요import { ref } from 'vue'const count = ref(0) // 숫자 값을 반응형으로 관리count.value++ // ref는 .value로 접근해야 함console.log(count.value) // 1.value로 접근해야만 값에 접근할..

전체선택/해제 함수 구조 분석

const selectAll = async () => { if (tableRef.value) { if (allSelected.value) { tableRef.value.clearSelection() // 선택 해제 } else { tableRef.value.toggleAllSelection() // 전체 선택 } }} tableRef.value 확인if (tableRef.value) {이 조건문은 tableRef가 유효한 엘리먼트 참조를 가지고 있는지 확인합니다.tableRef는 컴포넌트에 대한 참조로, Element Plus의 ref를 사용하여 테이블의 인스턴스에 접근합니다.allSelected.value 확인if (allSelected.value) { tabl..

[콜럼Vue스] 컴포넌트에서의 v-model 디렉터브

v-model 디렉티브 활용법 학습v-model은 부모와 자식 컴포넌트 간의 양방향 데이터 바인딩을 쉽게 구현해주는 디렉티브임.부모 컴포넌트에서 자식 컴포넌트의 데이터를 바인딩하고, 자식 컴포넌트에서 이벤트로 값을 업데이트할 수 있음.기본적인 부모-자식 데이터 바인딩 예제 구현부모 컴포넌트에서 속성을 내려주고, 자식 컴포넌트에서 이벤트로 값을 업데이트하는 방식을 먼저 구현함. 검색어: {{ searchName }} v-model 적용으로 코드 개선기존 코드에서 이벤트와 메서드를 모두 작성해야 했지만, v-model을 사용하면 코드가 더 간결해짐.v-model을 적용하면 부모 컴포넌트가 자식 컴포넌트로 값을 전달하고, 자식 컴포넌트가 자동으로 부모 데이터를 업데이트함. ..

[콜럼Vue스] provide, inject를 이용한 공용데이터 사용

참고자료 : 원쌤의 Vue.js 퀵스타트provide와 inject는 부모-자식 컴포넌트 간의 데이터 전달을 간소화하는 기능이다. 복잡한 컴포넌트 계층 구조에서, 각 계층을 거쳐 속성을 전달할 필요 없이 상위 컴포넌트에서 제공한 데이터를 하위 컴포넌트에서 바로 사용할 수 있게 한다.  컴포넌트의 계층 구조가 복잡해지면 계층 구조를 따라 연속적으로 속성을 전달해야 하는 문제가 있음해결방법 => provide, inject를 이용 provide/inject의 원리와 사용법provide: 상위 컴포넌트에서 하위 트리에 공유할 데이터를 제공함.inject: 하위 컴포넌트에서 상위에서 제공한 데이터를 주입받아 사용함.이 패턴은 컴포넌트 간 깊은 계층 구조에서도 데이터를 쉽게 전달할 수 있도록 돕는다.

부모/자식 컴포넌트 확인하는 방법

Vue에서는 부모와 자식 관계가 컴포넌트 간의 import와 사용 방식으로 결정된다. 이 관계를 이해하려면 파일 구조와 코드에서 서로 어떤 컴포넌트가 포함하고 있는지를 확인해야 한다.  부모-자식 관계를 파악하는 방법부모 컴포넌트에서 자식 컴포넌트를 사용한 경우 찾기보통 부모 컴포넌트에서 자식 컴포넌트를 import한 다음 template에서 사용한다.만약 props와 emit이 사용된 코드라면:부모가 자식 컴포넌트에 데이터를 전달할 때 props 사용.자식이 부모에게 이벤트를 알릴 때 emit 사용.구체적인 파일 탐색 방법1. props를 사용하는 자식 컴포넌트 예시예를 들어, 자식 컴포넌트가 아래와 같이 작성된 경우 조회하기props와 emit을 사용한 이 파일(ChildComponent.vue)은..

[콜럼Vue스] 동적 컴포넌트 (Dynamic Component)

동적 컴포넌트는 동일한 위치에 여러 컴포넌트를 표현해야 할 때 유용함동적 컴포넌트는 태그를 이용해, is 속성에 어떤 컴포넌트를 렌더링할지 동적으로 결정할 수 있음탭 인터페이스와 같이 화면 전환이 필요한 UI를 구현할 때 자주 사용동적 컴포넌트의 기본 사용법예제 - 동적 탭 화면 구현1. 탭에 해당하는 컴포넌트 생성 산호해 해전에 대해 동일한 방식으로 LeyteGulfTab.vue와 MidwayTab.vue 컴포넌트를 작성하되, 헤더 내용만 다르게 변경2. App.vue에서 동적 컴포넌트 사용 태평양 전쟁의 해전 {{ tab.label }} 동적 컴..

[콜럼Vue스] 슬롯 (Slots)

Vue.js에서 슬롯은 부모 컴포넌트가 자식 컴포넌트 내부의 특정 위치에 콘텐츠를 동적으로 전달할 수 있도록 도와주는 메커니즘임.이 기능을 활용하면 컴포넌트의 재사용성이 극대화되고 더 유연한 설계가 가능해짐슬롯 사용 전의 컴포넌트슬롯을 사용하지 않는 컴포넌트는 자식 컴포넌트의 구조와 콘텐츠가 고정되어, 재사용에 한계가 생김 {{ label }} 슬롯의 기본 사용법기본 슬롯을 사용하면 부모 컴포는트가 동적으로 컨텐츠를 전달할 수 있음자식 컴포넌트는 태그로 부모가 전달한 콘텐츠를 표시예제 - 기본 슬롯 사용 기본 아이템 부모 컴포넌트에서의 사용 예시 {{ item.label }} 명명된 슬롯 (Named Slots)명명된 슬..

[콜럼Vue스] 단일 컴포넌트에서의 스타일 관리

Vue.js 에서는 컴포넌트별로 CSS 스타일을 독립적으로 관리할 수 있음이로 인해 유지보수가 용이해지고, 스타일 간의 충돌을 방지할 수 있음특히, 범위 CSS (Scoped CSS)와 CSS 모듈을 사용하면 보다 구조적이고 명확적인 스타일링이 가능함범위 CSS (Scoped CSS)Scoped CSS는 특정 컴포넌트 내부에서만 스타일이 적용되도록 하는 기능임이를 통해 다른 컴포넌트와의 스타일 충돌을 방지하고, 컴포넌트별로 독립적인 스타일을 제공할 수 있음 scoped 키워드의 역할- 를 선언하면 컴포넌트의 HTML 요소에 자동으로 데이터 속성 (data attribute)가 추가- 스타일 정의 역시 해당 데이터 속성을 기반으로 범위 내에서만 적용 CSS 모듈 (CSS Modules)CSS 모듈은 CSS..

Composition API

1. Composition API란?Composition API는 Vue 3에서 도입된 새로운 코드 작성 패턴으로, 기능별로 코드 재사용과 모듈화를 쉽게 할 수 있도록 설계되었음. 기존의 Option API와 달리 setup() 함수 내에서 모든 로직을 정의하며, 여러 상태와 메서드를 하나로 묶어 유연하게 관리할 수 있음. 2. Composition API의 주요 특징유연성: 여러 기능을 setup() 안에 함께 정의할 수 있어 복잡한 상태 관리에 유리함.모듈화: 외부 함수나 파일로 쉽게 분리해 코드 재사용성을 극대화할 수 있음.타입스크립트 친화적: 타입스크립트를 더 잘 지원하여 정적 타입 검사와의 호환성이 좋음.Vue 3 전용: Composition API는 Vue 3에서만 사용 가능함.3. Compo..

Composition API vs Option API

Vue.js에서는 Option API가 오랫동안 기본 사용 방식이었지만, Vue 3에서는 Composition API가 도입되며 새로운 방식의 코드 구조화가 가능해짐. 두 접근 방식은 각각의 장단점이 있으며, 상황에 따라 적합한 방식을 선택하는 것이 중요함. 이 글에서는 Option API와 Composition API의 차이점과 사용 시기, 장단점을 정리함.1. Option APIOption API는 Vue 2부터 사용된 전통적인 방식으로, data, methods, computed 등의 옵션을 사용해 컴포넌트를 구성함. 코드가 명확히 구분되어 있어 초보자에게 이해하기 쉬움. 카운트: {{ count }} 증가 특징:초보자 친화적: 코드가 data, methods, computed 등으..

[콜럼Vue스] 이벤트 에미터(Event Emitter)

1. 이벤트 에미터(Event Emitter)란?Vue에서 이벤트 에미터는 자식 컴포넌트에서 부모 컴포넌트로 데이터를 전달하기 위해 사용하는 메커니즘임.자식 컴포넌트가 특정 이벤트를 발생($emit)시키고, 부모 컴포넌트는 해당 이벤트를 수신(v-on 혹은 @)하여 처리하는 방식임.이벤트 에미터는 주로 사용자 입력, 폼 제출, 상태 변경과 같은 이벤트를 부모 컴포넌트에 전달할 때 사용됨. 2. 기본적인 이벤트 에미터 사용 예제// 부모 컴포넌트 (Parent.vue) 카운트: {{ count }} // 자식 컴포넌트 (ChildComponent.vue) 증가설명:자식 컴포넌트에서 $emit('increment', 1)으로 이벤트와 데이터를 부모로 전달.부모 컴포넌트는 @incremen..

[콜럼Vue스] 사용자 정의 이벤트

1. 사용자 정의 이벤트란?Vue에서는 사용자 정의 이벤트(Custom Events)를 통해 자식 컴포넌트가 부모 컴포넌트에 데이터를 전달할 수 있음.이 방식은 Vue의 단방향 데이터 흐름(부모→자식)을 보완하여 상위 컴포넌트로 이벤트를 전달함으로써,양방향 데이터 소통을 가능하게 만듦.자식 컴포넌트에서 이벤트를 발생시키고($emit), 부모 컴포넌트는 해당 이벤트를 수신(v-on)하여 처리함. 2. 사용자 정의 이벤트를 이용한 정보 전달사용자 정의 이벤트를 통해 자식에서 부모로 데이터 전달이 가능함.주로 양방향 바인딩이나 특정 작업을 부모 컴포넌트에 알릴 때 유용하게 사용됨.// 부모 컴포넌트 (Parent.vue) // 자식 컴포넌트 (ChildComponent.vue) 제출 자식 컴포넌..

[콜럼Vue스] 속성

1. 속성을 이용한 정보 전달Vue에서는 속성(Props)을 통해 부모 컴포넌트가 자식 컴포넌트에 데이터를 전달할 수 있음. 이 방식은 상위에서 하위로의 단방향 데이터 흐름을 의미하며, 컴포넌트 간의 재사용성을 높임.속성 전달 기본 예제 :// 부모 컴포넌트 (Parent.vue) // 자식 컴포넌트 (ChildComponent.vue) {{ msg }}부모 컴포넌트가 자식 컴포넌트에 msg 속성으로 데이터를 전달함.자식 컴포넌트는 props를 사용해 부모로부터 전달된 데이터를 수신함.2. 속성을 이용해 객체 전달하기Vue에서는 객체를 속성으로 전달할 수 있음. 객체를 통해 더 복잡한 데이터를 전달할 수 있으며, 자식 컴포넌트에서 이 데이터를 참조하여 UI를 구성할 수 있음.객체 전달 예제:// 부모..

[콜럼Vue스] 속성

1. 속성을 이용한 정보 전달Vue에서는 속성(Props)을 통해 부모 컴포넌트가 자식 컴포넌트에 데이터를 전달할 수 있음. 이 방식은 상위에서 하위로의 단방향 데이터 흐름을 의미하며, 컴포넌트 간의 재사용성을 높임.속성 전달 기본 예제 :// 부모 컴포넌트 (Parent.vue) // 자식 컴포넌트 (ChildComponent.vue) {{ msg }}부모 컴포넌트가 자식 컴포넌트에 msg 속성으로 데이터를 전달함.자식 컴포넌트는 props를 사용해 부모로부터 전달된 데이터를 수신함.2. 속성을 이용해 객체 전달하기Vue에서는 객체를 속성으로 전달할 수 있음. 객체를 통해 더 복잡한 데이터를 전달할 수 있으며, 자식 컴포넌트에서 이 데이터를 참조하여 UI를 구성할 수 있음.객체 전달 예제:// 부모..

[콜럼Vue스] Vue CLI와 프로젝트 구조: 컴포넌트 기반

1. Vue CLI 도구Vue CLI는 Vue.js 프로젝트를 빠르고 쉽게 시작할 수 있도록 도와주는 강력한 도구임. CLI는 “Command Line Interface”의 약자로, 터미널 명령어를 통해 프로젝트 생성부터 설정까지 관리할 수 있게 해줌.npm install -g @vue/clivue create my-project설치 과정에서 Babel, TypeScript, Vue Router, Vuex, Linting, CSS Pre-processors 등 다양한 옵션을 선택할 수 있어서 프로젝트에 필요한 도구들을 빠르게 설정할 수 있음.Vue CLI의 장점:복잡한 설정 없이 바로 사용할 수 있음.다양한 플러그인과 설정을 지원해 유연한 개발 환경 제공.Webpack과 Vite 등 빌드 도구와도 호환 ..

[콜럼Vue스] To do list 만들기 (+리팩토링 추가)

자료 : 원쌤의 vue.js 퀵스타트 이 예제는 Vue.js를 사용하여 간단한 할 일 목록(TodoList) 앱을 만드는 방법을 설명함. 사용자는 할 일을 입력하고, 추가, 완료, 삭제할 수 있으며, 각각의 할 일에 대해 완료 상태에 따른 스타일을 동적으로 적용할 수 있음. 또한, 이 예제에서는 Bootstrap 라이브러리를 사용하여 기본적인 UI 스타일을 제공함.1. 화면 시안 작성먼저, 기본적인 HTML 구조를 작성하고 Bootstrap CSS를 불러옴. 이 예제에서는 할 일 목록을 관리할 수 있는 기본 UI와 할 일 입력란을 작성함. :: Todolist App 2. 데이터 및 메서드 정의이제 할 일 목록 데이터를..

[콜럼Vue스] 동적 스타일 바인딩

동적 스타일 바인딩이란 Vue.js에서 데이터 상태에 따라 HTML 요소에 동적으로 CSS 스타일을 적용하는 방법임. 동적 스타일 바인딩을 사용하면 사용자 입력, 이벤트 발생 등에 따라 실시간으로 스타일을 변경할 수 있음. Vue.js에서는 v-bind:style 또는 :style 디렉티브를 사용해 인라인 스타일을 바인딩할 수 있음 1부터 100까지만 입력 가능합니다. 점수: 코드 설명HTML 구조:점수를 입력할 수 있는 요소가 있음. 이 요소에는 기본적으로 score 클래스가 적용됨.점수가 1부터 100 사이가 아니면 경고 이미지와 함께 경고 스타일이 적용됨.Vue.js 인스턴스:data(): 기본 점수(score) 값을 관리함. 초기 값은 50으..

[콜럼Vue스] CSS 클래스 바인딩

Vue.js에서 CSS 클래스를 바인딩하는 방법은 두 가지가 있음:CSS 클래스명 문자열을 바인딩하는 방법true/false 값을 가진 객체를 바인딩하는 방법CSS 클래스명 문자열을 바인딩하는 방법이 방법은 데이터나 속성에 CSS 클래스명을 문자열로 할당하여 v-bind:class 혹은 **:class**로 바인딩하는 방식임. 데이터에서 CSS 클래스명을 문자열로 설정한 후, 이를 요소에 바인딩할 수 있음. 테스트 버튼  이 방식에서 클래스명 문자열을 배열로 바인딩하여 여러 클래스를 동시에 적용할 수 있음.3항 연산자를 이용해 특정 조건에 따라 클래스를 동적으로 적용할 수도 있음. 레이아웃 적용 여부테스트 버튼 isMyLayout의 값에 따라 myLayout 클래스의 적용 여부가 결..

[콜럼Vue스] 인라인스타일

1. 인라인 스타일이란?HTML 요소에 직접적으로 style 속성을 사용하여 CSS를 적용하는 방식임.인라인 스타일은 Vue.js에서도 지원되며, 보통 v-bind:style로 데이터 속성을 바인딩해 스타일을 적용할 수 있음.스타일 속성은 케밥 표기법(예: background-color)을 사용하지만, Vue 인스턴스에서는 카멜 표기법(예: backgroundColor)으로 표기해야 함.2. 인라인 스타일 사용 예시예시 코드에서는 버튼에 마우스를 올렸을 때(mouseover), 인라인 스타일을 통해 배경 색상과 텍스트 색상이 바뀌도록 설정.마우스를 버튼에서 뗄 때(mouseout) 다시 원래 색상으로 돌아가도록 정의.methods: { overEvent() { this.style1.backgr..

[콜럼Vue스] HTML 스타일 적용 우선순위

HTML 요소의 스타일 적용 우선순위HTML 요소에 스타일을 적용할 때, 인라인 스타일과 CSS 클래스로 정의된 스타일의 적용 우선순위가 중요함.인라인 스타일은 style 속성을 이용하여 요소에 직접 지정된 스타일로, 우선순위가 가장 높음.CSS 클래스는 라인 스타일로 background-color: orange;가 적용됨.클래스 .test와 .over가 적용되며, 각각 배경 색상, 테두리, 너비, 높이와 같은 속성을 정의함.적용 우선순위 설명:스타일 적용 우선순위는 인라인 스타일 > 클래스 .over > 클래스 .test 순으로 결정됨.따라서, 이 경우 배경 색상 background-color가 인라인 스타일에서 지정된 orange로 적용됨.스타일 충돌 시 우선순위:같은 속성에 대해 여러 스타일이 선언..

728x90
반응형