본문 바로가기
반응형

javascript47

[javascript] 제이쿼리(jquery) 자바스크립트 모달창 1. 제이쿼리 CDN 복붙 2. html Navbar An item A second item A third item A fourth item And a fifth one 오징어 꼴뚜기 버튼 오징어 버튼 Navbar An item A second item A third item A fourth item And a fifth one 로그인하세요 닫기 모달창 열기 3. 자바스크립트 4. 제이쿼리 5. reset.css / main.css body { margin: 0 } div { box-sizing: border-box; } .alert-box { background-color: skyblue; padding: 20px; color: white; border-radius: 10px; display: none.. 2023. 1. 16.
[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]움직이지 않는 풋터 만들기 (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.
[javascript] function의 파라미터, 이벤트리스너 ※ 다른 버튼을 누르면 알림 창의 다른 내용 보이게 하기 ※ 하나의 function으로 다른 역할을 하는 버튼 만들기 ※ 닫기 버튼은 이벤트리스너로 구현 1. html 알림창임 X 버튼1 버튼2 2. main.css .alert-box { background-color: skyblue; padding: 20px; color: white; border-radius: 10px; display: none; float: left; width: 100%; } .alertclose-btn { font-size: 16px; float: right; background-color: skyblue; border: none; color: white; height: 21px; } .alerttext { float: left.. 2023. 1. 7.
반응형

티스토리툴바