html_css 27

[vscode] Live Sass Compiler에서 프로젝트별로 설정하기

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

html_css 2024.04.04

[css] 파란색으로 화면 긁히는 현상 없애는 법

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 넣으면 되는줄 알고 이것만 줄창 해놓고 왜 안대제 하고 있었징~

html_css 2024.04.03

특정 부분만 폰트가 먹히지 않을 때

하루는 작업하다보니 특정 부분만 폰트가 기본인 맑은 고딕으로 되어있는 것 같아 확인을 해보니, 신기하게도 진짜 커스텀으로 넣은 폰트가 적용되지 않았더라. 안될꺼면 다 안되던가.. 특정 줄은 안되거나 같은 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값은 커스텀 글꼴이 로드되기 전에는 화면에서 글자를 숨겨놓고,..

html_css 2023.10.14

font-face 적용이 안될 때, :root 안될 때

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

html_css 2022.07.15

기본태그 어디까지 아니? 인라인 태그

모든 태그 정리한것 아님. 필요한것만 빼서 정리. 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 추가) - 안에 또다른 를 ..

html_css 2022.06.08