베이킹소다 + 주방세제 + 식초 조합으로 만능세제 만들기 (스테인리스 연마제 제거하기)

이미지
이 만능세제를 만들게 된 원흉은 바로 알리발 텀블러 때문입니다. 단톡방에 싸게 좋은 물건 구매했다고 자랑좀 하려하는데 한분께서 스테인리스 제품에는 연마제라는게 있어서 그게 인체에 해롭다고 하더군요. 귀가 얇은 저는 순간 또 펄럭귀가 되었고 바로 알아본 결과 실제로 검게 묻어나는 녀석들을 확인할 수 있었습니다. 과연 이번에 구매한 텀블러도 같은 증상을 보일지가 궁금해졌기에 바로 실험을 해보았습니다. 먼저 베이킹소다입니다. 이건 다이소에서 쉽게 구매 가능합니다. 분말 형태와 액화 상태의 제품 두 가지가 있는데 여기에서는 분말 형태를 사용할 것입니다. 다른 녀석들과 혼합해서 사용할 목적 때문입니다. 나머지는 주방세제와 식초입니다. 이건 뭐 가정에 기본적으로 구비가 되어있죠? 이 세 가지 재료들을 1:1:1 비율로 섞습니다. 정확히 책량해서 섞을 필요 없어요. 그냥 대충 눈대중으로 섞어줍니다. 고무장갑을 착용하고 주물주물 섞습니다. 이렇게해서 만능세제가 완성되었습니다. 간단하죠? 세척할 사이즈에 따라서 양 조절을 하시면 되고요. 이제 타올과 만능세제로 세척할 대상을 박박 문지릅니다. 그러면 검게 묻어나는게 있을지도 몰라요. 저는 있네요. 역시 알리발 텀블러는 완벽하게 세척된 제품이 아니었던 겁니다. 그도 그럴것이 가격을 생각하면... 어떤 공정을 통해 완성되었을지 짐작이 됩니다. 더 늦기전에 발견해서 참 다행입니다. 연마제에는 탄화규소라는 인체에 유해한 성분이 포함되어 있어서 왠만하면 제거하는게 좋다고 생각합니다. 묻어나는게 거의 없을때까지 이 과정을 반복합니다. 참고로 식약처에서는 국내에서 사용되는 연마제 주성분이 스테아린산, 산화알루미늄이라고 하는데 이 둘은 인체에 해롭지 않은 원료라고 정의하고 있습니다. 국내는 뭐 그렇다 치고 알리 제품은 아니잖아요? 따라서 연마제를 제거하려면 이밖에도 식초물에 15분 정도 끓인 후

키보드 테스트 사이트 모음

이미지
어느날 키보드 중 특정키가 눌리지 않는 증상이 발생하게 되면 고민이 생깁니다. 이게 해당 프로그램에서만 인식을 못 하는 증상인건지, 아예 기기 결함인건지 파악을 해야 하죠. 즉 소프트웨어 문제냐? 하드웨어 문제냐? 의 고민인 것입니다. 이런 상황에서 요긴하게 활용할 수 있는것이 바로 키보드 점검 사이트입니다. 인터넷만 되면 바로 접속 후 뭔가 문제가 있는 특정 키보드를 하나 하나 눌러서 테스트 할 수 있습니다. 펀키스 키보드 테스트 https://funkeys.co.kr/bbs/page.php?hid=keytest 펀키스 키보드 테스트 페이지 키보드 점검을 해보세요! https://funkeys.co.kr 먼저 펀키스 공식 홈페이지에서 제공하고 있는 키보드 테스트 프로그램입니다. Hz도 측정되기에 키가 계속 눌리는지, 빠르게 인식되는지에 대한 부분도 확인 가능합니다. 마이크로폰 키보드 테스트 https://www.onlinemictest.com/ko/keyboard-test/ 마이크로폰 키보드 테스트 페이지 키보드 점검을 해보세요! https://www.onlinemictest.com 여기는 마이크로폰이라고 하는 웹페이지의 키보드 테스트입니다. 그야말로 키가 인식되는지에 대한 부분만 빠르게 점검이 가능합니다. 온라인 키보드 테스트 https://keyboard-test.space/kor/ 온라인 키보드 테스트 페이지 키보드 점검을 해보세요! https://keyboard-test.space

HTML 색상표 코드 참고 사이트 (+ VSC 색상 미리보기와 픽픽 팔레트 이용)

이미지
HTML을 편집하거나 제작하다보면 색상 수정하는 과정이 꽤 많이 발생합니다. 그러면 원하는 색상을 일일히 찾아보고 그것을 포토샵에서 스포이드로 찍어서 16진수 색상표를 살펴보는 사람들이 간혹 있더군요. 이번에 HTML 기초반을 그냥 재능기부차 열었는데 색상표를 불편하게 확인하시더라고요. 그래서 저가 사용하는 방법을 스윽 안내해 드렸는데 엄청 좋아하셨습니다. 의외로 쉬운 기능들을 잘 모르시는 분들께서 계시는 듯 하여 한번 더 온라인상으로 널리 퍼뜨려야겠다고 생각했고 그렇기에 이렇게 글을 작성하게 되었습니다. VSC 색상 변경 이건 뭐 대부분의 HTML 코드 편집기에 있는 기능입니다. 만약 없으면 별도의 확장 플러그인을 설치하면 됩니다. VSC의 경우에는 Color Picker 라고 검색하시면 관련 확장 프로그램이 엄청 많이 나올건데 그냥 가장 많이 다운로드받은 녀석으로 설치하시면 됩니다. 저는 VS Color Picker 라는 확장플러그인을 사용중입니다. VSC의 컬러 코드에서 마우스를 가만히 올려두면 이렇게 새로운 컬러 팝업창이 뜹니다. 여기에서 원하는 색으로 수정해서 사용하면 됩니다. 다만 단점이라고 한다면 16진수 코드가 아닌 RGB값으로 수정된다는 것입니다. 저는 16진수가 보기 편해서 이게 좀 거슬리더라고요. 물론 투명까지 고려하면 RGB가 훨씬 편합니다. 16진수의 경우에는 투명을 적용시키려면 opacity를 또 사용해야 하니까요. VS Color Picker 를 사용하면 위의 이미지처럼 나타납니다. 색상코드에서 마우스 왼쪽 클릭을 한 번 하면 잠시 뒤 매우 작은 색상표 팝업창이 뜹니다. 이때 파레트 모양 아이콘을 누릅니다. 그러면 많이 익숙한 UI가 뜹니다. 그렇습니다. 마이크로소프트에서 뭔가 색 변경할때 뜨는 그 창입니다. 이것으로 색상을 변경하면 16진수 코드 그대로 변경됩니다. RGB로는 변경되지 않습니다. 색상표 사이트

5초 뒤 자동 다운로드 링크 버튼 HTML + 자바스크립트 코드

이미지
이 코드는 N초 뒤 자동 다운로드되는 HTML과 자바스크립트 코드를 정리한 페이지입니다. 또한 자동 다운로드가 실패하면 수동으로 다운로드 할 수 있는 버튼도 같이 들어있습니다. 조만간 이걸 써먹을 것 같기에 한번 도전해 보려고 미리 구현을 해둔 것입니다. 컴퓨터에도 저장해뒀는데 역시 가장 좋은건 블로그에 기록해두는게 최고인 것 같아요. 왜냐하면 이 부분은 다른 사람들도 알고 있으면 좋을 것 같았기 때문입니다. 자동 및 수동 다운로드 HTML 코드 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29

유튜브 동영상 반응형 코드 (자바스크립트 없이 CSS 만으로 해결 가능)

이미지
생각해보니 구글 블로그(Blogger)에 유튜브 반응형 코드를 세팅하지 않았습니다. 티스토리는 자동으로 반응형으로 생성되는데 비해 블로거는 상당히 불편하죠. 모든게 수동입니다. 그나마 다행인건 구글의 플랫폼 중 하나가 유튜브이므로 블로거에서 유튜브 링크를 넣는 기능은 있습니다. 다만 이게 고정형으로 본문에 적용되는게 문제입니다. 가로 사이즈가 360px로 고정되요. 이것을 해결하기 위해서 CSS에 별도 세팅을 해줘야 합니다. Blogger에 YOUTUBE 영상 넣는 방법 일단 구글 블로그에 유튜브 영상을 본문에 넣는 방법입니다. 간단합니다. 글쓰기 메뉴 중 동영상 아이콘을 눌러서 YouTube로 들어갑니다. 동영상 추가 창이 떴습니다. 검색 탭으로 들어가서 원하는 키워드로 검색 후 사용하고자 하는 영상을 찾으셨다면 해당 영상을 누르고 왼쪽 아래의 선택 버튼을 누르면 본문에 들어가게 됩니다. 유튜브 영상 HTML 코드 그렇게 구글 블로거 본문에 들어간 유튜브의 HTML 기본 형태는 다음과 같습니다. 1 2 3 4 5 6 7 8 9 <

어도비 크리에이티브 시리즈 (포토샵, 일러스트레이터, 애프터이펙트, 프리미어프로, 인디자인 등) 40% 할인 소식

이미지
5월 가정의 달 맞이 어도비 코리아에서는 어도비 클라우드 전체 제품을 40% 할인된 가격에 세일을 실시합니다. 무려 40%입니다. 이런 기회는 사실 좀처럼 잘 없는 기회로 포토샵이나 일러스트레이터, 애팩, 프리미어프로등을 사용할 계획이 있으신 분들은 거의 반값 정도에 할인하는 이 시기가 절호의 기회일지도 모르겠습니다. 다시 한 번 정확한 날짜와 할인율을 요약해 알려드리겠습니다. 세일 소식 세일 기간 : 2024.5.15~30 (15일간) 할인율 : 40% 할인 기간 : 결제일 기준으로 결재 기간만큼 할인 적용 할인 기간의 경우에서 좀 더 설명드리자면 월 결제를 선택하셨다면 한달 동안만, 연 결제 방식으로 할인을 받으셨다면 1년 동안 할인된 금액으로 이용할 수 있는 것입니다. 이해 되시죠? 예를 들어서 오늘이 만약 할인 기간이고 1년치 결제를 미리 했다면 알으로 내년 이맘때즘까지 40% 할인된 금액으로 어도비 시리즈를 이용할 수 있는 것입니다. Firefly AI를 만나 더욱 강력해진 어도비 시리즈 AI가 대세입니다. 물론 아직 초창기이고 AI에 대한 많은 사람들의 인식이 아직 완벽하게 자리잡히지도 않고 법률적으로 컨트롤도 못하는 상황이다보니 잡음이 늘 끊이지 않습니다. 특히 저작권 문제로 말입니다. 하지만 법은 많은 이들에게 옳은 방향으로 흐르지 않습니다. 힘 있는 기업 편이에요. 그렇기에 지금 여러 기업들이 AI 기능을 받아들이고 적용시키는거 아니겠습니까? 이미 여러 기업에서는 AI를 활용한 로고라던지 기업 홍보 이미지를 제작하고 있습니다. 전문가에게 외주로 맡기는것 보다는 싸게 먹히기 때문입니다. 저는 기업이 아니기에 이런 AI 도입 부분을 무조건 좋게 보는건 아니지만, 시대의 흐름인지라 그래도 알아두고 배워두는게 맞다고 봅니다. 그래야 그에 맞는 적응과 대응을 할 수 있으니까요. 어도비 파이어플라이 공식 소개 영상인데 그냥 보

자바스크립트 마우스 DOM 이벤트 (onmouseover, onmouseout, onmousedown, onclick)

이미지
자바스크립트를 활용한 DOM 이벤트에 대한 설명글입니다. 가장 쉬운 형태로 마우스 이벤트가 있습니다. 특정 태그 영역에 마우스가 들어갔을 때, 빠져나왔을 때, 클릭하는 중, 클릭 완료 후의 이벤트를 별도로 지정 가능합니다. 어떻게 하는지 바로 알아봅시다. 미리보기 See the Pen JavaScript Mouse Event by rgy0409 ( @rgy0409 ) on CodePen . 일단 형태는 위와 같습니다. 빨간색 상자안에 마우스를 올려보세요. 텍스트가 변합니다. 이번에는 빠져나와보세요. 또 텍스트가 바뀝니다. 클릭하는 도중과 클릭 완료 후에도 텍스트 변화가 있습니다. 이렇게 각 4개의 상황이 각기 다릅니다. HTML 설명 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

브라켓(Brackets) 말고 이제는 피닉스 코드 (Phoenix Code) 사용하자

이미지
브라켓(Brackets) 또는 브라켓츠라고 불리우는 오픈소스 기반의 코딩 프로그램이 있습니다. 한때 어도비에서 공식 배포를 담당했다가 지금은 브라켓 개발사에서 자체적으로 배포를 하고 있고요. 정말 가볍고 좋은 코딩 프로그램이어서 지금까지 친효스킨도 만들고 구글 블로그 스킨까지도 만들었습니다. 브라켓으로요. 하지만 이따금씩 실시간 미리보기 오류로 시작해 살짝 아쉬운 기능 때문에 VSC를 같이 병행해 사용하는데 최근에 아~주 괜찮은 코딩 프로그램을 알아냈습니다. 브라켓 개발사에서 새롭게 출시한 피닉스 코드 (Phoenix Code) 라는 코딩 프로그램입니다. 기존 브라켓 UI, UX를 그대로 계승한 프로그램이에요. 사실상 브라켓2 라고 해도 과언이 아닙니다. 심지어 확장 플러그인도 같아요. 물론 피닉스 코드에서는 미지원인 플러그인이 몇 개 있긴 하지만 왠만한 유명 플러그인은 기본으로 들어있기도 하고 설치가 거의 가능해서 큰 불편함이 없습니다. Phoenix Code Download 피닉스 코드 다운로드 Phoenix Code 브라켓을 잇는 피닉스 코드 https://phcode.io/ 위의 공식 홈페이지에서 다운로드 받을 수 있습니다. 두 가지 플랫폼이 있는데 하나는 웹기반이며 다른 하나는 PC 설치형 프로그램입니다. 웹기반을 사용하시면 별도의 프로그램 설치없이 바로 웹에서 코딩을 즐기실 수 있습니다. 하지만 저는! 프로그램을 따로 이용하는걸 좋아하기에 피닉스코드를 별도로 다운로드 받아서 실행했습니다. 다운로드 버튼의 옵션 화살표 아이콘을 눌러보시면 현재 사용중인 OS 운영체제 버전별로 프로그램을 다운로드 받을 수 있습니다. 설치 과정에서는 특별히 중요한 과정이 없으므로 설명은 생략합니다. 그냥 설치하시면 됩니다. 피닉스 코드 편집기는 차세대 Brackets 편집기라고 아예 대놓고 설명을 하고 있어요. 아무래도 다

브라켓 플러그인 백업 및 복원 방법 (Brackets Plugin Backup & Restore)

이미지
브라켓 전체 환경설정까지는 아니더라도 그동안 설치해둔 플러그인만 따로 백업할 수 있다면 정말 획기적이지 않겠습니까? VSC(비쥬얼 스튜디오 코드)의 경우에는 별도로 Github과 동기화가 되기에 로그인만 하면 자동으로 동기화를 해줘서 백업/복원이 엄청 쉽습니다. 브라켓은 아직 이렇게까지는 어림도 없고요. 얼른 동기화 기능이 추가되었으면 좋겠는데 말입니다. 아니면 깃헙과 동기화를 해줘도 좋고요. 최근에 노트북을 교체하면서 기존 노트북의 브라켓 환경을 가지고 와야만 하는 상황이 생겼습니다. 그동안 설치한 브라켓 플러그인 목록만 스크린샷 후 다시 새로운 PC에서 수동 설치하면 되지만 귀찮잖아요? 그래서 이걸 한방에 해결하는 방법을 찾았습니다. 이것만으로도 시간 단축을 엄청나게 할 수 있게 되었죠. Extensions Bulk Installer 설치 및 백업 가장 먼저 할 일은 백업하고자 하는 브라켓에서 Extensions Bulk Installer 라고 하는 플러그인을 설치하는 것입니다. 이 플러그인의 역할은 지금까지 설치된 브라켓 플러그인을 리스트화 합니다. JSON으로 뽑아주죠. 말로는 설명의 한계가 있으니 바로 따라해 보실까요? 먼저 브라켓 플러그인 설치 아이콘을 누릅니다. 레고 모양 아이콘이죠? 설치 가능 카테고리로 들어가서 검색창에 Extensions Bulk Installer 를 입력 후 해당 플러그인을 설치합니다. 설치 완료 후에는 브라켓을 재부팅합니다. 이제 파일 메뉴를 눌러보시면 방금 설치한 Extensions Bulk Installer 가 목록에 보일겁니다. 눌러서 실행합니다. 단축키는 Ctrl + I 입니다. 그러면 브라켓 화면의 아래쪽에 새로운 창이 보이게 됩니다. 보시면 뭐 별거 없죠? 오른쪽에 해당 플러그인의 히스토리가 있고 왼쪽에는 내보내기와 가져오기 버튼만 있습니다. 이게 정상입니다. 먼저 Export to File 버튼을 누릅니다. 저장할 경로를 지정하면 이렇게 myExtensionsList

스타벅스 로고 SVG HTML 코드 (풀버전 + 심플버전)

이미지
안녕하세요. 오늘은 스타벅스 로고를 SVG 파일로 변환 후 HTML 코드로 표현해 보았습니다. 코드는 늘 그렇듯 코드팬에 올려두었습니다. 두 가지 버전이 있습니다. 글씨까지 들어있는 풀 버전이 있고 다른 하나는 사이렌 로고만 있는 심플 버전입니다. 하나씩 살펴보시기 바랍니다. Full Version See the Pen Starbucks_LOGO_FULL by rgy0409 ( @rgy0409 ) on CodePen . HTML 코드를 전체 복사 후 사용하시면 됩니다. Simple Version See the Pen Starbucks_LOGO_Simple by rgy0409 ( @rgy0409 ) on CodePen . 이것도 마찬가지로 코드 전체를 복사 후 사용하시면 됩니다. SVG 파일 만들기 스타벅스 로고는 아무래도 복잡합니다. 그래서 코드도 많아요. 따라서 이 코드를 다 쓰는것보다는 SVG 파일로 제작 후 해당 파일을 img 처럼 사용하는것이 효율적일지도 모릅니다. SVG 파일로 만드는건 간단합니다. 1. HTML 모든 코드를 전체 복사 함 2. 메모장에 붙여넣기 함 3. 저장 시 파일 확장자를 SVG로 저장함 이게 답니다. 간단하죠? 응용하기 이제 SVG 파일로 저장했으므로 해당 파일은 img 태그를 사용해서 편리하게 활용하시면 됩니다. 그냥 이미지 파일이라고 생각하고 사용하면 됩니다. 이런식으로 가로 크기만 지정해주면 원하는 크기대로 변경 가능합니다. SVG 이미지는 백터 방식이기에 크기를 확대해도 절대 이미지가 픽셀처럼 깨지지 않는 장점이 있습니다. 따라서 웹 기반에서 사용하기에 매우 안성맞춤인 이미지 포맷입니다. 오늘 내용 끝!