190406 장안사
190406 장안사

jQuery 에 관한 짧은 생각
jQuery 에 관한 짧은 생각

jQuery로 짠 스크립트 바닐라로 짠 스크립트 + $(html)을 A로 지정해둬서 그냥 banner-actv란 class를 가졌는지 확인하는 if문은 둘 다 jQuery를 사용했다. 지금까지는 jQuery를 별생각 없이 애용해왔다. 비전공자인 내가 보기에도 굉장히 간단하고, 많은 플러그인이 제이쿼리 기반으로 만들어져서 공유되고 있어 실력을 늘리는데도 아주 많은 도움이 됐다. 하지만 최근 꽤 많은 수의 개발자들이 jQuery를 못마땅해 한다는 사실을 알게 됐다. 2년쯤 전부터 국내에서도 jQuery를 탈피하려고 노력하는 사람이 있던데, 꽤 늦게 안 셈이다. 꽤 오래전 우연히 "You might not need jQuery"란 사이트를 방문하게 된 적이 있는데, 그땐 무심코 넘겼다가 최근 문득 'jQuer..

[JS] 생일까지 남은 날짜 계산하기
[JS] 생일까지 남은 날짜 계산하기

Github Demo 자바 스크립트를 이용해 생일까지 남은 날짜를 계산하는 방법입니다. 날짜만 설정하면 D-day에 Happy Birthday!란 메시지를 출력해주고, D-day 다음 날부터는 자동으로 내년으로 D-day를 변경합니다. 스크린 샷에서 아실 수 있듯, 초 단위로 표시해주며 0.5초마다 html의 내용을 갱신합니다. 굳이 초 단위는 필요 없으시면 초와 관련된 js를 제거하시고 갱신 주기를 늘려주세요. HTML 남았습니다! JS var v = new Date().getFullYear(), z = new Date("Apr 23, " + v + " 00:00:00").getTime(), x = setInterval(function() { var f = new Date().getTime(), g =..

190403 티스토리 스킨 #11 제작 일지
190403 티스토리 스킨 #11 제작 일지

아무래도 티스토리 메뉴바를 그냥 보여주는 건 영 별로인 것 같아 수정했습니다. 프로필 메뉴예전엔 드랍다운 메뉴로 보여줬지만, 이젠 왼쪽 드로워와 같은 방식으로 표시됩니다.마찬가지로 뒤로 가기 버튼을 누르면 사라집니다. 기타- 페이지를 최초로 불러올 때 잠깐 페이지가 버벅인단 느낌을 받았는데, 원인이 유튜브 썸네일을 불러오는 스크립트였습니다. 일단 해당 스크립트를 껐다 켤 수 있는 방향으로 수정했습니다.- 커버에 나오는 유튜브 영상을 조금 더 편하게 수정할 수 있도록 수정했습니다.- 드로워를 여는 버튼에 애니메이션을 적용했습니다.- 기타 잡다한 오류를 수정했습니다.

[CSS]그래프 만들기
[CSS]그래프 만들기

css를 이용한 그래프입니다. 페이지를 불러왔을 때 너비 0부터 본인의 너비까지 확장되는 애니메이션이 있습니다. 5부터 100까지 5의 배수들만 작업했습니다. See the Pen Graph by Marshall (@marshall-ku) on CodePen. html에선 item1등의 class, css에선 li.item1::after 등을 수정하셔서 사용하시면 됩니다.

채영 생일 D-Day
채영 생일 D-Day

채영 생일 카운터입니다. 슬라이더엔 무작위로 이미지가 나옵니다. 스크립트 갱신 필요 없이 4월 23일이 지나면 다음으로 다음 해 생일의 D-day를 보여줍니다. 째용의 생일까지... 남았습니다!

CSS만 이용한 사이드바 만들기
CSS만 이용한 사이드바 만들기

css만 이용한 사이드바입니다. 드로어(Drawer)라고도 부르고 사이드바라고도 부르고 뭐라 불러야 할 질 모르겠네요..;; 보통 css를 이용한 사이드바는 버튼을 클릭하면 열고 닫히는 게 끝인 게 많은데, 아래 코드를 이용하시면 사이드바가 아닌 공간 아무 곳이나 클릭해도 사이드바가 사라집니다. See the Pen Pure CSS Drawer by Marshall (@marshall-ku) on CodePen. 여담이지만, 첫 코드펜 게시글입니다 ㅎㅎ css에서 ~ 의 의미는, 앞 요소와 뒷 요소가 같은 부모 요소를 갖고 있으면 물결표 앞 요소의 뒤에 이어지는 요소를 선택합니다. 만약 openbtn이나 체크박스의 위치를 변경하셨다면, 부모 요소를 잘 확인하셔야 제대로 작동합니다.

[JS, CSS] 유튜브 등의 비디오를 반응형으로 감싸기
[JS, CSS] 유튜브 등의 비디오를 반응형으로 감싸기

앞서 작성한 요소를 일정 비로 감싸기와 유튜브 세로 영상 퍼오기를 확인하시면 더 간단히 이해하실 수 있습니다.Github 링크 가장 기본적인 16:9로 감싸는 건 유튜브 뿐 아니라 카카오 TV, 네이버 TV 등도 지원합니다.하지만 9:16 비디오, 4:3 비디오, 1:1 비디오 등은 유튜브에서밖에 테스트하지 않았습니다. 작동 확인은 여기서 하시거나 아래 이미지 목록을 펼쳐주세요. JS1234567891011121314151617181920$("iframe").each(function() { var a = $(this).attr("width"), b = $(this).attr("height"); if (a / b === 16 / 9) { $(this).wrap("") } if (a / b === 9 / 1..

트와이스 프로필 페이지 2가지 버전
트와이스 프로필 페이지 2가지 버전

github 만든 기념으로 올릴만한 거 뭐 있나 생각하다 올려봤습니다. 총 두 가지 버전이 있습니다. 이미지 출처 : http://twice.jype.com/profile.asp Parallax Scroll https://github.com/marshall-ku/about-twice 배경이 고정된 채 스크롤 되며, 왼쪽 (모바일에선 아래)에 어느 멤버를 보고 있는지 표시되는 버전입니다. 예전부터 올려놓은 방식이지만, 변경 점이 조금 있습니다. 모바일에서도 PC와 똑같은 효과를 볼 수 있도록 업데이트했습니다. 스크립트를 조금 다듬었습니다 Carousel https://github.com/marshall-ku/Slider 제 커버에도 들어간 슬라이더를 사용한 버전입니다. 5초마다 자동으로 다음 페이지로 넘어..

스킨/스킨 목록
잡담
갤러리