본문 바로가기

Vue.js8

[Vue.js] transition을 이용해서 애니메이션 속도 나타내기. 참고로 Vue.js에 대해서 잘 모릅니다.아무거나 막 해보는 중이고 옳은 정보인지 저도 모릅니다! 버튼에 마우스를 대면색이 천천히 반전되도록만들어볼 것이다. 1. 실행화면 2. MainView.vue버튼을 설정하고 btn이란 클래스를 붙여줬다. Click 전체 화면 설정이다.의 코드.main-view { position: relative; width: 100vw; height: 100vh; background-color: lemonchiffon;} 버튼이 중앙에 위치하도록 만들었다. 텍스트 컬러는 화이트이고, 배경색은 블랙이다.의 코드.btn{ position: absolute; width: 80px; height: 50px; top: 50%; left: .. 2025. 8. 4.

[Vue.js] :hover를 사용해서 버튼에 마우스 커서를 대면 색반전 시키기. 참고로 Vue.js에 대해서 잘 모릅니다.아무거나 막 해보는 중이고 옳은 정보인지 저도 모릅니다! 커서를 대면 버튼의 색이다른 색으로 바뀌는 것을만들어볼 것이다. 1. 실행화면 2. HelloView.vue버튼 클래스를 먼저 만들어줍니다. Click 전체 화면 구성은 이렇게 했습니다. 의 코드.main-view { position: relative; width: 100vw; height: 100vh; background-color: lemonchiffon;} 버튼의 위치는 중앙에 위치하도록 배치했습니다. 배경색은 블랙, 텍스트 컬러는 하얀색입니다. 의 코드.btn{ position: absolute; width: 80px; height: 50px.. 2025. 8. 4.

[Spring] (IntelliJ, vue.js) Vue를 이용하여! 아이콘을 누르면 화면 슬라이딩 만들기. 아이콘을 누르면,화면이 슬라이딩되어나타나도록 만들 것이다. 1. 화면 동작과 전체코드2. 코드 이해를 돕기 위한 간략한 설명3. RightSide.vue 작성4. MainView.vue 작성5. 흐름 1. 화면 동작과 전체코드동작화면 전체코드[MainView.vue에 메인화면 코드가 있습니다.] Register-Web-frontend/src/views at master · hyeong-ing/Register-Web-frontend일반 회원가입과 로그인, 간편 회원가입과 로그인을 구현했습니다. WebStrom으로 Vue.js와 Vite를 사용했습니다. - hyeong-ing/Register-Web-frontendgithub.com [RightSide.vue에 오른쪽 사이드 뷰 코드가 들어.. 2025. 8. 3.

[Vue.js] 버튼 만들고, 버튼 누르면 텍스트 나타내기. 참고로 Vue.js에 대해서 잘 모릅니다.아무거나 막 해보는 중이고 옳은 정보인지 저도 모릅니다! 버튼을 만들고그 버튼을 누르면텍스트가 나오도록만들 것이다. 1. 실행 화면 2. HelloView.vue MainView.vue에 있는 Hello,Vue!! 텍스트 출력 부분 코드를 HelloView.vue로 옮겨준다. 만약 새롭게 화면을 만든다면 메인화면 창 하나와 텍스트를 설정한 창 하나를 만들면 된다. HelloVue!! 나머지는 거의 똑같은데, 텍스트 위치만 left: 80%로 옮겨줬고 아까 HelloView에서 export 했었는데, 그걸 MainView에서 import로 받아보겠다. from에 경로를 적어준다. 위 사진을 보면 components 디렉.. 2025. 7. 27.

[Vue.js] 글씨체 적용하기. (눈누) 참고로 Vue.js에 대해서 잘 모릅니다.아무거나 막 해보는 중이고 옳은 정보인지 저도 모릅니다! 예쁜 글씨체로바꾸고 싶다!어떻게 바꾸면 될까? 1. 글씨체 찾아오기.일단 저는 눈누에서 글씨체를 찾았습니다. 눈누 사이트 눈누상업용 무료 한글 폰트 사이트noonnu.cc 여기에 들어가서 원하는 글씨를 찾으시면 됩니다. 주의할 점은 사용목적에 따라 저작권이 달라지기 때문에 어느 용도로 사용할건지, 그리고 그 용도로 제공하는지를 보셔야합니다. 저는 모든 폰트에 들어가서 허용 범위에 웹사이트를 체크한 후 고릅니다. 영어에 글씨체를 적용할거라 아래 글씨체를 가져올 것입니다.- Cafe24 Meongi Black 눈누Cafe24 Meongi Black - Cafe24noonnu.cc 웹폰트로 사용 옆에.. 2025. 7. 24.

[Vue.js] 배경에 나타나는 검은색 테두리(?) 없애기. [ 라우터 설치하고 배경색 바꿔보기 ]◀ 이전 포스팅 ◀ [Vue.js] 라우터 설치하고, 배경색 바꿔보기.[ 3. Vue.js 설치하기 ]설치 안 하신 분들을 위해 남겨두겠습니다 [Spring] (MAC, IntelliJ, vue.js) Spring boot로 프로젝트 만들고, vue.js 설치와 프로젝트 열기.이번에 만들 웹사이트는vue.js를 사용할 것이다post-this.tistory.com 참고로 Vue.js에 대해서 잘 모릅니다.아무거나 막 해보는 중이고 옳은 정보인지 저도 모릅니다! 배경색을 채웠더니,이상한 검은색이 왼쪽 사이드에 존재한다.거슬리니 없애보자! 1. 문제 확인하기이상한 검은면(?)선(?)이 왼쪽 사이드에 나타났다. 아무리 코드를 살펴봐도, 검은색 관련 코드를 적은 .. 2025. 7. 22.

이전 1 2 다음

티스토리툴바