[CSS, 자바스크립트]Material Ripple 효과 구현하기

[CSS, 자바스크립트]Material Ripple 효과 구현하기

요소를 클릭했을 때, 물결(Ripple)이 퍼져 나가는 것 같은 효과를 줄 수 있습니다. See the Pen Material Ripple by Marshall (@marshall-ku) on CodePen. HTML <a href="#" class="material-ripple">Click Me!</a> <a href="#" class="material-ripple" data-color="ff99ff">Custom Color</a> 엘리먼트에 material-ripple이란 class만 추가하시면 됩니다. ripple 효과에 특정 색상을 원하시면 data-color이란 속성을 만드신 후에 색상 코드를 추가하시면 됩니다.* 16진수 색상을 이용해주시고, #은 제외하고...
[CSS] 열리는 문 만들기

[CSS] 열리는 문 만들기

문을 두드려보세요! (닫으실 때도 문을 누르셔야 닫힙니다.) 깃허브 갤러리 정리하다 Knock Knock 티저 보고 생각나 급하게 만들어본 문입니다. ㅋㅋㅋ 문은 3d로 만들어보려다 데스크탑에선 딱 맞췄는데 화면이 작아지니까 입체로 만들려고 덧댄 부분들이 뒤틀리더라고요 ㅠㅠ 이건 시간 내서 제대로 해봐야 하지 않을까 싶습니다. Knock Knock 티저 비디오에서 문 두드리는 소리를 가져왔고, 문도 티저 이미지에서 ?만 잘라내서 사용했습니다....
유튜브 썸네일 추출하기 (JPG, PNG)

유튜브 썸네일 추출하기 (JPG, PNG)

애초에 유튜브 썸네일 확장자는 jpg라 이걸 억지로 png로 바꾸는 게 큰 의미가 있을까 싶긴 하지만, 예전 유튜브 썸네일 추출기를 업데이트해봤습니다. 깃허브 추출기 사용법 1. 추출기 링크를 클릭합니다. 2. 추출하고 싶은 비디오의 링크를 "주소를 입력해주세요"라 적힌 칸에 붙여 넣습니다. 3. "Export" 버튼을 클릭합니다. JPG 4. "Download" 버튼을 클릭합니다.5. 이미지를 우클릭 후 저장합니다. PNG 4. "Image" 아래의...
190805 블로그 제작 일지

190805 블로그 제작 일지

서버 .htaccess같은 파일은 외부에서 접근 자체를 막는 등 보안과 관련된 작업을 좀 진행했습니다. 워드프레스 테마 확실히 이젠 테마만 쥐고 있기보단 무슨 글을 쓸지 궁리를 해야 할 것 같은데, 마땅히 쓸만한 글이 생각나질 않네요 ㅠㅠ 홈 화면 슬라이더 슬라이더에 애니메이션을 추가했습니다. 예전엔 투명도만 변경되며 슬라이드가 넘어갔는데, 이젠 좌 / 우측으로 넘어다니는 애니메이션이 추가됐습니다. 딱히 쉽지만은 않았는데,...
[CSS] 텍스트 꾸미기

[CSS] 텍스트 꾸미기

TWICE TWICECHAEYOUNG 위 예시처럼 텍스트 배경에 그래디언트를 넣거나 이미지를 넣을 때 사용합니다. #element { -webkit-background-clip: text; color: transparent; } 보이는 것처럼, 꽤 간단하게 사용할 수 있습니다. -webkit-background-clip이지만, Firefox에서도 작동합니다. 텍스트를 선택하면 배경이 변경되니, 위 예시처럼 user-select: none과 함께 사용하시는 걸 추천합니다. 또한, 위 예시처럼 복잡한 이미지를 배경으로 넣으면 굉장히 산만한 효과를 연출할 수 있기 때문에,...
190731 블로그 제작 일지

190731 블로그 제작 일지

눈에 띄지 않는 자질구레한 업데이트가 많습니다. 예전에 적은 팁 중 옮길 게 있는가 확인하려고 티스토리를 들락날락하는 중인데, 속도도 훨씬 빠르고, 렉도 훨씬 덜해서 굉장히 만족스럽네요. ㅎㅎ 헤더에 블로그 제목 추가 PC에선 확인하시기 힘든 업데이트입니다. ㅠㅠ 예전엔 배너가 화면에 보일 땐 헤더가 텅 비어있다. 배너가 사라지면 제목이 헤더 중앙에 나타났는데, 이젠 배너가 화면에 보일 땐 블로그...
반응형 유튜브 비디오 만들기

반응형 유튜브 비디오 만들기

데모 페이지Github 위 비디오처럼 CSS로 요소를 특정 비를 유지하며 크기가 줄어들도록 하실 수 있습니다. .resvid { position: relative; width: 100%; padding-bottom: 56.25%; margin: auto } .resvid iframe { position: absolute; width: 100%; height: 100% } .resvid.alt { width: 35%; padding-bottom: 62.22% } .resvid.square { width: 70%; padding-bottom: 70% } .resvid.old { width: 80%; padding-bottom: 60%...
손님 댓글 수정 기능 업데이트

손님 댓글 수정 기능 업데이트

브라우저에 쿠키를 저장해서 30분 동안은 작성자가 댓글을 수정할 수 있도록 업데이트했습니다. 브라우저 쿠키를 사용해서, 사용자 환경이 달라지면 수정할 수 없습니다. 답글 버튼 옆에 버튼들이 추가됩니다. 답글 바로 오른쪽 버튼은 수정 버튼, 그 다음은 삭제 버튼입니다. 수정 버튼을 클릭하면 이렇게 댓글을 수정할 수 있는 창이 댓글 안에 생깁니다. 삭제 버튼은 그냥 댓글이 삭제됩니다. 해당 댓글에만 접근...
190721 블로그 제작 일지

190721 블로그 제작 일지

프론트엔드 카테고리의 이름을 웹으로 변경했습니다.백엔드 관련 글도 가끔 쓰는데, 카테고리를 따로 만들기보단 웹으로 통합하는 게 나아 보여서요. 이유는 모르겠는데 http:로 올라간 이미지가 있길래 수정했습니다.파이어폭스에선 보안 알림을 주는데 크롬에선 알림을 안 주네요;; 서버 업데이트 1. php 버전을 7.2에서 7.3으로 업데이트했습니다. 2. 이때까지 서버의 메모리 사용을 128M으로 제한해뒀더라고요. 4G을 넣어놓긴 했지만, 혹시 몰라 2048M으로만 설정해뒀습니다. 모자라다 싶으면...