그냥, 일단 써내려가자

안녕하세요 무택입니다 :) 오늘은 로딩화면에 대해 써보려고 합니다. 국내에는 로딩화면을 쓰는 사이트가 많지는 않은 걸로 알고 있습니다. 하지만 해외 사이트를 돌아다니다 보면 로딩화면을 구현한 사이트를 자주 접하는 것 같습니다. 여기에 대한 이유는 아래에서 설명드리겠습니다. 로딩화면이 필요성 사이트의 소스들(이미지, 영상, 스크립트 등)이 많아서 무거운 사이트의 경우 사이트에 들어가면 화면이 모두 다 불러와지는 데까지 시간이 소요됩니다. 1초에서 길면 10초까지 걸리는 사이트들이 있는데 시간이 1초 정도만 넘어가더라도 사용자는 지루함을 느낄 수 있습니다. 시간이 더해질수록 기다리지 않고 사이트를 이탈하는 경우가 많아지죠. 이런 이유에서 어쩔 수 없이 사이트가 무거워지는 경우 로딩화면을 구현함으로써 기다림을..

안녕하세요 무택입니다 :) 오늘은 포토샵 베타버전에서 사용할 수 있는 생성 채우기 기능을 써보고 든 생각을 공유해보려고 합니다. 아직은 상업적 사용이 불가하기때문에 실무에서는 사용하기 힘들어 보입니다. 이미지 적용 왼쪽이 적용 전, 오른쪽이 적용 후입니다. 체험 삼아 써본 거라 이상한 명령어들은 많이 입력해 봤습니다. 생성 명령어 느낀 점 1. 단일 단어로 입력하는 게 잘 만들어준다.(bird, car, cat, tree..) 근데 원하는 분위기, 모양으로 생성하려면 잘 안 나오는 경향이 있는 것 같다. 2. 사람이나 생물은 잘 나오는 경우가 정말 드물다. 특히 사람은 아직은 자연스럽게 만들기가 힘들어 보인다(얼굴, 손가락, 신체 구조 등) 뭔가 사람 같지 않은 모습에 징그러운 느낌이 든다. 3. 선택한..

최소한의 코드로 디데이 계산하기 See the Pen [js]D-day계산기 by TytanLee (@TytanLee) on CodePen. const christmas = new Date("2023-12-25"); 디데이 설정 const today = new Date(); 밀리세컨드 단위의 시간 표시 1초=1000 day_gap = christmas - today; 크리스마스까지 남은 밀리세컨드 초 값 setInterval(find_day, 1000); 1초마다 디데이 기능 실행

HTML 상품명 가격 상품선택 모자 셔츠 바지 Products Information Shipping 상품설명입니다. Product 스펙설명입니다. Information 배송정보입니다. Shipping 사용된 문법 .eq(number) : 선택한 배열의 number번째 요소를 불러온다. .val(...) : 선택한 요소의 value값을 가져온다. 변수에 값 할당 시 ""를 사용할 경우 줄 바꿈이 생기면 코드 진행이 끊기기 때문에 줄 바꿈을 이용할 경우 ``를 사용하기 .html(...) : 선택요소의 내부에 (...)안 코드를 교체해 준다. .append(...) : 선택요소의 내부에 (...)안 코드를 추가해 준다. .forEach(function(a, i){} : 배열에 쓸 수 있는 반복문 함수. a는..

안녕하세요 무택입니다 :) 오늘은 디자인할 때 자주 필요할 수 있는 Lorem.. 텍스트 생성 사이트를 공유하려고 합니다. 포토샵으로 디자인하려고 할 때 텍스트는 필요한데 마땅히 쓸 텍스트가 정해져 있지 않을 때 어떻게 해야 할지 곤란할 때가 있습니다. 그럴 때 사용하기 위한 개념으로 자세한 내용은 아래를 참고해 주세요. Lorem Ipsum의 개념 Lorem Ipsum은 출판이나 그래픽 디자인 분야에서 폰트, 타이포그래피, 레이아웃 같은 그래픽 요소나 시각적 연출을 보여줄 때 사용하는 표준 채우기 텍스트입니다. 한마디로 최종 결과물에 들어가는 실제 문장 내용이 채워지기 전에 디자인 느낌을 보기 위한 하나의 대체용 텍스트라고 생각할 수 있습니다. Lorem Ipsum 은 라틴어로, 원래는 고전 라틴 책의..

안녕하세요 무택입니다 :) 오늘은 js에서 스크롤 높이의 개념에 대해 정리해보려고 합니다. js를 처음 배우기 시작한 사람으로서 스크롤 높이의 개념이 아직 헷갈릴 때가 많습니다. 그래서 스스로 정리할 겸 이해하기 쉽게 설명해 보도록 하겠습니다. 스크롤 높이 종류 높이의 종류는 크게 세 가지로 정리할 수 있습니다. 1. 요소의 실제 높이(전체 높이) : scrollHeight 2. 요소의 보여지는 높이 : clientHeight 3. 요소를 스크롤한 값 : scrollTop 이미지를 클릭하면 크게 볼 수 있어요 위 텍스트 박스의 클래스가 txtBox라고 한다면 document.querySelector(".txtBox").scrollHeight; //txtBox 요소의 전체 높이 document.queryS..

안녕하세요 무택입니다 :) 오늘은 window 마우스 커서 변경하는 방법에 대해 써보도록 하겠습니다. 기본 마우스도 좋지만 커스텀해서 사용하면 본인한테 더 맞는 커서를 사용할 수 있어서 기분이 좋습니다😊 파일 다운받는 링크 https://custom-cursor.com/ Custom Cursor Custom Cursor is a browser extension that lets you change your cursor to a custom one from our giant cursor collection to choose from or upload your own cursors custom-cursor.com https://www.cursors-4u.com/ Free Cursor Downloads - C..

[API]카카오 지도를 간편하게 불러오는 방법 안녕하세요 무택입니다 :) 오늘은 카카오 지도를 불러오는 방법에 대해 써보려고 합니다. 웹사이트를 구현하다 보면 지도 기능이 필요한 경우가 생기는데 보통 구현하기 힘들 경우 이미지로 대 mu08.tistory.com 위 링크에서 카카오 맵을 어떻게 등록하는지 알 수 있습니다. 안녕하세요 무택입니다. 오늘은 VScode에서 카카오 지도를 라이브서버로 테스트해보려고 할 때 안 나오는 오류에 대해서 써보려고 합니다. 지도를 등록하는 과정에서 도메인 입력을 실수했을 때 일어나는 오류인데 아래 내용을 확인해서 수정해 보시길 바랍니다. 카카오 지도 401 에러 해결 방법 위와 같이 "Failed to load resource: the server responded wi..

안녕하세요 무택입니다 :) 오늘은 카카오 지도를 불러오는 방법에 대해 써보려고 합니다. 웹사이트를 구현하다 보면 지도 기능이 필요한 경우가 생기는데 보통 구현하기 힘들 경우 이미지로 대체하는 경우가 있습니다. 하지만 확실히 지도를 불러오는 방법이 사용성이 좋기 때문에 아래 방법을 보면서 따라 해보시길 바랍니다😊 카카오 지도 불러오는 방법 크게 순서는 이렇게 됩니다. 1. 카카오 API 제공 사이트에서 애플리케이션 기능으로 고유 API키를 발급 2. 지도 기능을 사용할 수 있는 코드를 복사해 와 고유 API키를 입력 3. 기타 커스텀 기능을 활용하면 다양하게 사용이 가능. 자세한 설명은 아래를 참고해 주세요. 1. 카카오 지도 api 사이트에서 "카카오 개발자사이트" 들어가기 2. 로그인 후 시작하기를 눌..

.test() 함수 사용 /.../.test(요소) 요소에 ...가 있는지 확인 /a/.test(요소) : 요소에 a를 포함하고 있으면 true 반환 /[a-z]/.test(요소) : 요소에 a부터 z까지 소문자가 있으면 true 반환 /[A-Z]/.test(요소) : 요소에 A부터 Z까지 대문자가 있으면 true 반환 /[ㄱ-ㅎ]/.test(요소) : 요소에 ㄱ부터 ㄴ까지 자음이 있으면 true 반환 /[0-9]/.test(요소) : 요소에 0부터 9까지 숫자가 있으면 true 반환 /^a/.test(요소) : 요소가 a로 시작하면 true 반환 /a$/.test(요소) : 요소가 a로 끝나면 true 반환 /\S/.test(요소) : 요소에 아무 문자 하나를 포함하고 있으면 true 반환 /\S+@\..