DevOps/Tools25 [Emmet] Emmet #1 시작하기 처음 Emmet을 접하게 된 것은 최근에 사용하기 시작한 Visual Studio Code 였습니다. 간단한 문법부터 사용하기 시작했으며, HTML과 CSS 코딩의 힘들고 지루한 작업들을 보다 빠르게 하기 위한 도구로서 최적이었습니다. 그래서 조금 더 알아보기 위해 홈페이지를 방문하고 나서는 보다 정확한 이해를 위해서 문서화하기로 마음먹고 이 시리즈를 시작했습니다. 기본적으로는 Emmet의 문서화 내용들을 정리하는 것을 방향으로 삼았으며, 가능한 짧고 간결하게 핵심만 정리해서 찾아보기에 좀 더 편한 것으로 만들어 봤습니다. 1. Emmet(에밋) 이란? Emmet(에밋)은 HTML과 CSS 등의 문서를 편집할 때 보다 빠르게 작업할 수 있도록 도와주는 텍스트 편집기용 플러그인입니다. 원래는 Zen Cod.. 2022. 5. 15. [VSC] 선택영역 태그로 감싸기, 선택한 코드 Emmet 약어로 Wrap 하기 VSCode, Visual Studio Code로 HTML 코드를 작업하다 보면 코드 블록을 태그로 감싸야하는 경우가 종종 생깁니다. 일반 텍스트 문장 가운데 일부를 스타일을 변경하거나, 어떤 블록을 태그 등으로 묶어야 하는 경우가 있습니다. 비주얼 스튜디오 코드에서 Emmet을 설치한 경우 이 기능을 지원하고 있습니다만, 단축키가 꺼진 채로 설치가 됩니다. 단축키를 설정하고, 이 기능을 사용하면, 좀 더 편리하게 HTML을 편집할 수 있습니다. 1. 선택영역 태그로 감싸기( Emmet 약어로 래핑 ) 기능 확인 1.1 모든 명령어 보기 기능 확인 기능을 찾기 위해서 VSCode의 모든 명령어 보기 기능을 사용합니다. Ctrl + Shift + P 키를 누르면 확인할 수 있습니다. 1.2 블록 선택 선택.. 2022. 5. 12. [VSC] VSCode : HTML 자동 완성 만들기, HTML 사용자 코드 조각 추가 및 삭제 VSCode에서 HTML을 작성하면서 가장 만족하면서 사용하고 있는 기능 가운데 하나가 코드 자동완성 기능입니다. 타이핑 시에도 많은 도움을 주지만 시작하면서 기본적인 HTML 코드 블록을 만드는 것도 귀찮은 일 가운데 하나인데 기본 기능으로 지원하고 있습니다. 그런데 자동완성 기능 가운데서 기본 코드 입력 시 계속 수정을 해야 하는 부분이 있습니다. HTML 파일을 생성하고 처음 입력 시 ! 키를 누르고 Tab 키를 누르면, 위와 같은 HTML 자동 완성 내역을 볼 수 있습니다. 기본적인 요건은 만족하는데 매번 빨간색으로 표시한 한글 부분과 viewport 부분은 HTML 샘플 작성이나 연습에는 굳이 필요하지 않은 부분입니다. 그래서 사용자 정의 기능을 사용하여 lang="en"부분과 viewport .. 2022. 5. 10. [VSC] VSCode : 자동 줄바꿈 설정, Word Wrap VSCode, Visual Code Studio를 처음 설치하고 코딩을 하면 자동 줄 바꿈 설정이 되어 있지 않습니다. 일반적으로 사용하는 곳에서는 무리가 없지만, 좀 더 짧은 코딩 스타일을 유지하려고 하거나, HTML 편집에서 본문의 내용이 길게 입력되어 있는 경우 자동 줄 바꿈이 켜져 있지 않다면 소스를 보기 위해서 스크롤바를 많이 사용하게 되어 불편한 경우가 있습니다. 최근에 VSCode를 설치하고 사용해보니 평소에는 문제가 없다가 HTML을 쓰면서 눈에 띄어서 자동 줄바꿈 설정을 하는 방법을 찾아보게 되었습니다. 1. 자동 줄바꿈 설정 Word Wrap의 기본값은 Off입니다. 설정 화면에서 영문으로 Word Wrap 설정 부분을 찾아서 설정을 바꾸어주면 간단히 해결됩니다. Word Wrap 설정.. 2022. 5. 10. [VSC] VSCode : Live Server 127.0.0.1 페이지가 작동하지 않습니다. 오류, 인터넷 브라우저 설정, 한글 파일명과 Live Server VSCode, Visual Studio Code를 사용하면서 많은 확장팩을 사용하여 보다 편리하게 프로그래밍을 할 수 있습니다. 그중에서도 프런트엔드 작업에서 HTML 화면을 확인하기 위해서 Live Server를 사용하는데 설치 후 화면이 뜨지 않는 오류가 발생할 수 있습니다. Live Server 동작시 127.0.0.1 페이지가 작동하지 않습니다. ERR_EMPTY_RESPONSE 가 뜨는 경우가 있습니다. Live Server 설정에서 간단히 해결할 수 있습니다. 1. Live Server, 127.0.0.1 페이지가 작동하지 않습니다. VSCode에서 Live Server를 사용하려면 확장팩을 설치한 다음, 코드 작성 페이지에서 마우스 우측 버튼을 클릭하면 나오는 Open with Liver S.. 2022. 5. 9. 이전 1 2 3 다음
