TriplexLab
-
Jquery Ajax 사용방법 안녕하세요 TriplexLab 입니다 :) Jquery Ajax를 사용할려면 어느 시점에 이벤트가 발생하는지 알아볼 필요가 있습니다. 그건 보통 "라이프사이클"이라고도 부릅니다. ReactJS, VueJS...등등 과 같은 라이브러리도 이런 라이프사이클들이 존재 합니다. jQuery 최신버전에서 사용가능한 메서드들 메서드 설명 ajaxStart 첫 번째 Ajax 요청이 시작될 시점에 호출 할 핸들러를 등록한다. (ex 로딩 이미지 보여주기 처리) ajaxStop 모든 Ajax 요청이 완료되는 시점에 호출 할 핸들러를 등록한다. (ex 로딩 이미지 감추기 처리) done 요청 성공시 호출 fail 요청 실패시 호출 always 성공 실패 상관없이 호출 jQuery 구 버전..
Jquery Ajax 사용방법Jquery Ajax 사용방법 안녕하세요 TriplexLab 입니다 :) Jquery Ajax를 사용할려면 어느 시점에 이벤트가 발생하는지 알아볼 필요가 있습니다. 그건 보통 "라이프사이클"이라고도 부릅니다. ReactJS, VueJS...등등 과 같은 라이브러리도 이런 라이프사이클들이 존재 합니다. jQuery 최신버전에서 사용가능한 메서드들 메서드 설명 ajaxStart 첫 번째 Ajax 요청이 시작될 시점에 호출 할 핸들러를 등록한다. (ex 로딩 이미지 보여주기 처리) ajaxStop 모든 Ajax 요청이 완료되는 시점에 호출 할 핸들러를 등록한다. (ex 로딩 이미지 감추기 처리) done 요청 성공시 호출 fail 요청 실패시 호출 always 성공 실패 상관없이 호출 jQuery 구 버전..
2021.01.31 -
UI/UX 디자인 아이디어 공유 Product Stock Screen by M A J E D Mobile Design, UI / Visual Design, Product Design Mohammad Majed Tapcheck Direct App Design ((Live 🤳)) dribbble.com
UI/UX 디자인 아이디어 공유UI/UX 디자인 아이디어 공유 Product Stock Screen by M A J E D Mobile Design, UI / Visual Design, Product Design Mohammad Majed Tapcheck Direct App Design ((Live 🤳)) dribbble.com
2021.01.31 -
Github Sourcetree 안녕하세요 TriplexLab입니다. 오늘은 Github + Sourcetree에 관해서 살펴보도록 하겠습니다. 📌 Sourcetree에 Github 계정 추가하기 1. 소스 트리 첫 화면에서 조그마한 '설정' 버튼을 클릭합니다. 2 : '계정'을 클릭 👉 2-1 : 추가 버튼 클릭 👉 2-2 : 추가 할 github name / password 작성 결과) 👉 다음과 같이 개인 계정이 추간 된 모습을 확인할 수 있습니다. 📌 Github 프로젝트 주소와 연동하기 프로젝트마다 remote github url을 설정해주어야 해요. 1. : 프로젝트를 열어서 우측 상단에 설정버튼을 클릭 👉 1-1. : 원격 탭으로 이동 👉 1-2. : 추가 버튼 클릭 2. : 계정정보 + g..
Github SourcetreeGithub Sourcetree 안녕하세요 TriplexLab입니다. 오늘은 Github + Sourcetree에 관해서 살펴보도록 하겠습니다. 📌 Sourcetree에 Github 계정 추가하기 1. 소스 트리 첫 화면에서 조그마한 '설정' 버튼을 클릭합니다. 2 : '계정'을 클릭 👉 2-1 : 추가 버튼 클릭 👉 2-2 : 추가 할 github name / password 작성 결과) 👉 다음과 같이 개인 계정이 추간 된 모습을 확인할 수 있습니다. 📌 Github 프로젝트 주소와 연동하기 프로젝트마다 remote github url을 설정해주어야 해요. 1. : 프로젝트를 열어서 우측 상단에 설정버튼을 클릭 👉 1-1. : 원격 탭으로 이동 👉 1-2. : 추가 버튼 클릭 2. : 계정정보 + g..
2021.01.23 -
안녕하세요 TriplexLab 입니다. 오늘을 자바스크립트에서 모듈화 방식으로 만들기 위한 기본 지식 모듈 내보내고 가져오기에 대해서 살펴 볼까 합니다. export와 import 지시자는 다양한 방식으로 활용됩니다. 이번 챕터에서 좀 더 다양한 사용법을 배워보겠습니다. 선언부 앞에 export 붙이기 변수나 함수, 클래스를 선언할 때 맨 앞에 export를 붙이면 내보내기가 가능합니다. 아래 내보내기는 모두 유효합니다. // 배열 내보내기 export let months = ['Jan', 'Feb', 'Mar','Apr', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']; // 상수 내보내기 export const MODULES_BECAME_STANDARD_YEAR = 2015; // 클..
모듈 내보내고 가져오기안녕하세요 TriplexLab 입니다. 오늘을 자바스크립트에서 모듈화 방식으로 만들기 위한 기본 지식 모듈 내보내고 가져오기에 대해서 살펴 볼까 합니다. export와 import 지시자는 다양한 방식으로 활용됩니다. 이번 챕터에서 좀 더 다양한 사용법을 배워보겠습니다. 선언부 앞에 export 붙이기 변수나 함수, 클래스를 선언할 때 맨 앞에 export를 붙이면 내보내기가 가능합니다. 아래 내보내기는 모두 유효합니다. // 배열 내보내기 export let months = ['Jan', 'Feb', 'Mar','Apr', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']; // 상수 내보내기 export const MODULES_BECAME_STANDARD_YEAR = 2015; // 클..
2021.01.18 -
이미지 슬리이드 JS (좌,우) 안녕하세요 TriplexLab입니다 :) 오늘은 이미지 슬리이드 JS (좌,우)기능에 대해서 알아보도록 하겠습니다. // html 이미지가 3초에 한번씩 좌우로 전환되는 효과 Left Right // css /* reset */ * {margin: 0; padding: 0; font-size: 24px; font-weight: bold; color: #fff;} a {color: #333; text-decoration: none;} li {list-style: none;} table {border-spacing: 0;} .clearfix::before, .clearfix::after {display: block; content:''; clear:both;} #wrap {w..
이미지 슬리이드 JS (좌,우)이미지 슬리이드 JS (좌,우) 안녕하세요 TriplexLab입니다 :) 오늘은 이미지 슬리이드 JS (좌,우)기능에 대해서 알아보도록 하겠습니다. // html 이미지가 3초에 한번씩 좌우로 전환되는 효과 Left Right // css /* reset */ * {margin: 0; padding: 0; font-size: 24px; font-weight: bold; color: #fff;} a {color: #333; text-decoration: none;} li {list-style: none;} table {border-spacing: 0;} .clearfix::before, .clearfix::after {display: block; content:''; clear:both;} #wrap {w..
2021.01.13 -
안녕하세요 TriplexLab 입니다. :) 오늘은 메소드 체이닝에 관한 예제를 살펴보도록 하겠습니다. 메소드 체이닝은 jQuery를 사용하시는 분이라면 다 아실거에요. 메소드를 연속적으로 이어서 사용할수 있다는 사실요 저는 javascript에서 사용자가 정의한 메소드를 체이닝 기법으로 사용하는 방법에 대해서 정리해봤습니다. var account = { id : "", //this.id은 즉 this == account 같은 말 그 밑에 id 곳에 값을 저장 4) password : "", //this.password은 즉 this == account 같은 말 그 밑에 password 곳에 값을 저장 7) setId : function(myId){ //인자로(myId) 념겨 받은 값 2) this.id..
메소드 체이닝 예제안녕하세요 TriplexLab 입니다. :) 오늘은 메소드 체이닝에 관한 예제를 살펴보도록 하겠습니다. 메소드 체이닝은 jQuery를 사용하시는 분이라면 다 아실거에요. 메소드를 연속적으로 이어서 사용할수 있다는 사실요 저는 javascript에서 사용자가 정의한 메소드를 체이닝 기법으로 사용하는 방법에 대해서 정리해봤습니다. var account = { id : "", //this.id은 즉 this == account 같은 말 그 밑에 id 곳에 값을 저장 4) password : "", //this.password은 즉 this == account 같은 말 그 밑에 password 곳에 값을 저장 7) setId : function(myId){ //인자로(myId) 념겨 받은 값 2) this.id..
2021.01.12 -
개인 블로그 다크모드 적용하기 안녕하세요 TriplexLab 입니다 :) 오늘은 티스토리 개인 블로그에 다크모드를 적용하는 방법에 대해서 알아 보도록 하겠습니다. // 다크 모드인 경우 @media (prefers-color-scheme: dark) { body { background-color: #1e1f21 !important; color: #fff !important; } .cover-masonry ul li a { color: #fff !important; } .cover-masonry ul li .excerpt { color: #fff !important; } } 위 코드는 css 상에서 운영체제가 선호하는 색상 테마가 다크모드인지 감지해서 다크모드 일때만 해당 코드를 실행해주는 것 입니다. 저..
개인 블로그 다크모드 적용하기개인 블로그 다크모드 적용하기 안녕하세요 TriplexLab 입니다 :) 오늘은 티스토리 개인 블로그에 다크모드를 적용하는 방법에 대해서 알아 보도록 하겠습니다. // 다크 모드인 경우 @media (prefers-color-scheme: dark) { body { background-color: #1e1f21 !important; color: #fff !important; } .cover-masonry ul li a { color: #fff !important; } .cover-masonry ul li .excerpt { color: #fff !important; } } 위 코드는 css 상에서 운영체제가 선호하는 색상 테마가 다크모드인지 감지해서 다크모드 일때만 해당 코드를 실행해주는 것 입니다. 저..
2021.01.02 -
🛒 장바구니 및 회원가입시 체크박스 구현하기 안녕하세요 TriplexLab 입니다 :) 쇼핑몰을 만들다 보면 흔하게 사용하는 체크박스 구현에 대해서 정리해봤습니다. 채크박스 구현이라는것은 예를 들어서 -전체동의를 클릭하면 동시에 나머지 채크박스도 같이 활성화가 되어야 하고, - 각각의 약관동의를 채크하면 자동으로 전체동의도 활성화가 되는것을 말합니다. 전체선택 $(function(){ var listAll = $("input[type='checkbox'].agreechkAll"); //전체 클릭하는 엘리먼트에 .agreechkAll 클랙스가 추가되어야 한다. var list = $("input[type='checkbox'].chack"); //각각 클릭하는 엘리먼트에 .chack 클랙스가 추가되어야 한다..
장바구니 및 회원가입시 체크박스 구현하기🛒 장바구니 및 회원가입시 체크박스 구현하기 안녕하세요 TriplexLab 입니다 :) 쇼핑몰을 만들다 보면 흔하게 사용하는 체크박스 구현에 대해서 정리해봤습니다. 채크박스 구현이라는것은 예를 들어서 -전체동의를 클릭하면 동시에 나머지 채크박스도 같이 활성화가 되어야 하고, - 각각의 약관동의를 채크하면 자동으로 전체동의도 활성화가 되는것을 말합니다. 전체선택 $(function(){ var listAll = $("input[type='checkbox'].agreechkAll"); //전체 클릭하는 엘리먼트에 .agreechkAll 클랙스가 추가되어야 한다. var list = $("input[type='checkbox'].chack"); //각각 클릭하는 엘리먼트에 .chack 클랙스가 추가되어야 한다..
2021.01.01 -
CSS 아이콘 라이브러리 fontello 사용하기 안녕하세요. TriplexLab 입니다. :) 오늘은 CSS 라이브러리 중 하나인 fontello에 대해서 알아보겠습니다. 여러 아이콘을 폰트로 제공하는 서비스입니다. 👀 fontello를 이용해서 아이콘을 웹페이지에 삽입하는 방법 1. http://fontello.com/ 페이지에 접속한다. 2. 원하는 아이콘을 선택한다. 3. 우측 상단에 Download webfont 클릭을 한다. 그럼 다운로드 받으면 압축파일을 풀고, 디렉토리(파일)을 자체를 현재 자신이 진행하고 있는 프로잭트 디렉토리(파일)에다가 붙여넣기를 한다. demo.html 파일을 보면 밑에와 같은 화면이 나올것에요. 여기서 아이콘 옆에있는 이름들을 class에 갔다가 붙이는 것이에요. ..
CSS 아이콘 라이브러리 fontello 사용하기CSS 아이콘 라이브러리 fontello 사용하기 안녕하세요. TriplexLab 입니다. :) 오늘은 CSS 라이브러리 중 하나인 fontello에 대해서 알아보겠습니다. 여러 아이콘을 폰트로 제공하는 서비스입니다. 👀 fontello를 이용해서 아이콘을 웹페이지에 삽입하는 방법 1. http://fontello.com/ 페이지에 접속한다. 2. 원하는 아이콘을 선택한다. 3. 우측 상단에 Download webfont 클릭을 한다. 그럼 다운로드 받으면 압축파일을 풀고, 디렉토리(파일)을 자체를 현재 자신이 진행하고 있는 프로잭트 디렉토리(파일)에다가 붙여넣기를 한다. demo.html 파일을 보면 밑에와 같은 화면이 나올것에요. 여기서 아이콘 옆에있는 이름들을 class에 갔다가 붙이는 것이에요. ..
2020.12.27 -
UI/UX 디자인 아이디어 공유 Ferlioni Fashion Children Clothes Home Page Animation by Zhenya & Artem Product design | Visual design | Mobile design | Web design | UX design | Interface design | Interface animations Email: hey@zhenyary.com https://dribbble.com/
UI/UX 디자인 아이디어 공유UI/UX 디자인 아이디어 공유 Ferlioni Fashion Children Clothes Home Page Animation by Zhenya & Artem Product design | Visual design | Mobile design | Web design | UX design | Interface design | Interface animations Email: hey@zhenyary.com https://dribbble.com/
2020.12.12 -
반응형일 작업할때 유지할수 있는 수직 정렬 안녕하세요 TriplexLab 입니다 :) 오늘은 반응형 리스폰일때 유지할수 있는 수직 정렬에 관해서 이야기를 해볼게요. 크게 2가지로 나눌수가 있어요 1번 display: table, table-cell을 하는 방법 2번 position: absolute,와 relative로 하는 방법. 오늘은 먼저 display: table, table-cell 속성을 이용해서 수직 정렬를 해볼게요 HTML 심플하고 고저스한 디자인의 서랍입니다. 튀어나온 손잡이 없이 깔끔하게 처리하여 다양한 용도로 사용할 수 있습니다. DETAIL VIEW CSS .box_bg { height: 50vh; /*vh은 %게념과 비슷하다. 다만 %는 직개 부모 에도 %가 선언되어 있어야 한다면..
반응형일 작업할때 유지할수 있는 수직 정렬반응형일 작업할때 유지할수 있는 수직 정렬 안녕하세요 TriplexLab 입니다 :) 오늘은 반응형 리스폰일때 유지할수 있는 수직 정렬에 관해서 이야기를 해볼게요. 크게 2가지로 나눌수가 있어요 1번 display: table, table-cell을 하는 방법 2번 position: absolute,와 relative로 하는 방법. 오늘은 먼저 display: table, table-cell 속성을 이용해서 수직 정렬를 해볼게요 HTML 심플하고 고저스한 디자인의 서랍입니다. 튀어나온 손잡이 없이 깔끔하게 처리하여 다양한 용도로 사용할 수 있습니다. DETAIL VIEW CSS .box_bg { height: 50vh; /*vh은 %게념과 비슷하다. 다만 %는 직개 부모 에도 %가 선언되어 있어야 한다면..
2020.12.09 -
🙋♂️ inline-block과 float 중 어떤 것을 써야 할까? 안녕하세요 TriplexLab 입니다 :) 오늘은 가로 배치 속성에 대해서 이야기를 해볼게요 가로 배치 속성 중에서 inline-block과 float 2가지 속성이 있어요. inline-block에 대해서 이야기를 해볼게요 각각의 박스들을 inline-block 가로 정렬을 시켜보겠습니다. .grid { width: 500px; margin: 0 auto; background-color: dimgrey; text-align: center; /*inline-block의 장점은 폰트의 성질도 포함되고 있어서 text-align으로 정렬을 쉽게 할수가 있다.*/ font-size: 0; /*양 옆쪽, 밑에 4px정도 여백을 없에주는 방법..
inline-block과 float 중 어떤 것을 써야 할까?🙋♂️ inline-block과 float 중 어떤 것을 써야 할까? 안녕하세요 TriplexLab 입니다 :) 오늘은 가로 배치 속성에 대해서 이야기를 해볼게요 가로 배치 속성 중에서 inline-block과 float 2가지 속성이 있어요. inline-block에 대해서 이야기를 해볼게요 각각의 박스들을 inline-block 가로 정렬을 시켜보겠습니다. .grid { width: 500px; margin: 0 auto; background-color: dimgrey; text-align: center; /*inline-block의 장점은 폰트의 성질도 포함되고 있어서 text-align으로 정렬을 쉽게 할수가 있다.*/ font-size: 0; /*양 옆쪽, 밑에 4px정도 여백을 없에주는 방법..
2020.12.08