본문 바로가기

전체 글

 (166)
Emmet Emmet(에밋)은 HTML 및 CSS 등의 다양한 파일 종류에 유용한 코드 단축키를 제공합니다. emmet은 CSS 선택자를 활용해 사용하는 기능입니다. VS Code로 HTML파일을 작성시, ! 를 입력하고 Tab키를 누르면 자동완성되는 거 있습니다. 이것도 emmet에 해당됩니다. * 기호는 곱하기, { } 는 내용을 삽입, $ 는 순서대로 숫자 입력을 의미합니다. 이런 CSS 선택자 외 나머지 내용은 모두 Emmet에서만 지원하는 기능이니 착오 없으시길 바랍니다. 예시를 하나 보여주자면, div>ul>li*4{$}입니다. 태그 하부에 태그 있고, 태그 하부에 태그가 있습니다. 태그가 4번 반복하며, 순서대로 숫자를 입력합니다. tab키 혹은 enter키를 누르면, 위 사진처럼 나타납니다.
브라우저 스타일 초기화 브라우저마다 기본적으로 제공한 스타일이 있습니다. 예를 들어, Chrome에서 태그는 margin이 8px로 자동 부여되고 있습니다. 사용자가 어떤 브라우저를 사용할 지 모름으로, 작업 전 브라우저 스타일을 초기화하는 게 좋습니다. 브라우저 스타일 초기화 1. 구글 검색창에 reset.css cdn 검색하며, cdnjs.com 혹은 jsdelivr.com 사이트로 뜬 링크를 열어 줍니다. 2. reset.css 파일을 확인 후, Copy HTML을 하시고 HTML파일에 붙일 준비를 합니다. 가끔 reset.css 파일과 reset.min.css 파일 두 개로 존재할 때 있습니다. min(Minify 단어의 약어) 키워드는 파일이 난독화나 경량화되었다는 것을 의미합니다. min이 없는 거는 원본파일일 것을..
모든 파일 공백 크기 한꺼번에 설정 모든 파일 공백 크기 한꺼번에 설정하는 방법을 소개합니다. 1. 모든 명령 표시(에디터의 모든 명령에 접근) 단축키로 접근 가능합니다. MacOs: Cmd + Shift + P Windows: Ctrl + Shift + P 2. setting을 입력하며 Open User Settings 클릭 3. 키워드 검색에서 tab size를 입력해서 원하는 크기로 설정 기본적으로 4로 되어 있으며 2로 변경하는 것을 추천합니다.

티스토리툴바