기록장

원래의 Prettier 단축키는 ctrl + alt + p? 인가 그런데자신이 쓰고싶은 걸로 바꾸려면 아래처럼 하면 된다! 1. Prettier 다운 및  설치2. 설정(ctrl+,) 에서  default formatter 검색하여 Prettier 로 설정3. 키보드 설정 (바로가기) ctrl+k ctrl+s 에서 Format Document 검색하여키 바인딩 : Ctrl + Shift+  B 변경(나는 위 바인딩이 편해서 이렇게 씀)  이렇게 prettier 설정에서 (확장 프로그램 목록의 톱니바퀴 아이콘 클릭)TAB 가로 폭도 바꿀수있다! (기본이 2이라서 나는 4로 변경)

| 문제상황영상이 재생 되기전, 썸네일 이미지를 보여 주고 싶은데, 따로 서버에 이미지를 올리지 않고 스크립트를 쓰지않고 빠르게html과 css로만 가져오려면 어떻게 해야할지 고민중인 상황(원래 모든 영상을 내 자체 서버에 올리려고 했는데 용량이 너무 크고(30분이상의 영상 X 7), 서버가 닫히면 영상을 불러올수없는 상황이 발생하는 등의 이유로 사용을 지향하는편)   | 방법 | 전체 코드  위 처럼 일반적으로 유튜브 영상 불러오는 iframe 위에 썸네일을 불러오는 아래의해결코드 (이미지 주소)를 넣고css로..

| 문제상황click이벤트를 사용한 반응형 웹페이지 제작시데스크탑에서는 정상작동하지만 갤럭시 폰에서 특정버튼에 터치이벤트가 걸리지 않음= > click touchend 를 줬더니 대부분 동자갛나, 몇개의 터치 이벤트 동작이 안됨 | 문제의 코드 $(document).ready(function () { $(".drag_box_inner_btn .box_playlist").on("click touchend ", function () { let img = $(this).find("img"); if (img.hasClass("widget_active_bgm")) { img.re..

| 목표안경 낀 고양이 외의 요소(플레이리스트, 시계, 왼쪽 사이드의 고양이들 등) 들은각 sub/ 의 html 안에서 공통적으로 쓰일 div이며,js의 script 또한 동작해야함    | 방법  1. 공통으로 넣을 div를 가진, html 파일을 만듬 (common_widget.html)⚠️ meta tag 빼고 div 알맹이만 가지는 파일이 돼야함 ⚠️ Insomnia's Room .... 그 외 div요소들 2. 공통으로 넣어질 html (common_widget.html) 파일의 css와 js를 만듬(common.css /sub_common.js)// 아래는 이해를 돕기위한, sub_comm..

| 문제상황안드로이드 폰이나 윈도우에서 의도대로 잘 나오던 높이값이,아이폰에서 (사파리,크롬)보면 자꾸 없어진 상태로 나옴 온갖 방법(flex만 주기, padding, margin, position주기...) 을 다 써본 결과flex + line-height를 주면 해결된다는걸 알게 되어서 기록...player_info { position: absolute; top: 24%!important; left: 50%; transform: translateX(-50%); width: 80%; display: flex; flex-wrap: wrap; flex-direction: column; justify-content: flex-start; /* line-h..

📌 오늘 날짜로 CSS 새로받기" rel="stylesheet"> 📌 페이지 들어갈때마다 CSS 새로받기 " />  이 코드를 사용하면 페이지가 로드될 때마다 time() 함수가 현재의nix 타임스탬프(초 단위)를 반환하기 때문에, 항상 새로운 URL이 생성되고 브라우저가최신 CSS 파일을 가져오게 됨 ⚠️ 매번 새로운걸 받기 때문에, 트래픽 및 로딩시간이 증가 하므로 테스트 시에만 사용!    📌 특정 업데이트 날짜를 기점으로 CSS 새로받기 나는 보통, 이런식으로 .css 뒤에 "?ver=날짜" 처럼 사용한당ㅎㅎ

OG(Open Graph) 태그웹페이지가 소셜 미디어에서 어떻게 표시될지를 제어하는 메타 태그,이를 통해 링크가 공유될 때 웹페이지의 제목, 설명, 이미지 등을 미리보기로 설정가능   주요 목적과 사용 이유  소셜 미디어에서의 시각적 효과:OG 태그는 페이스북, 트위터, 카카오톡 등 소셜 미디어 플랫폼에서 링크가 공유될 때 어떻게 표시될지를 제어.예를 들어, og:image 태그는 링크를 공유할 때 표시되는 썸네일 이미지를 설정더 나은 사용자 경험:사용자가 소셜 미디어에서 링크를 클릭하기 전에 해당 링크의 내용을 미리 확인할 수 있도록 도와줌. (클릭률(CTR)이 증가)브랜드 일관성 유지:웹사이트나 페이지가 소셜 미디어에서 공유될 때 일정한 형식과 디자인을 유지할 수 있도록 함.(브랜드 이미지 관리에 도..

나 같은경우 이제껏 제이쿼리를 사용할때 html 파일안에  아래와 같이 CND을 불러왔었는데, 그래서 아래 제이쿼리 CDN이 제이쿼리를 사용하고 있는 .js 파일보다 밑에 있을때동작이 안돼서 해매는 경우가 있었당 위의 서순으로 구성해야 동작됨    제이쿼리를 사용하는 js코드 위에, CDN을 넣으면 동작이 되는데,위 Jquery CDN을 불러오는 형태로는 .js 파일안에 넣는게 불가능하기 때문에다른 형식으로 .js에 넣는 방법은 다음과 같당 // Load jQuery$.getScript("https://code.jquery.com/jquery-3.6.0.min.js", function () { console.log("jQuery..

1. 웹 스테이션을 열고 웹 서비스- 기본서비스를 더블클릭- 개인 웹 사이트 활성화 체크 ※ 패키지 센터에서 Apache HTTP server를 깔아야 체크가 가능함 2. 언급된것처럼 www 폴더안에 있는게 내 시놀로지 주소로 들어갔을때 보이는 첫 렌딩 페이지가 됨 3.위에서 체크했기 때문에 default로 만들어주는 페이지는 아래와 같음 '내가 www라는 폴더에 에 빈 index.html 만들어 놧으니까, 이 경로에 수정해서 니 사이트 올려! ' 라는 뜻 4. 위의 과정을 통해 web폴더 안에 www라는 폴더가 만들어졌으니 이제 수정하면 끝. (web 폴더 안에 있는 index.html를 읽는듯해서 나는 그냥 www없애고 내 첫 렌딩 페이지를 아래 사진처럼 넣음) 5. 결과 ++) 5번의 메인 렌딩페이..

라이브 서버에서 자동 새로고침이 안되는 경우 해결방법은 4가지가 있습니다. 1. 혹시 라이브 서버를 실행하고자 하는 파일 제목 첫번째 글자가 .인 경우 .을 없애자! -ex) .samsungweb.html 같은 제목일때 .을 없애어 samsungweb.html으로 저장. 2. 혹시 라이브 서버를 실행하고자 하는 파일의 상위 폴더 제목에 #이 들어갔다면 #을 없애자! 3. "UTF-8"을 적지 않았다면 작성! (+ 로 제대로 적었는지 확인) 4. 설정- auto save를 검색해 사진과 같이 afterdelay로 변경! delay를 600 (0.6초)로 변경!