그냥, 일단 써내려가자

안녕하세요 :) 무택입니다🧔 오늘 알아볼 기능은 요즘 핫한 키워드 chatGPT를 조금 더 효과적으로 사용할 수 있는 방법입니다. 바로 프롬프트 지니 확장 프로그램을 이용하는 건데 chatGPT를 사용할 때 간편하게 바로 번역을 해서 질문해주기 때문에 더 높은 퀄리티의 답을 얻을 수 있습니다. #영어로 질문해야 하는 이유? chatGPT는 학습된 내용들을 바탕으로 사용자의 질문에 답변을 해준다 » 학습된 내용들이 전세계 기준이기 때문에 영어로 학습된 내용들이 대부분이다 » 영어로 질문해야 chatGPT의 제대로 된 기능을 사용할 수 있다. 그럼 크롬에서 어떻게 프롬프트 지니를 확장프로그램에 추가하는지 아래를 참고해 주세요. 1. 구글 웹스토어를 검색해서 들어간다. 2. 프롬프트 지니를 검색해서 오른쪽 배..

안녕하세요 :) 무택입니다🧔 이번에 알아볼 기능은 카톡에서 chatGPT를 활용할 수 있는 챗봇 'AskUp(아숙업)'에 대해 알아보려고 합니다. 아숙업은 인공지능(AI) 스타트업인 업스테이지가 개발한 챗봇으로 chatGPT기능과 더불어 업스테이지만의 OCR(광학문자인식기술) 기술을 더해서 어떻게 보면 활용성이 더 넓어진 챗봇입니다. 그런데 이 챗봇을 카톡에서 쉽게 활용할 수 있다고 하니 한번 살펴보도록 하겠습니다. 1. 친구 탭에서 검색을 눌러줍니다. 2. 아숙업을 검색해서 채널을 친구추가 합니다. 3. 대화방을 들어가 보면 주의사항이 나옵니다. 1. AskUp은 2021년 10월 이전 데이터로 학습된 Open AI의 모델로 실시간성이 없습니다. 2. OpenAI가 제공하는 답변이 부정확하거나 부적절할..

안녕하세요 :) 무택입니다🧔 이번에 알아볼 기능은 가끔 웹페이지에서 마우스커서가 기본 커서가 아니라 커스텀 커서인 경우를 볼 수 있는데 바로 그 기능, 마우스커서 커스텀 변경 기능입니다. 일반적인 경우에는 사용하지 않지만 브랜딩이 잘 되어있거나 자신만의 색깔을 나타내고자 할 때 사용하면 좋은 기능이라고 생각합니다. 잘 사용하면 효과를 볼 수 있지만 잘 사용하지 못하면 오히려 마이너스인 경우가 많은 것 같아요. HTML 텍스트 텍스트 CSS .top {width: 100%; height: 150px; background: #555;} .middle {width: 100%; height: 150px; background: #999;} .top:hover { cursor : url(https://i.ibb.c..

안녕하세요 :) 무택입니다🧔 오늘은 제가 사용하는 유용한 캡처 프로그램을 공유해 드리려고 합니다. 'Lightshot'이란 프로그램인데 회사에서 업무를 하다 보면 캡처를 사용할 일이 정말 많더라구요. 그래서 윈도우 기본 캡처 도구도 사용해 봤는데 사용성이 별로라서 찾아보다가 발견한 프로그램입니다. 이 프로그램의 장점은 편의성입니다. 키 하나로 캡처 기능을 실행하고 캡처하고 Ctrl+C로 바로 복사도 가능해서 정말 정말 편의성이 좋아요! 먼저 프로그램 설치 링크입니다.https://app.prntscr.com/en/index.html Lightshot — screenshot tool for Mac & Win app.prntscr.com 위 링크로 들어가서 맥 or 윈도우 운영체제에 따라 설치하시면 됩니다...

안녕하세요 :) 무택입니다🧔 오늘 알아볼 내용은 자바스크립트에서 많이 사용되는 classList 메소드에 대한 내용입니다. add, remove, toggle 등 활용 방법이 다양하고 비교적 간단하게 사용할 수 있어 자바스크립트 기능 중에 꼭 알아둬야 할 메소드인 것 같습니다. 목차 가. 코드 나. codepen 예제 다. classList 설명 코드 HTML - add테스트 add 활성화 remove테스트 remove 활성화 contains테스트 contains 활성화 replace테스트 replace 활성화 toggle테스트 toggle 활성화 CSS - * { padding: 0; margin: 0; list-style: none; } li{ margin-block: 20px; } .pink { c..

안녕하세요 :) 무택입니다🧔 오늘 알아볼 기능은 바로 모자이크 기능입니다. 어딜 가나 사진을 찍으면 다른 사람의 얼굴이 나올 수밖에 없죠. 그냥 개인 보관용이면 상관이 없는데 상업적으로 사용하기 위해선 초상권 보호를 해줘야 합니다. 요즘에는 어플들이 잘 나와서 쉽게 해결이 가능한 경우도 많지만 역시 클래식한 포토샵에서는 어떻게 모자이크를 하는지 알아보려고 합니다. 정말 간단하니 포토샵을 켜고 하나하나 같이 따라 해보세요🙋‍♂️ 1. 오늘 사용할 이미지입니다. 2. 포토샵에서 '선택'툴을 선택해주세요. 모양은 원하는 모양으로! 3. 모자이크 처리하려고 하는 부분을 드래그해 줍니다. 4. 선택되었다면 편집하려는 레이어가 제대로 선택되어 있는지 확인하고 '필터-픽셀화-모자이크'를 눌러줍니다. 5. 그럼 아래처..

안녕하세요 :) 무택입니다🧔 오늘 알아볼 기능은 포토샵을 이용해서 영상을 gif로 변환하는 기능입니다. gif가 자주 필요하진 않아도 가끔 필요할 상황이 있는데 그럴 때를 위해서 따라 해 보시면 좋을 것 같습니다. 어렵지 않고 간단하니 아래대로 같이 따라 해 주세요. 01. 동영상 파일을 포토샵으로 드래그해서 열어줍니다. 02. 아래처럼 타임라인 탭이 자동으로 생겨야 정상입니다. 03. 타임라인 탭에서 영상 오른쪽 부분에 마우스를 올리면 영상의 길이를 조절할 수 있습니다. 04. [파일 - 내보내기 - 웹용으로 저장]을 눌러줍니다.(Ctrl + Shift + Alt + S) 05. 저장 옵션을 GIF로 선택하고 저장을 눌러주면 저장이 됩니다. #. 부가적인 옵션으로 1번 디더는 깨지는 정도를 조절합니다...

안녕하세요 :) 무택입니다🧔 오늘 알아볼 기능은 Opacity와 Fill의 차이가 무엇인지입니다. 실무를 하다 보면 Opacity를 사용하는 일이 정말 많은데 Fill을 이용하는 경우는 그렇게 많지 않은 것 같습니다. 하지만 Fill을 사용하는 경우도 있을 수 있으니 어떤 기능을 하는지 같이 알아봅시다. 1. 먼저 두 개의 박스를 만들어 줍니다.(귀여운 북극여우는 귀여워서 넣었습니다..) 2. 여기에 하나는 박스에 테두리 선(1번)을 하나는 레이어 스타일에서 선(2번)을 추가해 줍시다. 3. 그리고 각각 Opacity와 Fill을 설정하면 어떻게 될까요? 1번은 박스 전체의 투명도가 조절이 되었고 2번은 레이어스타일은 그대로 두고 박스의 투명도가 조절이 되었습니다. 이처럼 Opacity와 Fill의 차이..

안녕하세요 :) 무택입니다🧔 오늘 리뷰해 볼 제품은 '야스트 가죽 데스크패드(80x40)'입니다. 작년 9월에 쿠팡에서 구입해서 거의 6개월 넘게 사용하고 있는 제품입니다. 총 두 번 구입했는데 22/9, 23/4 쿠팡 기준으로 12,000원에 구입하였습니다. 색상은 라이트 그레이로 어디든 잘 어울릴 것 같은 색상입니다. 너무 어둡지 않아서 밝은 분위기를 내는데 좋고 인테리어 제품으로도 훌륭한 것 같습니다. 제품은 이렇게 세로 40cm정도의 패키지에 오는데 튼튼하게 잘 포장되어서 옵니다. 패키지에는 한글이 없고 영어만 써있는데 해외 수출도 생각한 건지 해외 제품이라고 해도 믿을 것 같습니다🤔 처음에 구입할 당시 장패드를 구입하려고 했는데 '세련되어보이고 내구성 좋은 제품'을 많이 서치했었는데 이 제품이 ..

안녕하세요 :) 무택입니다🧔 오늘 알아볼 내용은 반응형 페이지 작업 시 필요한 미디어쿼리 브레이크 포인트에 대한 내용입니다. 먼저 브레이크 포인트란 사용자들의 스크린 가로 사이즈가 몇 px인지에 따라 보여줄 내용을 변경시키는 지점을 말합니다. 보통 실무에서는 반응형 페이지를 작업한다고 하면 pc, 태블릿, 모바일 세 가지로 나누게 됩니다. 저는 보통 브레이크 포인트를 아래처럼 설정합니다. /* 테블릿 (해상도 768px ~ 1199px)*/ @media all and (min-width:768px) and (max-width:1199px) { ... } /* 모바일 (해상도 360px ~ 767px)*/ @media all and (min-width:360px) and (max-width:767px) {..