분류 전체보기
-
[Slider] Swiperjs 옵션IT/PLUGIN 2022. 5. 30. 17:56
주로 사용하는 Swiperjs 옵션 // ! 동일한 스와이퍼 함수가 2번이상 호출되면 이슈가 발생됨(ex : 'pagination' 비정상 작동) // ! thumbs 적용시 일부태그('input, select, option, textarea, button, video')에 적용할 경우 액티브된 요소가 움지이지 않는 이슈 발생함 // (set swiper function name.touchEventsData.formElements = '컨트롤 제어 태그 나열'; ) var swiper = new Swiper('.swiper', { initialSlide : 0, // 슬라이드 시작위치값(몇번째 슬라이드부터 보여 줄것 인지 설정) speed : 400, // 슬라이드 전환 초 수 설정(duration 효과..
-
[Slider] Swiperjs 란, 그리고 설치IT/PLUGIN 2022. 5. 30. 17:45
# 목차 사용목적 Swiperjs란? 플러그인 홈페이지 사용을 위한 설치 사용을 위한 설정(css, js) 사용을 위한 레이아웃 구축(html, css) 사용을 위한 구문 작성(js) 그리고 결과 1. 사용목적 '배너', '공지사항' 등 '이미지'나 '텍스트' 등으로 된 정보를 시각적으로 회전시키거나, 수동적으로 움직이게하여 제공하기 위해 사용한다. 2. Swiperjs란? 'Swiperjs'는 모바일에 최적화된 'Slider'이나, 일반 웹에서도 큰 이슈없이 사용이 가능하다. MIT라이센스의 오픈소스로 상업적 이용이 가능하다. 3. 플러그인 홈페이지 해당 홈페이지에서 'Swiper.js' 플러그인을 사용하는 방법, 예제 등을 확인할 수 있다. https://swiperjs.com/ Swiper - Th..
-
[GIT_알아가기] Git Clone for Vscode(WINDOW)IT/GIT 2022. 5. 24. 17:37
Git이 PC에 설치되어있어야만, 깃을 이용한 작업이 가능합니다. 미리 설치 하고 진행하도록 합시다. 1. 깃을 PC에 설치 - 사용중인 PC에 맞는 버전을 찾아 다운받습니다. https://git-scm.com/ Git git-scm.com 2. 'gitlab' 홈페이지에서 프로젝트 url 링크 카피 3. Vscode에 클론 - 'Vscode'를 열어, 오른쪽 활성 메뉴중 'Source Control'에 들어가 'Clone Repository'를 클릭한다. - 상단에 활성화된 'Command Palette'가 열리면 카피한 링크를 입력한다. - 입력후 엔터키를 누르면 윈도우 폴더창이 열리며, 클론할 폴더를 선택한다.(없으면 화면에서 만들어준다.) - 폴더 선택후 깃랩 계정을 입력하는 창이 활성화 된다...
-
[GIT_알아가기] Gitlab 프로젝트 생성(MAC)IT/GIT 2022. 5. 12. 00:27
1. 'gitlab' 홈페이지에 접속. 2. 로그인 혹은 계정 생성 - 홈페이지 접속하면 상단 우측에 있는 유틸리티 메뉴를 확인한다. 계정이 있다면 'Login'을, 회원가입을 해야 한다면 'Register'을 선택해 계정을 생성한다. 3. 로그인 후 프로젝트 생성 - 계정생성 후 첫 로그인시 나오는 화면에서 'Create a project'를 선택해 새로운 프로젝트를 생성한다. 4. 프로젝트 생성시 기본 내용 입력 - 프로젝트를 생성 하기 위해선, 기본적인 내용을 입력해 줘야한다. - 기입할 내용을 간략하게 설명하자면 아래와 같다. Project name : 프로젝트명 Project slug : url 경로로 프로젝트명 작성시 자동 작성되며, 직접작성도 가능하다. Project description :..
-
[GIT_알아가기] Sourcetree 설치(MAC)IT/GIT 2022. 5. 1. 22:53
sourcetree는 Git에 있는 소스들을 관리하는 GUI툴 이다. 1. 'sourcetree' 홈페이지에 접속 2. 파일 다운로드 - 홈페이지에 접속하면 사용중인 '운영체제'에 따라 다운로드가 활성화 된다. - 활성화된 다운로드 버튼을 눌러 다운로드를 진행한다. - 클릭시 팝업이 뜨며, Lisense 와 Privacy Policy 동의에 체크한 뒤 다운로드 한다. 3. 설치 진행- 필자는 이번 소스트리 설치시 계정이나 비트버킷 연결없이 설치만 진행 하기로 했다. (기본설정에선 계정을 작성해줘도 좋으나, 나중에 작성을 해도 무관하다.) 4. 설치완료 - 계정 연결없이 설치된 모습이다.
-
[JS_알아가기] Node.js 설치(MAC)IT/JAVASCRIPT 2022. 4. 26. 01:48
1. 'node.js' 홈페이지 접속 - 영문사이트로 들어가서 다운받아도 무관(끝에만 'en'으로 바꿔주면 영문 주소.) 2. 'LTS'로 다운로드 선택 - 'LTS'가 안정된 버전임, 최신버전을 다운받지 않아도 상관없다. 3. 설치 진행 4. 'terminal'에서 'nodejs'설치 여부를 확인한다. - 필자는 'sportlight'에서 찾아서 진행함. !!!! 여기서 부턴 테스트 작업입니다-1(노드설치 테스트) !!!! 5. 설치가 된 걸 확인후 콘솔을 입력해 테스트 해본다. 6. 'node.js'에서 나올땐 단축키 혹은 단축어를 입력한다. - 단축키 : control + c - 단축어 : .exit !!!! 여기서 부턴 테스트 작업입니다-2(폴더연결 테스트) !!!! 7. 데스크탑에 테스트할 폴더..
-
[JS_알아가기] Node.js(생활코딩)IT/JAVASCRIPT 2022. 4. 21. 23:14
2022-04-21(1일차) # 수업의 목적 * node.js를 사용하는건 생산성을 위해서 이다. web application html web browser node.js application (=web application) javascript(=html) node.js runtime (=web browser) 웹 브라우저가 가지고 있는 여러가지 기능들 중에서 웹 애플리케이션의 필요한 기능을 어떤 컴퓨터 언어의 문법에 따라서 html이라는 컴퓨터 언어의 문법의 따라서 호출함에 따라 웹애플리케이션을 만든다 node.js runtime을 설치, 실행하여 javascript라는 언어가 node.js runtime이 가지고 있는 기능을 호출하여 node.js application에서 만든다. 2022-04-2..
-
[수학] 30일 수학 : (2) 문자와 식해볼까/늦깎이 수학여행 2022. 4. 13. 22:28
01. 문자 # □(임의의 수)를 사용한 식 ( +,- ) ( * ) ( / ) ○ + △ = ★ ○ * △ = ★ ○ / △ = ★ ○ = ★ - △ ○ = ★ / △ -> ★ * 1/△ ○ = ★ * △ △ = ★ - ○ △ = ★ / ○ -> ★ * 1/○ △ = ★ * ○ # 문자의 사용 'x' 는 모르는 값을 표현하기 위한 문자 1) 어떤 수 보다 2 큰 수 → x + 2 2) 어떤 수 보다 3 작은수 → x - 3 3) 어떤 수의 4배인 수 → x * 4 4) 어떤 수를 5로 나눈수 → x / 5 # 맨날 까먹는 엄청 중요한 관계식 1) 거스름돈 = (낸돈) - (물건가격) ★2) a%(백분율) = a/100 ★3) x의 a% = x * a/100 ★4) a% 할인된 가격 = (정가) - (정..