반응형

HTML 7

Codepen을 티스토리나 블로그에 가져오기

1. 코드펜 오른쪽 하단의 Embed를 클릭   2. 원하는 설정후 HTML 탭에서 copycode  3. 글쓰기 바의 가장 오른쪽, 블로그 글쓰기 모드를 HTML 으로 변경 후 삽입   4. 글쓰기 모드를 다시 기본모드로 바꾼 후 완료!(글쓸때 보면 아래 사진과 같이 해당 계정에 들어가서 보라고 나오지만, 실제로 글쓰기 '완료'로 퍼블리싱 된걸보면 제대로 동작한다)   See the Pen Untitled by galaxy_star (@fold6) on CodePen.

🛠️ Dev. 2024.12.22

VS Code 필수 확장 프로그램! Prettier 설정하고 단축키 바꾸기(js,css,html등 자동정렬 확장프로그램)

원래의 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로 변경)

🛠️ Dev. 2024.12.20

[유튜브] 유튜브 등록된 썸네일 가져오기 (+영상 가져오기)

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

[JS+HTML] html안에 script로 공통요소 (div)가져오기 (+JS동작)

| 목표안경 낀 고양이 외의 요소(플레이리스트, 시계, 왼쪽 사이드의 고양이들 등) 들은각 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..

[CSS+PHP] 오늘 날짜 or 페이지 들어갈때 마다 or 특정 업데이트날짜에 CSS 다시 받게하는 코드

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

[synology] 나스에서 웹 폰트 안불러와짐 해결

나스 웹 서버의 주소가 https:// 로 시작한다면 웹 폰트의 src 또한 절대 경로 https:// 여야하고 http://라면 그에 따라야 한다 @font-face { font-family: 'Godo'; font-style: normal; font-weight: 400; src: url('https://cdn.jsdelivr.net/korean-webfonts/1/corps/godo/Godo/GodoM.woff2') format('woff2'), url('//cdn.jsdelivr.net/korean-webfonts/1/corps/godo/Godo/GodoM.woff') format('woff'); } 즉, https://내시놀.synology.me:nnnn번포트 일때 위의 font가 불러와질것이다..

📡 Synology 2024.02.28

유튜브 Iframe 영상 파일 html 불러오기 (반복재생,뮤트,화질조정)

※ 100MB 이하면 구글 드라이브에 올려서 깔끔하고 빠르게 가져올 수 있지만 필자가 이번에 하는 프로젝트는 그럴 수 없어서 기록. See the Pen 유튜브 영상 HTML넣기 by hesper03 (@whdldi) on CodePen. ◆ 사용한 코드 설명: src: YouTube 동영상 재생 주소입니다. autoplay=1: 동영상을 자동으로 재생하도록 지정하는 매개변수입니다. "1"로 설정하면 동영상이 페이지를 로드할 때 자동으로 재생됩니다. mute=1: 동영상을 음소거로 설정하는 매개변수입니다. "1"로 설정하면 동영상이 음소거 상태로 재생됩니다. vq=small: 동영상 화질을 "small"로 설정하는 매개변수입니다. 이것은 동영상을 상대적으로 낮은 화질로 표시하도록 지시하는 것입니다. co..

🛠️ Dev. 2023.10.07
반응형