개인 공부용 블로그

#1. input에 값을 넣고 정답이면 "정답", 3번째의 값이 틀렸을 경우 "오타"라고 알림창 띄우기 See the Pen 0223_jQuery 공부01 by limhaneul2244 (@limhaneul2244) on CodePen. var count = 0 을 담아준다. 이때 주의할 것은 var count = 0을 $('.send-answer')함수스코프안에 넣게 되면 안된다.😐 기본적으로 0 상태에서 클릭누적수를 확인해야 하며, function()안에는 count++ 을 넣어 count값을 넣어준다. 사용자가 3번째 오타났을 때는 멍청이가 떠야 하므로, count >= 3 의 조건식을 걸어준다. 📎중요 1회 증가 count++ 1회 가감 count-- 2회 이상 증가 count+= 2회 이상 가감..

form input[type="file"] 커스텀 하기 input file은 기본적으로 아래와 같이 나온다. 커스텀을 해야했는데 label로 감싸고 input을 내부에 넣어주었다. html 제출서류 이력서 이력서 첨부 css /* 이력서 파일 제출*/ .applyContainer form .submitFile {margin-bottom: 65px;} .applyContainer form .submitFile .fileBox {display: flex; align-items: center; height: 55px; padding-left: 18px; border-radius: 10px; background-color: #d0cccd;} .applyContainer form .submitFile .fileB..

1. 3의 배수에 콘솔창에 '박수'띄우기, 그 외에는 '패스' 띄우기 function testGame (num) { if( num % 3 === 0 ) { console.log('박수'); } else { console.log('패스'); } }; 나머지(%)연산자 보러가기 값이 소수가 되기 전까지 계산하며, 나머지 값이 나누는 수보다 작아졌을때까지 계산한다. 2. 3의 배수에 콘솔창에 '박수', 9의 배수는 '박수X2', 그 외에는 '패스' 띄우기 testGame(); function testGame (num) { if( num % 9 === 0 ) { console.log('박수X2'); } else if ( num % 3 === 0 ) { console.log('박수'); } else { conso..

.lineUp .sliderContainer > a {overflow: hidden; display: block; width: 250px; margin-right: 15px;} .lineUp .sliderContainer > a img {width: 100%;} .lineUp .sliderContainer > a img:hover {transition: .5s; transform: scale(1.03);} .lineUp .sliderContainer > a img:not(:hover) {transition: .5s; transform: scale(1);} 보통 :hover를 통해 색깔변경을 많이 해주는데 transform으로 이미지 확대나 변형 한 뒤 다시 부드럽게 돌아가게 하기 위해 간단하게 :not(..

simplyscroll바로가기 jQuery simplyScroll - Logicbox Jump to: [Features] [Examples] [Download] [Installation] [Config] This plugin is now legacy and is mostly unsupported! Core functionality still works, but all features described may not work as intended or at all, please use at your own risk! simplyScroll www.logicbox.net HTML ul > li 구조로 감싼 뒤 img를 넣어준다. jQuery $(function() { $('#scroller').simplyS..

swiperSlider 바로가기 HTML Slide 1 Slide 2 Slide 3 ... CSS scrollbar 사용시 scrollbar-drag 색상 및 너비 제어하기 /* will not work as it should 스크롤바 너비 제어 */ .swiper-horizontal .swiper-scrollbar{width: 50%!important;} .swiper-horizontal .swiper-scrollbar .swiper-scrollbar-drag {background-color: red;} var swiper = new Swiper(".categorySwiper", { //초기값 설정은 모바일이 먼저 적용됨 spaceBetween: 60, //간격 slidesPerGroup: 2, //슬..

git에 저장한 파일을 소스트리로 가지고 오는 방법 1. clone 클릭 2. git에서 HTTPS 주소 복사해옴 (SSH키를 사용하면 더 안전하다.) 3. 소스트리에서 clone 체크 4. 2번에 git에서 복사해온 경로를 ctrl + v 한다. 5. 하단에는 프로젝트를 관리할 파일 경로를 지정해준다 (주의할 점: 프로젝트 내부에는 아무것도 없어야 한다 절대로!) 뭔 파일이라도 있으면 빈 디렉터리가 아니라고 경고가 뜬다. 6. 성공적으로 clone 되면 파일이 자동적으로 가져와진다.

Vue 라우팅이란? vue화면이 전환되는 것. 사용자가 태스크 수행을 위해 어떤 화면에서 다른 화면으로 화면을 전환하는 내비게이션을 관리하기 위한 기능. URL을 변경하게 될 경우 변경된 요소만 갱신한다. (SPA 특징) 싱글페이지 어플리케이션 위키백과 Single Page Application & Routing Vue 라우터 개념 및 사용방법 #1. vue router 설치하기 설치 전에 터미널을 통해 실행되고 있던 창이 있다면 ctrl + c 로 일괄 작업을 끝낸 뒤 재실행해줄 것! (안그럼 오류남) npm install vue-router@4 **node_modules 폴더를 가보면 vue-router가 정상적으로 생긴것을 볼 수 있다. #2. router.js 파일 생성 별도의 router.js ..

방법1. CDN 가져오기 부트스트랩 바로가기 Hello, world! 위의 형태로 태그 안에 주소를 넣어준다. script는 끝나기 전에 넣어준다. 단, 사이트에서 데이터를 가지고 오는 것이기 때문에 인터넷이 느리거나 물리적 거리가 있을 경우 느려지게 된다. 방법2. 터미널 설치하기 2-1. 경로 설정 먼저 잘 체크해준다. (폴더 생성한 파일 안으로 들어가서 부트스트랩 설치해주기!) 부트스트랩 다운로드 바로가기 npm install bootstrap jquery popper.js npm install bootstrap@next @popperjs/core **5버전은 IE에서 적용되지 않는 부분이 일부 있다고 한다. 2-2. src > main.js 파일로 들어가서 아래와 같이 import 해준다. imp..

1. SSH key github 등록하는 방법 1-1. 검색창 git-bash 실행 -> ssh-keygen 입력 keygen을 경로를 찾아간다. 1-2. 경로를 찾아서 .pub 파일을 메모장으로 연다. 주소 복사! 1-3. 깃헙으로 들어가서 우측 내 프로필을 클릭하고 셋팅 클릭 SSH key를 등록하는 탭이 있다. 1-4. 키를 등록해준다. 이메일에 가보면 키가 등록됐다는 메일이 와있다. 등록 끝. 2. 소스트리 연동하기 나는 소스트리GUI로 관리하고 싶어서 소스트리 파일을 깔았고 도구 > 옵션에서 SSH 클라이언트 설정을 지정해준다. 키 설정은 1-2에서 작업했던 경로를 동일하게 지정해주고 SSH 클라이언트는 OpenSSH로 체크해준다. (SSH키 등록을 해주지 않았더니 push가 제대로 되지 않았다.)