킹바구니 🦜

보통 설정에서 공통으로 잡을텐데 프로젝트별로 구조가 달라서 별도로 설정해줘야할때는 이렇게 하면 된다. 1. 루트 폴더에 .vscode 폴더 생성 프로젝트 열었을 때 제일 상위에 만들어주라는 의미. 앞에 온점 빼먹지 말고 넣어줘야함. 나같은 경우 이렇게 만들어주었음. 2. 그 안에 settings.json 파일 생성 { "liveSassCompile.settings.generateMap": false, "liveSassCompile.settings.formats": [ { "format": "expanded", "extensionName": ".css", "savePath": "~/../" } ], } 그리고 원하는 설정을 넣어주면 된다.

iframe을 가지고 있는 페이지였는데 확대축소 기능을 넣어서 마우스로 끌어서 이동하는 기능을 넣었어야했음. 그때 가끔 간헐적으로 위에 짤처럼 화면이 긁히는 현상이 일어나서 어케 해결하지 하다가 발견함. 1. css 추가 .unselectable { -moz-user-select: -moz-none; -khtml-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; } 난 pointer-events: none 넣으면 되는줄 알고 이것만 줄창 해놓고 왜 안대제 하고 있었징~

보통 커서는 이렇게 좌측 상단이 포인트 부분인데 이번에 구현하다보니 받은 디자인이 좌측 하단으로 되서 온 것임. 찾다가 안나와서 이거 안돼요 했는데 방법 찾음; 1. cursor에 좌표 입력 document.body.style.cursor = "url('custom.png') 5 40, auto"; url 뒤에 바로 좌표를 써주면 된다. 안된다했는데.. 촤하하 미안합니다!

하루는 작업하다보니 특정 부분만 폰트가 기본인 맑은 고딕으로 되어있는 것 같아 확인을 해보니, 신기하게도 진짜 커스텀으로 넣은 폰트가 적용되지 않았더라. 안될꺼면 다 안되던가.. 특정 줄은 안되거나 같은 p태그 안에서 span안에 든 것만 안된다거나 하는 페이지가 있어서 당황했는데 이럴때는 이렇게 css를 바꿔주면 된다. 1. font-display 추가 @font-face { font-family: "Pretendard-Regular"; src: url("/src/fonts/Pretendard-Regular.woff"); font-weight: 400; font-style: normal; font-display: auto; } 참고로 auto값은 커스텀 글꼴이 로드되기 전에는 화면에서 글자를 숨겨놓고,..

어쩌다보니 이렇게 생긴 얘를 scss로 선택했어야 했는데 어떻게 처리하지 했는데 그냥 두개 이어서 쓰면 되더라. i { &[data-idx="0"][data-id=""1"] { // 원하는 scss 작성 } }

예전에 외주업체에서 퍼블파일을 받았는데 아무리 기다려도 안열리고 그나마 live server와 같은 vscode 익스텐션으로 여니까 좀 떴던 적이 있었는데 이유는 1. 파일 내 태그 및 스크립트 확인 안녕하세요 제목 3번은 앞에 https:붙여줘야함. 아니 진짜 본인들 작업하면서 못느끼나....

가끔 작업하다보면 focus가 어디에 있는지 확인해야할때가 있는데 이럴때 브라우저에서 제공하는 기능이 있음. 1. f12 - console - 눈모양 아이콘 클릭 document.activeElement 그리고 이렇게 그냥 써주면 된다. 이건 엣지인데 어느 브라우저든 된다!

:root은 공통으로 쓰는 요소를 변수마냥 모아놓고 css에서 적용하기 위해 쓰는 요소임. 근데 저게 안된다면 아래와 같은 부분을 확인해야함 1. 제일 상단에 위치했나 확인 css제일 상단에 쓰는게 속편함. 2. :root {}; 이렇게 맨 뒤에 ;붙었나 확인 이것때문에 안된적이 있었음. 세미콜론 없어야함. font-face 폰트 정의해서 쓸수있는 것임. 근데 하루는 웹폰트 다운받아서 폴더에 넣어두고 불러오는게 죽어도 안된적이 있었음. 1. 경로 확인 대부분은 경로를 제대로 안써서 그러함. / ../ ../../ 이런거 말하는거임. 2. (스프링부트를 쓴다면) font넣어둔 폴더를 접근허용했는가 확인 @Override public void configure(WebSecurity web) { web.ign..

모든 태그 정리한것 아님. 필요한것만 빼서 정리. 1. https://developer.mozilla.org/ko/docs/Web/HTML/Element/a - HTML: Hypertext Markup Language | MDN HTML 요소(앵커 요소)는 href 특성을 통해 다른 페이지나 같은 페이지의 어느 위치, 파일, 이메일 주소와 그 외 다른 URL로 연결할 수 있는 하이퍼링크를 만듭니다. developer.mozilla.org - 기본적으로 링크(href)를 위한 태그이나 href요소는 필수가 아님. - href에 #를 쓰면 페이지가 새로고침/최상단으로 이동하는데 개발/접근성 처리시 주의(링크할 필요없으면 href를 없애고, 버튼으로 사용할꺼면 role=button 추가) - 안에 또다른 를 ..

태그 예를들어 이런 태그가 있는데 focus를 줘도 안먹는 경우가 있음. 뭐 css적으로 display: none한것도 아니고, $('p').get(0).focus()이렇게도 해보고 그랬는데 결론은 그냥 셋타임아웃이 제일 효과적임. $('p').focus(); setTimeout(function() { $('p').focus(); }, 100); 난 혹시 몰라서 저런 경우 발생시 두개를 다 써놓곤 함. 시간초는 보통 100~200정도 다들 하는듯.. jquery focus() not working