VSCode 에디터 .tpl 확장자 인식방법(코드 확장자 인식방법)
.tpl 파일로 작업을 하는데, VSCode가 따로 확장자 인식을 하지 못해서 text와 같이 취급이되는 경우가 불편해서 찾아보게 되었습니다. 인식하지 못하는 상태의 .tpl 파일 상태 오픈한 파일만 html 코드스타일로 확인하기 1.VSCode 우측 하단 바에서 Plain Text 클릭 2.박스에서 HTML 클릭 전체 파일에서 html 코드스타일로 확인하기 1. 세팅을 열어줍니다. File > Preferences > Settings 또는 단축키 Ctrl + , 2. file associations 검색 후 Edit in Settings.json 클릭 3. file.associations 값 입력 *.tpl 로 입력한 것은 모든 .tpl 확장자를 가진 파일을 html과 같이 인식하라고 설정하는 부분입니..
input 타입 range 스타일 수정하기_커스텀 스타일
++ 추가 사항 태그로 제작한 부분이 모바일에서 터치 이동이 안되는 이슈가 있었습니다. 그래서 어쩔수 없이 태그를 사용하여 커스텀하는 형식으로 작업했습니다. 기록상 글을 작성합니다. 글에 IE11이라고 작성된 모든 부분을 Edge로 수정합니다. ++ 원본 코드 확인 바로가기 요구조건 태그를 사용, CSS를 통해 아래와 같이 제작해주세요. 아래 이미지는 캡쳐본으로 저 형태로 제작하는 것이 최종 요구조건 이었습니다. 기존에 태그를 사용해서 작업했던 결과물을 분석합니다. 부모 태그에 너비를 100% 준 다음 왼쪽(진행 후)과 오른쪽(진행 전)의 영역의 값을 JS로 삽입하는 방식이었습니다. 이렇게 된 코드를 방식으로 변경해보도록 하겠습니다. 지원 브라우저 들어가기전에 생각해야하는 부분은 는 IE10부터 지원합니..
CSS 네이밍 케이스, 방법론 (케밥 kebab-case/파스칼 pascalCase/스네이크snake_case/헝가리)
#네이밍 케이스 1.케밥-케이스 kebab-case, spinal-case, Train-Case, Lisp-case -하이픈으로 단어를 연결하는 표기법 -HTML 태그의 id, class 속성으로 흔히 사용됨. 2.파스칼 표기법 PascalCase, BackgroundColor, TypeName, PowerPoint -첫 단어를 대문자로 시작하는 표기법 3.스네이크 케이스(뱀 표기법) snake_case, background_color, type_name -단어를 밑줄 문자로 구분하는 표기법 -perl, php, python, ruby, rust.... 4.헝가리언 표기법 strName, bBusy, szName -접두어를 사용하는 표기법 -str -> string, b -> boolean, sz -> ..