분류 전체보기 17 썸네일형 리스트형 TIL/JS 2021.12.17 swiperjs 슬라이더 기본 사용법 알아보기 swiperjs 웹사이트에 기본적으로 들어가는 슬라이더. 흔하게 쓰이는 기능인만큼 슬라이더 플러그인도 엄청나게 많다. 오늘은 그 중에서 swiperjs를 소개 하려 한다. 실제로 사용하면서 초보 시절에 헷갈렸던 부분이나 최근 새로 알게 된 팁들까지 최대한 자세하게 작성했다. swiperjs 장점 많고 많은 슬라이더 중에서 swiper를 사용하게 된 이유는 아래와 같다. 많은 예시 및 자세한 api 안내글 → 혼자서 배우기 좋음 사용하는 사람 많음 → 자료 찾기 쉬움 다양한 기능 지원 → 커스텀하여 사용하기 편리함 vue, reactjs 프레임워크용 슬라이더 지원 → 한 번 배워두면 여기저기 사용하기 좋음 자, 이렇게 장점이 많은 슬라이더, 어떻게 쓰는 건지 한번 알아나 봅시다. 01. GET STARTE.. TIL/JS 2021.12.06 자바스크립트로 달력 만들기 오늘의 만들어볼까요? 자바스크립트의 date객체를 이용해 달력을 만들어보자. 만들기 조건 table이 아니라 flex 레이아웃을 이용 클래스를 활용해 css로 스타일 지정 달력은 월요일부터 시작 이전달의 월요일부터 마지막 날까지 표기 다음 달의 1일부터 일요일까지 표기 선택자 등등은 JQuery 이용 1. 날짜 가져오기 날짜 정보를 가져오기 위해서 자바스크립트의 date 객체를 이용할 예정이다. date 객체는 세계표준시(UTC) 1970년 1월 1일 00시 00분 00초를 기준으로 현재와 얼마나 시간 차가 얼마나 되는지 밀리초 단위로 나타낸다. 이 시간 차이를 조정하여 원하는 날짜를 표기할 수 있다. 기본적으로 아래와 같이 사용한다. console.log(new Date()); // 현재 날짜(로컬 기.. TIL/JS 2021.11.25 자바스크립트로 문자메시지 보내기 문자보내기 기능 구현하기. 여기에 URI Scheme과 URI 이스케이프를 곁들인... 오늘의 주제? 문자로 공유하기 기능 개발하려고 한다. 링크를 누르면 원하는 사람을 선택하여 정해둔 메시지를 보낼 수 있게 하는 기능이다. 결론부터 말하자면 a 태그에 href 속성에 일반적인 링크 주소인 http://가 아니라 문자 메시지를 의미하는 sms:를 이용하여 간단하게 구현할 수 있다. 안드로이드 문자보내기 iOS8 이상 문자보내기 iOS8 미만 문자보내기 여기서 : 앞에 오는 문자, sms 는 URI 스킴이라고 부른다. 이게 과연 무엇을 뜻하는 걸까? 한번 정리해보려고 한다. URI 스킴(URI Scheme)이란? Uniform Resource Identifier (URI) Schemes URI : 통합 자.. TIL/JS 2021.09.13 정규표현식 공부하기 STUDY WITH ME! 이상한 부호의 집합체. 필요한 게 있으면 구글에서 검색해서 긁어다 사용하곤 했다. 하지만 내가 사용하기에 딱 맞는 자료는 나오지 않고, 변형해서 사용하려니 머리가 아프다. 보는 것처럼 어렵기만 하진 않은 정규식. 같이 공부해보자!! 정규표현식이란? 정의 문자열에서 찾을 수 있는 일정한 패턴을 기호화한 표현식 12345 여기 문자열 12345가 있다. 이를 '12345'로 할 수도 있고, '숫자 5개가 연속해서 나오는 문자열'이라고 나름의 패턴을 찾아 묘사해서 말할 수도 있다. 이 패턴을 간략하게 \d{5} 기호로 표현하기로 약속한 걸 정규표현식이라고 한다. 어떤 상황에 사용할까? 다양한 곳에 사용할 수 있겠지만, 전화번호나 이메일처럼 텍스트에 일정한 형식이 정해져 있는 요소를 .. TIL/HTML CSS 2021.07.06 css 애니메이션 jank 해결하기 2편 : 여백 상쇄 이전 포스팅에서 다뤄봤던 Jank 현상은 앞서 말했던 방법으로 해결 가능하다. 그러나 더 간단한 방법이 있었으니... jank 현상이 일어났던 진짜 원인은 다른 데 있었다. 결론 결론 먼저 말하자면 여백 상쇄 현상을 제거하니 기존 코드에서도 jank가 발생하지 않았다. ...그런데 여백상쇄가 무엇일까? 이번에도 어렵게 돌아가기 스타트 margin collapse (마진 상쇄, 여백상쇄) margin collapse(이하 여백 상쇄)란, 수직으로 맞닿은 블록의 마진은 가장 큰 값으로 수렴한다는 뜻이다. 말이 더 어려운 것 같은데, 그림으로 살펴보면 다음과 같다. 위의 예시는 형제끼리 맞닿아 있을 때를 나타낸 것이고, 부모 자식 간에도 여백 상쇄가 일어난다. 부모와 자식이 맞닿아 있을 때에는 조금 특이한 현.. TIL/HTML CSS 2021.06.24 css 애니메이션 버벅거림(jank)해결하기 1편 오늘의 문제 내가 한땀한땀 예쁘게 만든 애니메이션... 코드는 문제 없는데, 실제 화면에서는 왜 덜덜덜거릴까? See the Pen jank-animation-before by ylem76 (@ylem76) on CodePen. 후후... 임베드한 코드펜에서는 왜 멀쩡해보일까? ^^... 이런 걸 뭐라고 하나요? css를 이용해 애니메이션을 구현하다보면 예상치 못하게 덜덜덜 거리는 걸 볼 수 있다. 이런 문제를 두고 쟁크(jank)라고 하고, 브라우저 렌더링 단계 중 리플로우(레이아웃)와 관계가 있기 때문에 리플로우라고 검색해도 관련 내용을 찾을 수 있다. 원인 화면 주사율 스크린 기기는 1초에 화면을 60번씩 그린다. (화면주사율이 60Hz이라는 뜻은 이걸 말한다.) 스크린 기기는 1초에 60번을 그리.. TIL/HTML CSS 2021.06.16 css display none 애니메이션 오류 수정하기 오늘의 문제 display:none; display:block; 에 transition 애니메이션이 적용되지 않는다! See the Pen display none animation1 by ylem76 (@ylem76) on CodePen. 메뉴를 마우스 오버했을 때 하위 메뉴가 보이고, 마우스 아웃하면 사라지는 흔한 메뉴. 간단할 것 같아서 css transition으로 구현하려고 하는데, 애니메이션이 뚝뚝 끊기고 안 예쁘다..!!! 어째서 이런 현상이 발생하는 건지 원인을 알아보고 해결 방법을 고민해보았다. 문제 분석 display none에서만 생기는 트랜지션 오류 화면에 보이지 않게 만드는 방법은 여러 가지가 있다. display:none; opacity:0; visibility:hidden; tr.. BLOG/TISTORY 2021.06.09 티스토리 개인 도메인 설정하기 시작은 .dev 도메인이 너무 멋져 보인 탓이다... 01 :: 도메인 구입하기 - 구글 도메인 선정 이유는 단순히 .dev도메인이 타 사이트보다 저렴해서 😂 구글 도메인 링크 Google Domains – Register Your Domain Name – Google Domains Find your place online with a domain from Google, powered by Google reliability, security and performance. domains.google 접속하면 한국에서는 서비스 지역이 아니라는 의미심장한 메시지가 보이는데, 이는 한국 국가 도메인(. kr 등등)을 지원하지 않는다는 얘기이다. 모든 서비스는 한국어로 이용 가능하다. 구매를 진행하다 보면 중간에.. 이전 1 2 3 다음