킹바구니

https://codepen.io/pmx/pen/yLXQPrG 커스텀 체크박스, 라디오 버튼 ... codepen.io 디자인 시안이 오면 라디오박스나 체크박스는 90% 기존꺼를 안쓴다고 보면 되기때문에, 이참에 정리함.

scss란 css를 좀 더 편하게 쓸 수 있는 css 전처리기인데, 이를 어떻게 vscode에서 쓰고 css 파일로 컴파일화(브라우저에서는 scss 모르니까 css로 바꿔줘야함) 하는지 정리함. 2023년 버전으로 다시 씀. 1. vscode 확장 프로그램 설치 Live Sass Compiler을 설치한다. 그러면 IDE 하단에 아래와같이 watch sass라는 버튼이 나타나는데, 저걸 누르고 scss파일에서 저장할때마다 컴파일된 css파일이 생긴다. 이게 끝인데 사용자에 따라 css파일이 생성되는 위치, 압축된 css파일 유무 등이 다를 수 있음. 아래는 이후 설정 방법임. 2. settings.json 열기 컨트롤 + , 또는 파일-기본설정-설정을 클릭 한 뒤 우측 상단에 있는 전환용 아이콘을 누르면..

일하다가 쓰게 되었는데 헷갈려서 헤맸던 것들 정리함. 1. 기본 doc문서 https://getbootstrap.com/docs/5.0/components/offcanvas/#offcanvas-components Offcanvas Build hidden sidebars into your project for navigation, shopping carts, and more with a few classes and our JavaScript plugin. getbootstrap.com 기본적인건 여기서 다 찾아서 쓰면 됨. 2. offcanvas 열기/닫기를 제이쿼리로 나타내기 $('.offcanvas').offcanvas('show'); $('.offcanvas').offcanvas('hide'); 이거..

예전에 학원에서 배울때 중요하게 들었지만 정작 실무에서는 그렇게 쓰지 않았는데, 어쩌다보니 신경써야할 회사로 오게되서 정리함. 🔽 최대한 간결하게 작성해서 아래 링크에 올려놓음 🔽 https://codepen.io/pmx/pen/yLXMRwm 접근성 고려한 탭 | example of tabs with accessibility 참고 https://youtu.be/3LFUWO9mWpQ?list=PLtaz5vK7MbK2v9j4GW6l9L4dEkze9myE5... codepen.io

1. selector가 기준 2. $(this)쓰는데 뭔가 안될 때 확인해봐야할 것 // 이건 된다 $("button").click(function() { console.log($(this).attr("id")); }) // 이건 자바스크립트 함수라서 this를 인식 못한다. function something() { // no console.log($(this).attr("id")); // ok console.log($(event.target).attr("id")); } 쓰고있는 곳이 함수 안인지 그냥 제이쿼리 명령언지에 따라서 $(event.target)나 $(this) 이렇게 따로 써줘야 먹힘. 3. $("selector")는 기본적으로 여러 selector을 선택하긴하는데.. // 3개 전부 가리킴..

이걸 나도 뭐라 해야할지 모르겠어서 검색할때도 애먹었는데 var theme1 = "테마 1번입니다"; var theme2 = "테마 2번입니다"; var num = prompt('원하는 테마 번호는?'); 예를들어 prompt에 2를 입력하면 theme2에 대한 내용이 출력되도록 하는걸 하고싶었는데, console.log(`theme${num}`); console.log(theme+num); console.log('theme'+num); 이런식으로 하면 변수로 인식하지 못하고 텍스트로 인식해버려서 어떻게 하나 싶었는데 방법은 1. eval 사용하기 (그런데 비추인것 같음) // var theme1 = "테마 1번입니다"; // var theme2 = "테마 2번입니다"; // var num = promp..

1. vscode에서 live server 설치 2. 설정 버튼 누르기 3. Live Server > Settings: Host 확인 기본으로 127.0.0.1로 써져있음 4. 와이파이 아이피 주소로 바꾸기 제어판이나 검색창에 "네트워크 상태"를 검색해서, IPv4 주소 에 써진 아이피 주소를 입력해주면 됨. 5. 모바일에서 접속 아이피 주소가 198.000.0.000라면 198.000.0.000:5500/파일이름 이렇게 쓰면 된다. 예) 그냥 index.html 파일만 있을 때 198.000.0.000:5500/index.html 예) code폴더 안에 register.html 파일이 있을 때 198.000.0.000:5500/code/register.html

-포커스 대상 -새로고침 유발 -스페이스키로 클릭 -서버에 양식 데이터 제출 -disabled로 비활성화 -:focus, :hover, :active, :disabled -모달창 오픈 -팝업메뉴 트리거 -인터페이스 전환 -미디어 콘텐츠 재생 -포커스 대상 -새로고침 유발 -새 페이지/현재 페이지로 이동 -엔터키로 클릭 -:link, :visited, :focus, :hover, :active url도 없고, url이 변경되는 내용도 아니며 핸들러가 있을 경우 모호함

node.js를 활용하여 jwt로 로그인해보기 1. 터미널에서 아래와 같이 입력하여 설치 npm init npm i express dotnev jsonwebtoekn npm i --sav-dev nodemon 한줄씩 설치해주면 된다. 2. package.json에서 아래와같이 변경 server.js 파일 하나 만들고 앞으로 실행할때는 터미널에 npm run devStart라고 써주면 된다. 3. server.js에 아래와같이 써주기 const express = require('express'); const app = express(); const posts = [ { username: 'hobs', title: 'Post 1' }, { username: 'kate', title: 'Post 2' } ];..

transition이나 이런 fade효과가 나한테는 어렵기도 하고, opacity와 visibility와 display의 상관관계를 잘 모르겠어서 공부하다가 기본 형태는 저장해두고 나중에 꺼내서 쓰려고 포스팅함. 1. 공통 click me title LoremLoremLoremLoremLoremLoremLoremLoremLorem ok .modals { width: 100%; height: 100%; position: fixed; top: 0; left: 0; background-color: rgba(0, 0, 0, 0.5); transform: translate(-50%, -50%); } .modal { width: 500px; padding: 1rem; background-color: rgba(255..