반응형

css 5

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로..

[CSS] IOS+Android (크롬,사파리) 전체 터치 하이라이트 제거 CSS 모음집

/* 모든 요소에 대해 하이라이트 제거 */* { -webkit-user-select: none!important; /* 크롬, 사파리, 오페라 */ -moz-user-select: none!important; /* 파이어폭스 */ -ms-user-select: none!important; /* 인터넷 익스플로러/엣지 */ -webkit-tap-highlight-color: rgba(0, 0, 0, 0); /* Safari */ -webkit-tap-highlight-color: transparent; /* 다른 웹킷 기반 브라우저 */ user-select: none!important; /* 표준 */}    -webkit-tap-highlig..

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

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

[CSS / orientation: portrait]가로 / 세로모드로 자동변환하는 CSS (feat. 에스파 홈페이지)

📌 예시 (Aespa -Armageddon webpage) 가로폭이 세로폭보다 큰 PC의 경우 가로로,가로폭이 세로폭보다 작은 모바일의 경우 세로로변환하여 디자인이 일관적으로 보이게 하는 컨셉 Web page다(이런 페이지들은 금방 사라져서 아쉽 ㅠㅜ) 인터렉션 요소가 많아서 재밌는 이 사이트 처럼 기기별 가로 사이즈에 따라가로세로를 변경하려면 아래 코드를 사용하면 된당https://aespa.com/ aespa aespa.com    📌 적용예제 코드See the Pen 자동가로/세로변경 css by galaxy_star (@fold6) on CodePen.  📌 핵심코드 /* 핵심코드 */ /* 가로폭이 세로폭보다 작은 경우, 즉 장치가 세로 모드일 때를 감지 */ @media..

반응형