본문 바로가기

개발/웹 (HTML)12

VSCode 언어별 들여쓰기(탭) 지정 - Settings.json 코드 스타일에서 중요한 요소 중 하나는 들여쓰기 규칙입니다. 최근에는 탭 대신 공백을 사용하여 일관된 서식을 유지하는 것이 일반적인 추세입니다. 과거에는 문서 작성 시 기본 탭 크기를 8칸으로 설정했고, 코드에서는 깊이를 줄이기 위해 4칸 들여쓰기를 주로 사용했습니다. 그러나 탭 크기를 줄이면서 줄 맞추기 효과가 줄어들었고, 각기 다른 에디터나 사용자가 설정한 탭 크기에 따라 문서 포맷이 혼란스러워지는 문제가 발생했습니다. 이러한 문제를 해결하기 위해 탭 대신 공백으로 들여쓰기를 처리하는 방식이 도입되었습니다. 특히 HTML과 같이 들여쓰기가 많은 경우에는 탭 크기를 2칸으로 설정해 더 깔끔하게 표현하는 것이 일반적입니다.VSCode 들여쓰기 설정VSCode 설정 파일에는 사용자 모드와 작업 영역 모드 .. 2024. 11. 8.
VSCode 웹 개발 시작하기 - 필수 단축키 모음 VSCode 단축키도 제법 많은데,평소 자주 사용하는 유용한 단축키를 몇 개 소개합니다.특히 마우스를 최대한 안 쓰고 창 사이를 이동하면서 작업하면 코드 집중력이 올라갑니다. 윈도우 : Ctrl맥 : Cmd 에디터창에 커서를 놓고 아래 단축키를 테스트해보세요. 수정한 모든 파일 저장하기.Ctrl + K, S 창 액션사이드바 열기/닫기 (토글)Ctrl + B 현재 창 닫기Ctrl + W 사이드 탐색기 열기/이동 (토글)Ctrl + Shift + E 명령창 열기/닫기 (토글)Ctrl + ` (그레이브 문자 or 빽틱)Ctrl + J 사이드바 주요 메뉴파일 탐색기Ctrl + Shift + E 검색Ctrl + Shift + F 소스 제어 (GIT)Ctrl + Shift + G 디버깅Ctrl + Shift + D.. 2024. 11. 7.
HTML 초보자를 위한 VSCode 확장 추천 VSCode는 웹 개발에 최적화된 강력한 툴입니다.로컬 환경에서는 물론이고, 원격 서버에서 작업할 때도 마치 로컬에서 작업하는 것처럼 빠르고 편리하게 사용할 수 있습니다. 이번 글에서는 VSCode 설치부터 시작해, HTML 개발에 필요한 확장을 설치해보겠습니다. VSCode 설치https://code.visualstudio.com/ HTML 개발에 필요한 VSCode 확장을 최소한으로 설치해봅시다.앞으로 진행하면서 필요할 때 추가합니다. 확장 설치 아이콘은 좌측에 있습니다. 1. 코드 포메팅VSCode는 HTML 코드 포메팅을 지원한다. (Alt + Shift + F) 2. Auto Rename TagHTML을 작성하다보면 태그 앞뒤 맞추기가 항상 번거롭고 불편하다.이것을 자동화해주는 확장이다. 3. .. 2024. 10. 28.