전체 글87 Vue deep 선택자 (deep selector) Deep Selector in Vue scoped vue에서 를 주면 해당 컴포넌트 안에서만 스타일 속성이 주어진다. ... .btn[data-v-e1123455]:hover { } 이런 방식으로 특정 vue 컴포넌트의 특정 요소에 지정되어 다른 컴포넌트에는 영향을 끼치지 않는다. scoped를 붙이지 않으면 글로벌하게 적용된다. deep 는 하위 컴포넌트에까지 영향을 끼치진 않는다. 만약 한 컴포넌트에 포함된 하위 컴포넌트까지 스타일을 적용하고 싶다면, deep selector를 사용해야 한다. // Vue2 /deep/ {} // deprecated ::v-deep // Sass >>> // without Sass // Vue3 /deep/ {} // deprecated >>> // deprecate.. 2022. 6. 13. vue의 문법 (v-directive, Vue 인스턴스 생성, watch, data 등) vue의 문법 Vue 인스턴스 Vue 공식 가이드의 인스턴스 부분은 이렇게 시작한다. 모든 Vue 앱은 Vue함수로 새 Vue 인스턴스를 만드는 것부터 시작합니다. Vue로 개발하려면 이런 인스턴스를 만드는 것부터 시작해야 한다. var vm = new Vue({ //옵션 }) new Vue({ el: "#print", data: { text: 'hello Vue!' }, }) 옵션 el 인스턴스 생성시 el 옵션을 사용할 수 있다. 위의 인스턴스 생성에서도 대략 알 수 있듯, el이라 함은 Vue가 실행할 HTML의 DOM요소를 지정하는 것이다. el을 지정할 때는 CSS의 선택자처럼 사용하면 된다. el : { #selector } data Vue의 data객체. data : { name : 'yeo.. 2022. 6. 13. localhost 상태에서 svg가 작동하지 않을 때 (JSP) localhost 상태에서 svg가 작동하지 않을 때 jsp로 semi 프로젝트를 하는 중인데, 절대경로로 아무리 입력을 해도 Failed to load resource: the server responded with a status of 404 (Not Found) 라는 오류만 발생했다. 해결방법 조금 허무한데, src 주소가 잘못된 거였다... EL(Expression Language)을 사용해 contextPath로 접근해야 했다. 2022. 6. 13. styled-components란? styled-components란? styled-coponents는 CSS-in-JS 스타일링을 위한 프레임워크이다. 대개 style을 특정 요소에 주고자 할 때 css, scss 등의 스타일 속성 파일에서 html tag나, id, class 등의 선택자를 통해 접근한다. 하지만 이런 외부 파일 없이 동일한 컴포넌트에서 css와 같은 문법으로 스타일을 지정하는 것을 styled-components라고 부른다. 장점 styled-components 라이브러리를 사용해 보다 자유로운 리액트 컴포넌트를 만들 수 있다. 모바일을 지원한다(React Native에 사용) 스타일 스코프 No-class policy styled-components는 class에서 props사용하는 것을 권장. Wrapper div.. 2022. 6. 8. 이전 1 ··· 14 15 16 17 18 19 20 ··· 22 다음