티스토리를 포함한 웹사이트 제작, 수정, 꾸미기에 도움이 되는 유용한 사이트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

크롬북 / 크롬OS에 Brackets 설치하기1

시작에 앞서 크롬북은 윈도우즈나 맥북이 아닌 다른 OS를 사용하기 때문에 일반적인 설치 파일로는 프로그램을 설치할 수가 없다. 크롬북에서는 크롬웹스토어 또는 Play Store에 있는 앱 또는 프로그램만 쉽게 설치가 가능하다. 크롬북에서 html 외 여러 가지 코딩을 하는 사람 중 간단한 기능만 있으면 되며, 설치 방법이 아주 쉬운 프로그램을 찾는다면 아래 앱을 추천한다. Code Pad Text Editor An multi-language code text-editor crafted for the Chrome OS. Completely free to use and to modify under the GPL! chrome.google.com Bracket과 거의 동일하게 생긴 웹버전도 있다. Phoeni..

Tip/ETC 2023.01.09 1

이동식 에어컨 역 설치 후기 겸 팁 (베란다에 놓고 찬 바람만 실내로)

실외기 놓는 자리도 있고, 벽걸이 에어컨 놓을 자리도 있고, 벽걸이 에어컨도 있다. 그런데 이동식 에어컨도 있다. 하지만 이런저런 사정이 있어 번거롭게 이동식 에어컨을 설치하게 되었다. [이동식 에어컨 개조]라고 검색하면 대부분 실내에 듀얼 덕트로 설치하는 방법이 많은데 필자처럼 역 설치를 한 사람은 많지 않은 것 같아 몇 자 적어본다. 집에 창문이 긴 창문 밖에 없어 창문에 배기 호스 고정하는 부품이 짧아서 폼보드 10mm짜리 두장 사 와서 대충 만들었는데 요즘 폼보드 비싸더라.. 장당 10,800 총 21,600원.. 원래는 3장 정도 사서 샤시에 끼워 고정할 수 있도록 하려고 했는데 비싸서 두장만 샀더니 설치를 마친 지금 최종 결론은 3장을 살걸 그랬다. (폼보드가 우드락보다 더 튼튼하다고 한다. ..

Tip/ETC 2022.07.09

논글레어 (저반사) 모니터 스크레치 제거

어제 보조 모니터에 달아둔 모니터 조명이 떨어지면서 수직으로 패널에 하얗게 스크래치가 좌악 생겼다. 모니터를 켜면 보이지 않을 것이란 희망을 가지고 모니터를 켰으나 웬걸.. 더 잘 보이네? 하고 알아보니 답은 치약이었다. 손가락이나 부드러운 천에 치약을 조금 묻힌 뒤 스크래치가 난 방향을 따라 여러 번 문질러 주면 안 되는 것 같다고 포기할 때쯤 점점 스크래치가 줄어드는 것이 보인다. 그럼 조금 더 문질러 준 뒤 깨끗한 부드러운 천이나 휴지로 자알 닦아주면 깨끗해진다. 필자의 경우 논 글레어 필름 처리가 되어있는 모니터에서 발생한 일이었기에 글레어 패널에서는 지워질지 모르겠다. 참고로 사용했던 치약은 죽염 네추럴 프레쉬 허브 치약이다. 죽염 네츄럴프레쉬 허브 치약 ( 160g X 10개 ) COUPANG..

Tip/ETC 2021.09.29

동영상 필요 없이 바로 움짤 찌는 저용량 프로그램 ScreenToGif

움짤 사이즈, 프레임 설정하고 녹화 시작하면 끝. 아래 공식 사이트 링크에서 다이렉트로 프로그램 다운로드하여서 설치하거나, 마이크로소프트 스토어 통해서 설치하면 되며 무료다. 개인적으로 다운로드는 차후 업데이트 시에 마이크로소프트 스토어가 더 용이할 것 같아서 추천한다. GitHub - NickeManarin/ScreenToGif: 🎬 ScreenToGif allows you to record a selected area of your screen, edit and save it as a g 🎬 ScreenToGif allows you to record a selected area of your screen, edit and save it as a gif or video. - GitHub - NickeM..

Tip/ETC 2021.08.28

[Steam] 시티즈 스카이라인 구독 중인 모드 등 정리 (23.03.24)2

현재 보유중인 확장팩 = DLC (무료 제외) 애프터 다크 (After Dark) 스노우폴 (SnowFall) 자연 재해 (Natural Disasters) 대중 교통 (Mass Transit) 녹색 도시 (Green Cities) 파크 라이프 (ParkLife) 인더스트리 (Industry) 노을항(Sunset Harbor) 편의 이름 설명 Move It 어떤 객체든 원하는대로 이동, 높낮이 조절 Extra Landscaping Tools 브러쉬 모양 추가 Find It! 2 검색 Loading Screen Mod Revisited 1.1 로딩 빨라짐, 모드나 에셋 오류 등을 확인할 수 있음 위 링크는 원 제작자가 새 DLC인 [ 공항 ] 에 맞추어 업데이트를 하지 않아 오류가 나는 상황. 다른 제작자..

Tip/ETC 2021.08.05 2

HDMI포트 고장 또는 없어서 크롬캐스트 / 미박스 / 미티비스틱 사용하지 못할때1

모니터를 바꾸다가 아이디어가 떠올랐다. 왜 이 생각을 못 했을까? 우리 집 TV 두 대와 이제는 갈아치워진 LG ips236 모델의 공통점은 hdmi 포트가 고장이 나서 인식이 되지 않는다. 이 미 티비 스틱은 어머니를 위해 구매한 것이었는데 hdmi 포트가 고장 났을 거라고는 상상도 하지 못했다.. 그래서 그동안 내가 사용하고 있었는데 이제서야 방법이 생각난 거다. 이 사진같이 TV나 모니터에서 정상적으로 인식이 되는 포트 to hdmi 젠더를 쓰면 된다. 이 제품은 hdmi를 dvi로 변환해 주는 젠더이고 다이소에서 샀다. 모니터나 티비에 DP포트가 있다면 hdmi를 DP포트로 변환해주는 젠더를 구입하면 된다. DP포트가 없다면 hdmi나 dp포트가 아니라면 소리가 함께 전송되지 않으니, 티비나 모니..

Tip/ETC 2020.11.08 1

아마존 직구 APEX 택배 배송 조회2

직구 경험이 많지 않은 나로서는 택배가 언제 오나보다 미국에서 아무 문제(분실, 손상, 인터셉트 등) 없이 비행기를 타고 잘 오고 있는지 그것이 걱정되어 직배를 시키던 배대지를 시키던 항공편을 찾아 flightdar24에서 내 물건이 탄 비행기가 어디 있는지 실시간으로 보기도 하고 (이거 은근히 재밌음) 잘 도착해서 통관은 잘 진행되고 있는지 등 궁금하고 불안한 게 많다. (아마존 직배 5번의 경험 중 2번이 알 수 없는 이유로 배송이 중간에 멈춰 결국 구매를 할 수 없었다) 지난번에 아마존에서 직배 시켰던 커세어 K65 LUX RGB는 이렇게 조회하기 나쁘지 않았는데 이번에 걸린 APEX 택배사는 정말 조회하기가 나빴다. 아무리 검색을하고 시키는 대로 해봐도 2~3일 동안 비행기는 탔는지에 대한 정보를..

Tip/ETC 2020.10.22 2

색상 코드 만들기

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

Tip/Web 2020.10.21

한글 시계 - 감성 바탕화면 꾸미기

요즘 인테리어 용도로 유행하는 듯한 한글 시계가 PC용 프로그램이 있어 간략하게 소개하고자 한다. 윈도우 / 맥 / 안드로이드를 지원하는데 필자는 윈도우 버전만 사용해봤기 때문에 윈도우 버전 위주로 간단하게 소개한다. 처음엔 위젯 같은 건가 하고 월페이퍼 엔진 위에 사용할 수 있을까 했는데 불가능했다. 대신 월페이퍼 엔진에서 지원하지 않는 색다른 기능이 있어 감성 돋는, 덕질을 위한 나만의 바탕화면을 설정할 수 있었다. 기본적으로 가운데 한글 시계와 배경화면을 설정할 수 있으며, 듀얼 모니터 이상인 경우 각각 따로 설정이 가능했다. 폰트 사이즈 변경이 가능하고, 폰트 색상 변경은 화이트와 블랙 중 택 1, 위치는 무조건 중앙 고정이다. 한글 시계의 상 / 하 / 좌 / 우 중 한 곳에 간략한 문구를 넣을..

Tip/ETC 2020.10.13

windows10 테마 + 꾸미기1

포맷하고 오랜만에 윈도우를 조금 꾸며보려니 예전에 사용하던 프로그램이 어떤 것들이 있었는지 잊은 것들이 많아 정리차 작성하는 글이며 친절하게 하나하나 알려드리는 글은 아닙니다. 혹시라도 따라 할 사람이 있다면 무조건 가장 첫 번째로 복구 시점을 저장하고 하길 바라며, 필자는 1도 책임지지 않음을 알아두길 바랍니다. 사용한 프로그램 UltraUXThemePatcher (필수) - 윈도우10 테마 적용을 위한 패치 StartIsBack - 시작 버튼, 작업표시줄 커스텀 (유료) True Launch Bar - 작업 표시줄에 단축 아이콘 또는 플러그인 추가 (유료 / 무료 프로그램으로 Free Launch Bar가 있음) OldNewExplorer - 탐색기창을 예전 윈도우7 같이 심플하게 만들어줌 T-Clo..

Tip/ETC 2020.10.03 1

아마존 파이어 HD 가장 쉽고 빠른 초기 셋팅 방법 ( 런처 변경, 한글화, 구글 어시스턴트 / 루팅X )4

이 글은 내 amazon fire hd 8이 너무 버벅거려 공장초기화를 하고 다시 세팅하다 버벅거렸던 나를 위해 작성하는 간단한 글이며, 아마존 라이브 채팅을 통해 광고 제거 후 사용하고 있습니다. 초기 설정을 끝내고 아마존 런처 홈 화면이 나왔다면 1. 개발자 옵션 활성화 setting > device options > about fire tablet > serial number를 연속해서 계속 터치한다. (대충 10번) 다시 setting > device options > deverloper options > on을 눌러 온 시켜주고 > 스크롤을 아래로 내려 USB debugging을 눌러 온 시켜준다. 2. 이제 PC가 필요하다. [OFFICIAL][TOOL][WINDOWS] Amazon Fire ..

Tip/ETC 2020.04.30 4

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

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

Tip/Web 2020.04.07

크롬, 웨일 확장 프로그램 추천

추천에 앞서 필자는 웨일을 메인 브라우저로 사용하고, 여기서 부족한 기능만 확장 프로그램을 추가해 사용 중이며, 제가 사용 중인 확장 프로그램을 기록 겸 추천드리기 위해 간단하게 작성합니다. 웨일 브라우저 확장 프로그램 스토어에 있는 확장 프로그램은 웨일 전용이며, 크롬 확장 프로그램 스토어는 크로미움 기반 브라우저에는 공용으로 사용 가능합니다. ( 확장 프로그램 또는 브라우저에 따라 오류가 발생할 수 있음 ) 웨일을 네이버 아이디로 로그인해 사용 중인 경우 브라우저를 재설치하거나 다른 환경에서 설치하면 자동으로 이전에 사용하던 확장 프로그램이 설치됩니다. 웨일 브라우저 확장 프로그램 스토어 아래 소개드리는 확장 프로그램 외에도 다양하게 있으니 필요한 프로그램이 있는지 확인해보세요. 없을 경우 저어기 아..

Tip/ETC 2020.02.20