본문 바로가기

분류 전체보기

 (179)
#8. iframe youtube 썸네일을 이미지 주소로 가져오기 iframe으로 youtube 동영상을 끌어오고 싶은데 동영상 재생 화면이 아니라 썸네일로 끌어오고 싶다 youtube 썸네일을 따로 캡처하거나 수동으로 뭔가를 하지 않고 바로 이미지 주소를 끌어올 수 있다 https://www.youtube.com/embed/FNF_a8D2UEc 이렇게 youtube 주소가 있을 때 가장 뒤에 있는 저 값을 https://img.youtube.com/vi/FNF_a8D2UEc/0.jpg 이 위치에 넣어주면 자동으로 썸네일을 보여준다 위 아래 검정색 띠가 생기는데 이게 싫다면 아래를 사용한다 https://img.youtube.com/vi/FNF_a8D2UEc/mqdefault.jpg
#7. 맥북 화면 녹화 어플, 맥북 gif 생성 어플 GIPHY CAPTURE 맥북에서 화면을 녹화해서 gif로 만드는 무료 어플이 필요해서 사용하게 된 GIPHY CPATURE 이 녹색 프레임 안에 들어오는 화면이 녹화된다 이렇게!
[#CSS] iframe 유튜브 영상 첨부 시 비율에 따라 크기 조절하기 유튜브 영상을 첨부하려고 하는데 반응형으로 영상 프레임 크기가 늘어났다, 줄어들었다 했으면 좋겠다 js를 쓰지 않고 css만 이용해서 설정해보자 html iframe width, height 비율 설정하기(with shab) css .video-list ul li { position: relative; padding-bottom: 55%; overflow: hidden; } .video-list ul li iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } 기기 혹은 웹에 따라 자동으로 크기가 비율로 조절된다
[#CSS] Swiper 슬라이드 생성하기, 이미지 슬라이드, 유튜브 슬라이드 가로로 슬라이드할 수 있는 이미지 슬라이드를 사용하려고 한다 swiper를 쉽게 사용해보자 swiperjs.com/demos/ Swiper Demos swiperjs.com ⑴ 설치 ① CDN으로 사용 ② NPM 설치 npm install swiper // import Swiper JS import Swiper from 'swiper'; // import Swiper styles import 'swiper/swiper-bundle.css'; const swiper = new Swiper(...); 둘 중 편한 방법으로 설치한다 ⑵ html Slide 1 Slide 2 Slide 3 ... ⑶ script var mySwiper = new Swiper('.swiper-container', { // Opti..
[#JavaScript] checkbox toggle 체크박스 토글, 이메일 로그인/핸드폰번호 로그인 ① HTML 휴대폰 번호로 로그인 로그인 ② Script // 비밀번호 input focus/focusout에 따라 border-bottoer 변경 $(".pw-wrap input").focus(function() { $(".pw-wrap").css("border-bottom", "1px solid #2299f2"); }); $(".pw-wrap input").focusout(function() { $(".pw-wrap").css("border-bottom", "1px solid #dee0e4") }); // 눈 모양 아이콘 클릭 시 비밀번호 입력한 부분 보이게 하기 $("#eyes").click(function() { $(".pw-wrap input").toggleClass("active"); if($..
[#JavaScript] 버튼 전체 동의 체크박스, 체크 및 체크 해제 각각의 체크박스 선택 시 체크, 체크 해제 그리고 전체 동의 버튼 클릭 시 전체 체크, 전체 체크 해제 약관에 모두 동의합니다. 이용약관 동의 [필수] 보기 마케팅 약관 동의 [필수] 보기 $("#chk-all").click( function() { var checkedVal = $(".chk").prop("checked"); $(".chk").prop("checked", this.checked); if($("#chk-all").prop("checked") == true) { $(".check-msg").css("color", "#43494f"); } else { $(".check-msg").css("color", "#b0b5c1"); } }); $(".chk").on("click", function()..
[# Git] 새 브랜치 branch 생성하기, 커밋 commit 하기, 원격 저장소에 push 하기 ① branch 생성 git branch ② 생성한 branch로 이동 git checkout branch 생성, 이동(-b 옵션) git checkout -b ③ 변경 파일 추가 git add ④ 변경 내용 commit git commit -m "commit message" ⑤ 로컬에서 생성한 branch를 원격 저장소에 추가, push git push --set-upstream origin git push --set-upstream https://github.com/shab8/[repository명].git master 수정한 코드가 새로 만든 branch에 잘 올라간 것을 확인할 수 있다 이후 코드 수정 후 push하기 전에 git pull 먼저 하는 것을 잊지 말자
[#Atom] Atom Package 아톰 필수 패키지 설치하기(21/1/11 업데이트) atom-beautify 탭이나 코드 간격이 일정하지 않은 코드를 정리해줘서 가독성을 높여준다 pigments RGB 색상 값을 입력하면 색상을 보여준다 autoclose-html HTML 태그를 입력하면 시작 및 종료 태그를 자동으로 입력해준다 language-vue vue.js 지원 일단 기본적인 패키지들만 설치했고, 향후에도 추가할 예정이다

티스토리툴바