본문 바로가기
반응형

css14

[toy project]업비트 open api 데이터 받아오기 (feat. axios) 1. 받아올 데이터는 마켓명과 코인명입니다. 2. axios 설치 ( npm install axios) 3. KRWMarket.vue, BTCMarket.vue, USDTMarket.vue의 탬플릿 캔 들 {{coin.korean_name}} {{coin.market}} 코인가격 코인거래대금 가격변동 가격변동률 4. KRWMarket.vue, BTCMarket.vue, USDTMarket.vue의 스크립트 5. 출력화면 2023. 1. 14.
[vuejs] 게시물 or 데이터 정렬버튼 만들기 1. 가지고 오는 데이터의 형태 확인 export default [{ id : 0, title: "Sinrim station 30 meters away", image: "https://codingapple1.github.io/vue/room0.jpg", content: "18년 신축공사한 남향 원룸 ☀️, 공기청정기 제공", price: 340000, fakeReport: 0 }, { id : 1, title: "Changdong Aurora Bedroom(Queen-size)", image: "https://codingapple1.github.io/vue/room1.jpg", content: "침실만 따로 있는 공용 셰어하우스입니다. 최대 2인 가능", price: 450000, fakeReport: .. 2023. 1. 13.
[javascript] 부트스트랩(bootstrap), 쿼리셀렉터(querySelector) 1. head 태그 안에 복붙 한다. (마지막에 적용할 css의 파일 링크를 아래쪽으로) ​ 2. body 태그 가 끝나기 전에 을 복붙한다 3. UI이 적용할 html Navbar An item A second item A third item A fourth item And a fifth one ​ 4. script ​ or or or 5. 출력화면 2023. 1. 11.
[toy project]마켓 게시물 만들기(vuejs component, router-veiw) ※ 마켓과 랭킹은 같은 헤더를 사용한다. ( 나중에 컴포넌트 순서가 바뀔 수 있음) ※ router-view로 보여 줄 화면은 router에서 지정해 둔 /pacct/Rangking과 /pacct(마켓) 화면이다. ※ 마켓은 krw, btc, usdt 3개의 마켓으로 이루어져 있다. 각각 버튼을 만든다. ※ 몇 개의 자료를 받아올지 모르기 때문에 화면을 꽉 채울 정도의 같은 형식의 게시물을 반복문으로 작성 1. 마켓과 랭킹 목록의 헤더는 같기 때문에 전역으로 컴포넌트를 설정한다. (마켓 리스트 버튼도 전역설정) import { createApp } from 'vue' import App from './App.vue' import router from './router.js' import './regist.. 2023. 1. 10.
[toy project]움직이지 않는 풋터 만들기 (feat. vuejs router) ※ 밑 쪽에 움직이지 않는 풋터를 만들기 ※ router를 사용해 버튼을 누를 경우 다른 페이지가 보이 도록 ※ 포커스 된 버튼 스타일 변경 ※ npm install vue-router (라우터 설치) 1. App.vue의 html(router-veiw, router-link 사용) 랭킹 마켓 내정보 ​ 2. App.vue의 ​ 3. App.vue의 css 4. router.js 생성 및 작성 import { createWebHistory, createRouter } from "vue-router"; import Ranking from './components/Ranking.vue' import KRWMarket from './components/KRWMarket.vue' const routes = [ .. 2023. 1. 9.
[vuejs] 애니메이션(animate) transition ※ 모달창에 애니메이션을 추가 ※ vue에서 제공하는 transition으로 구현 1. App.vue 2. 출력화면 2023. 1. 7.
반응형