티스토리를 포함한 웹사이트 제작, 수정, 꾸미기에 도움이 되는 유용한 사이트2

더 다양한 사이트들이 있지만 제가 알고 있는 곳, 제가 사용하는 곳 위주로 정리하였습니다. 웹폰트 URL 특징 https://fonts.google.com/ 전세계 무료 폰트 https://noonnu.cc/ 한글 무료 폰트 아이콘 폰트 = 폰트 아이콘 URL 특징 https://fontawesome.com/ 폰트 어썸 가장 유명하고 지원하는 아이콘이 많음 https://fontawesome.com/v4/ 위 사이트의 구버전 https://themify.me/themify-icons https://fonts.google.com/icons 구글 머티리얼 http://xpressengine.github.io/XEIcon/index.html 구 제로보드 현 XE에서 제공 https://iconscout.com..

Tip/Web 2023.06.11 2

slick 슬라이드 플러그인의 responsive breakpoint를 px이 아닌 media query로 사용하는 방법

웹 접근성 향상을 위해 em, rem단위를 사용하자! 왜 em, rem으로 사용해야 하는가? 최근 티스토리 스킨 파일을 만들기 위해 필요한 것들을 미리 만들어두는 베이스 폴더(기초 스킨)를 리뉴얼하면서, 최신 트렌드, 새롭게 나온 CSS 기능, 바닐라 자 sweet-myo.tistory.com 이어지는 글입니다. 그런데 내가 스킨을 만들면서 빠지면 섭섭한 슬라이드 플러그인이 문제였는데 slick은 breakpoint 옵션을 이용해 px 단위로만 반응형을 설정할 수 있다. 위 글에서 이야기했듯, CSS에서 media query로 em값을 적용했는데 slick에서 breakpoint를 px값으로 적용하면 각각 다른 넓이에서 반응형이 적용되는 문제가 있는데 내 수준으로는 이를 해결할 방법이 없었고, windo..

Tip/Web 2023.06.08

웹 접근성 향상을 위해 em, rem단위를 사용하자!

왜 em, rem으로 사용해야 하는가? 최근 티스토리 스킨 파일을 만들기 위해 필요한 것들을 미리 만들어두는 베이스 폴더(기초 스킨)를 리뉴얼하면서, 최신 트렌드, 새롭게 나온 CSS 기능, 바닐라 자바스크립트에 대해 공부하던 중 아래 영상을 접하게 되었다. 프론트엔드 필수 반응형 CSS 단위 em 과 rem | 예제 프로젝트를 통해 정리 하세요 rem과 em 단위에 대해서는 알고 있었는데, 지금 생각해 보니 정확한 사용법을 몰랐고 em과 rem을 사용해야 하는 이유가 바로 웹 접근성 향상이었다. em과 rem이 뭔지 모르겠다면 위 영상이 정말 친절하고 알기 쉽게 알려준다!!!!! 웹 접근성 향상? em과 rem에 관련된 웹 접근성에 관련한 내용은 사용자가 브라우저에서 폰트 사이즈(글꼴 크기)를 변경 시..

Tip/Web 2023.06.08

색상 코드 만들기

See the Pen iro.js demo by James Daniel (@rakujira) on CodePen.

Tip/Web 2020.10.21

구글 애드센스 수익이 나지 않는 경우 또는 콘솔 창 에러

몇 달 동안 애드센스 수익이 0이어서 계속 광고를 다시 달고 이것저것 해봐도 나아지지가 않아 고민이었다. 이번에 스킨을 바꾸고 리뉴얼을 하면서 브라우저의 콘솔 창을 보니 애드센스에 오류가 있어 알아보니 구글 애드센스에서 제공하는 스크립트 소스를 약간 변경하면 된다고 한다. (adsbygoogle = window.adsbygoogle || []).push({ ~~ }); 구글 애드센스에서 제공하는 스크립트 소스가 위와 같다면 아래와 같이 변경해주면 된다. window.onload = function() { (adsbygoogle = window.adsbygoogle || []).push({ ~~~ }); } 변경 후에 뭐가 원인인지는 모르겠으나 애드센스 보고서에 페이지뷰 수가 현저히 줄었으나 광고가 개제 ..

Tip/Web 2020.04.07

[script] Snowflakes 눈내리는 스크립트1

See the Pen snow by Leo (@theLMGN) on CodePen. 123456789 var sf = new Snowflakes({ color: "#ffffff", // 색상 count: 75, // 갯수 minOpacity: 0.2, // 최소 투명도 0: 투명 | 1: 불투명 maxOpacity: 0.6 // 최대 투명도 });Colored by Color Scriptercs 제가 표기해 둔 설명 참고하셔서 수정 → 복사 후 위에 붙여넣기 하면 됩니다.

Tip/Web 2019.01.15 1

[script] 패스워드 설정 or 로그인 설정

위에 붙여넣기 소스보기하면 비번을 알 수 있는 치명적인 단점이 있음

Tip/Web 2018.12.29

[CSS] 텍스트 드래그 블러 효과

12345678910::selection{ color: transparent; text-shadow: 0 0 2px #블러색상; transition: all 250ms ease-in; } ::-moz-selection{ color: transparent; text-shadow: 0 0 2px #블러색상; transition: all 250ms ease-in; } Colored by Color Scriptercs

Tip/Web 2017.11.22

[script] 화면 전환 시 페이드 (로딩 시 부드럽게 화면 전환)1

1234567891011121314jQuery(function($) {$("body").css("display", "none");$("body").fadeIn(2000);$("a.transition").click(function(event){event.preventDefault();linkLocation = this.href;$("body").fadeOut(1000, redirectPage);});function redirectPage() {window.location = linkLocation;}});Colored by Color Scriptercs 1234567891011121314151617181920212223body{ animation: fadein 2000ms ease-out; -moz-ani..

Tip/Web 2017.11.08 1

[CSS] 텍스트 링크 롤오버 - 자간 넓히기

1letter-spacing:3px; transition-duration:0.8s;cs 3px - 글자간 간격 조절0.8s - 속도 조절

Tip/Web 2017.11.07

[CSS] 텍스트 드래그 색상 변경

12::selection { color:#폰트색; background:#배경색; }::-moz-selection { color:#폰트색; background:#배경색; } /* firefox */cs 2번째 줄은 파이어폭스 브라우저에 적용

Tip/Web 2017.11.07

[CSS] 텍스트 링크 롤오버 (라인)

1. 텍스트 중앙 라인 (취소선)1text-decoration:line-through;cs 2. 텍스트 위 라인1text-decoration:overline;cs 3. 텍스트 아래 라인1text-decoration:underline;cs 4. 텍스트 위아래 라인1text-decoration:overline underline;cs 5. 텍스트 위 중앙 아래 라인1text-decoration:overline underline line-through;cs 6. 텍스트 아래 웨이브 라인12text-decoration: underline; text-decoration-style: wavy; cs → underline 대신에 1,2,3,4,5 중 다른 속성을 적용 할 경우 해당 위치에 웨이브 라인 적용

Tip/Web 2017.11.07

[script] 마우스 따라다니는 거품

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816..

Tip/Web 2017.11.06

[script] 마우스 따라다니는 별가루

http://javascript-fx.com/mouse_trail/fire/demo1.html

Tip/Web 2017.11.06

[script] 마우스 따라다니는 별

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816..

Tip/Web 2017.11.06

[HTML] 검색 유입 차단

1234cs 전체구글네이버다음 사이에

Tip/Web 2017.10.11