배너 이미지

웹

인터넷 익스플로러가 싫어요

인터넷 익스플로러가 싫어요

뭐 사실 인터넷을 제대로 쓰기 시작하면서 단 한 번도 좋아한 적은 없는 브라우저입니다만, 웹을 배우면서는 싫어하는 브라우저가 된 이젠 언급하기도 지치는 익스플로러입니다. 티스토리 스킨 만들던 초창기엔 인터넷 익스플로러는 지원하지 않는다는 문구를 친절히 넣어뒀지만, 어느샌가 그것도 귀찮아 그냥 되건 말건 신경도 안 쓰고 살았습니다. 그래도 티스토리 쓰던 시절엔 jQuery로 짠 소스가 많아서 페이지를 볼 순 있었는데,...
[티스토리] 인기글인지 확인하기

[티스토리] 인기글인지 확인하기

위 사진처럼 카테고리 글 목록, 검색 결과 등 글 목록이 표시되는 모든 부분에서 해당 글이 인기 글인지 확인할 수 있도록 하는 스크립트입니다. 응용하시면 본문에서도 활용 가능합니다. <s_sidebar_element> <!-- 이 블로그 인기글 --> <div class="popularPost"> <h3>이 블로그 인기글 </h3> <ul> <s_rctps_popular_rep> <li> <a href="[##_rctps_rep_link_##]" class="ImSoHot">[##_rctps_rep_title_##]</a> <span class="cnt">[##_rctps_rep_rp_cnt_##]</span> <s_rctps_rep_thumbnail> <img src="[##_rctps_rep_thumbnail_##]"/> </s_rctps_rep_thumbnail> <a href="[##_rctps_rep_category_link_##]">[##_rctps_rep_category_##]</a> </li> </s_rctps_popular_rep> </ul>...
[CSS, 자바스크립트]Material Ripple 효과 구현하기

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

요소를 클릭했을 때, 물결(Ripple)이 퍼져 나가는 것 같은 효과를 줄 수 있습니다. 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 @keyframes materialRipple { 0% { transform: translate(-50%, -50%)...
[CSS] 열리는 문 만들기

[CSS] 열리는 문 만들기

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

유튜브 썸네일 추출하기

Github 간편하게 유튜브 썸네일을 추출할 수 있는 웹앱입니다. 220428 업데이트 모든 썸네일 크기 렌더링하도록 수정 Shorts 썸네일 추출할 수 있도록 업데이트 210222 업데이트 png 이미지 제거 추출 버튼 클릭할 때마다 html 구조를 초기화하지 않도록 수정 original.jpg가 없는 이미지는 maxresdefault.jpg 출력 링크에 시간 등 옵션이 들어있을 때 썸네일이 제대로 출력되지 않던 오류 수정 Export Thumbnails 사용법...
190805 블로그 제작 일지

190805 블로그 제작 일지

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

[CSS] 텍스트 꾸미기

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

190731 블로그 제작 일지

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