친절한효자손 취미생활

코딩의 절대강자, VSC 마이크로소프트 비쥬얼 스튜디오 코드, 영어로는 Microsoft Visual Studio Code이며 줄여서 VSC라고 부르고 있죠. 대부분의 소프트웨어는 환경 설정이라는게 있습니다. 사용자가 본인의 입맛에 맞게 커스텀을 하는 것이라고 생각하시면 됩니다. 그 중 하나가 바로 단축키! 단축키를 본인에게 익숙하게 세팅하면 작업 능률이 급격히 올라갑니다. 저 역시 자주 사용하는 프로그램들은 단축키를 제가 좋아하는 방식으로 모두 수정 완료했습니다. 특히 응용 소프트웨어가 많으면 많을수록 단축키가 겹치는 문제가 발생하기에 이러한 수동 단축키 설정은 어떻게보면 거의 필수 과정이라고 생각합니다. 그러면 VSC 단축키 설정은 어떻게 하는지 살펴보도록 하겠습니다. VSC를 실행 후 왼쪽 하단에 보이는 톱니 모양 아이콘을 눌러줍니다. 설정 버튼이죠. 바로 가기 키 라는 항목으로  들어갑니다. 단축키는 Ctrl+K Ctrl+S 입니다. 둘 중 하나가 아니라 둘 다 콤보로 사용해야하는 단축키입니다. VSC에서는 이렇게 콤보 단축키가 꽤 많아요. 바로 가기 키 탭이 열렸습니다. 보시면 엄청나게 다양한 기능에 대한 단축키 설정이 이미 많이 되어있음을 알 수 있습니다. 그말인즉슨! 다양한 기능에 대해서 사용자 마음대로 단축키 수정이 가능하다는 뜻입니다. Beauty, Beautify 원래는 Beautify를 가장 많이 사용했습니다. 그런데 업데이트를 너무 안 해서 VSC 확장 플러그인에서 쫒겨났어요. 이제는 공식 지원을 하지 않습니다. 따라서 이 글을 작성하는 시점에서의 선택지는 Beauty 뿐입니다. 둘 다 코드를 이쁘게 정렬해주는 플러그인이라 거의 필수 VSC 플러그인이라고 생각하시면 됩니다. Beauty의 기본 단축키는 Ctrl+Shift+B 입니다. 저는 이것을 Ctrl+Shift+' 로 변경할 것입니다. B키는 이미...

즐거운 코드 정리 제목 그대로입니다. 지금 이 글도 열심히 작성 후 글 발행 전 코드 정리를 대대적으로 싹 다 할 겁니다. 근데 이제막 구글 블로그(Blogger)를 시작하시는 분들 중에서 이 글을 보신다면 약간 오해하실수도 있으니까 미리 말씀을 드리겠습니다. 코드 정리, 꼭 해야 할까? 아닙니다. 이건 지극히 자기 만족입니다. 제가 코드 정리를 하는건 일단 개인 성격입니다. 저는 정리하는걸 좋아합니다. 제 방 정리도 나름 잘 해 놓은 편이라고 생각하고요. 무엇보다도 컴퓨터 파일 정리는 기똥찹니다. 어디에 어떤 성격의 파일들을 모아놨는지 정확하게 기억합니다. 그렇기에 이렇게 10년 넘게 블로그 글쓰기가 가능한 것입니다. 코드 정리를 해두면 일단 차후에 코드 편집이 편해집니다. 물론 글을 한 번 작성하면 이후에는 왠만한 특수 상황이 아닌 이상 편집은 잘 하지 않지만 부득이하게, 혹은 반드시 꼭 추가해야 하는 업데이트 내용이 있는 상황에서는 글 수정을 하게 됩니다. 이때 코드 정리를 해뒀다면 HTML 모드에서 편집 시 위치 찾기가 매우 쉬워집니다. 구글 블로그에서 글은 HTML 태그 정리 중 인라인(In-Line) 방식으로 채워집니다. 저는 최초 HTML 웹 학원에서 배울 때 인라인 방식보다는 코드가 정리된 상태로 배웠기에 초두 효과 때문인지는 모르겠으나 우리가 일반적으로 글을 작성할 때 줄 내려쓰기하는 것처럼 태그 또한 그렇게 정리가 되는게 확실히 가독성은 더 좋더라고요. 그렇기에 코드 정리는 저에게 있어서 필수 조건이 되었고 이후에도 계속해서 코드 정리를 하는게 습관처럼 굳어졌습니다. 티스토리 스킨 개발때도 당연히 코드 정리는 필수로 적용되었기에 차후 업데이트나 수정시에도 매우 유리했고요. 확실한건 SEO에 큰 차이점이 없다는 것입니다. 유독 블로그 관련 글쓰기 콘텐츠를 살펴보면 SEO라는 단어가 많이 나오고, 구글 검색이 좋아하는 SEO가 어쩌니~ 글쓰기는 SEO가...

VSC 프로그램에서 글꼴 변경은 크게 두 가지 영역으로 나뉠 수 있습니다. 첫번째는 UI 메뉴 부분이며 나머지 하나는 코드 부분입니다. 아마 대부분 많은 분들께서 원하는 폰트 크기 변경은 코드 부분이겠죠? 아무튼 이 두가지 모두 변경하는 방법을 각각 안내해 드리겠습니다. 1. UI 메뉴 폰트 크기 변경 지금 보시는 것처럼 UI크기가 원하는대로 조절 되지요? 간단합니다. Ctrl과 +/- 키를 입력하면서 크기 변경이 가능합니다. 브라우저 폰트 크기 변경과 똑같습니다. 어렵지 않죠? 2. 에디터 코드 부분만 폰트 크기 변경 제가 원했던건 바로 2번입니다. 이것도 간단합니다. 하지만 그 전에 약간의 설정을 해야 합니다. 파일 > 기본 설정 > 설정 으로 들어갑니다. 단축키는 Ctrl+, 입니다. 검색 키워드 입력창에 mouse wheel 이라고 입력하면 editor : Mouse Wheel Zoom 이라는 옵션이 검색될 겁니다. 체크가 기본적으로 풀려있을텐데 이것을 체크해줍니다. 이렇게 설정 후 이제 Ctrl 키를 누른 상태에서 마우스 휠을 위아래로 조절해 보세요. 그러면 UI는 그대로 고정되어있고 에디터 코드 부분만 폰트 크기가 변경됩니다. 이렇게해서 UI는 UI대로 폰트 크기 조절을, 에디터 코드 부분도 별도 조절을 할 수 있게 되었습니다. 3. 정확한 폰트 크기 설정 방법 아까 환경 설정 화면에서 텍스트 편집기 > 글꼴 로 들어가보시면 오른쪽에 Font Size 옵션이 있을겁니다. VSC 기본값은 14이므로 이것을 원하는 값으로 변경하시면 됩니다. 참고로 폰트 크기 단위는 px 입니다. 오늘 내용 끝!

VSC에서도 코드를 보기 편하도록 화면의 가로창에 코드가 끝까지 닿아 넘쳐 흐르는 경우 자동으로 줄바꿈을 하는 기능이 있습니다. 단축키는 Alt+/ 입니다. 하지만 이걸 매번 실행할때마다 사용하면 번거롭잖아요? 그래서 아예 환경 설정에서 자동 줄 바꿈을 상시 적용시키는 방법이 있습니다. 이렇게 하시면 됩니다. VSC를 실행합니다. 그리고 파일 > 기본 설정 > 설정 으로 들어갑니다. 단축키는 Ctrl+, 입니다. 설정 탭이 떴습니다. 검색창에 word wrap 이라고 입력해 보시면 해당 키워드가 포함된 설정 옵션들이 몇 개 검색될 겁니다. 그 중에서 Editor: Word Wrap - 줄 바꿈 여부를 제어합니다 라는 옵션의 값을 OFF에서 ON으로 변경합니다. 그리고 VSC를 재시작하면 이제부터 자동 줄바꿈 모드가 됩니다. 간단하죠? 이제 편하게 VSC 생활을 만끽하시기 바래요. 오늘 내용 끝!

HTML을 편집하거나 제작하다보면 색상 수정하는 과정이 꽤 많이 발생합니다. 그러면 원하는 색상을 일일히 찾아보고 그것을 포토샵에서 스포이드로 찍어서 16진수 색상표를 살펴보는 사람들이 간혹 있더군요. 이번에 HTML 기초반을 그냥 재능기부차 열었는데 색상표를 불편하게 확인하시더라고요. 그래서 저가 사용하는 방법을 스윽 안내해 드렸는데 엄청 좋아하셨습니다. 의외로 쉬운 기능들을 잘 모르시는 분들께서 계시는 듯 하여 한번 더 온라인상으로 널리 퍼뜨려야겠다고 생각했고 그렇기에 이렇게 글을 작성하게 되었습니다. VSC 색상 변경 이건 뭐 대부분의 HTML 코드 편집기에 있는 기능입니다. 만약 없으면 별도의 확장 플러그인을 설치하면 됩니다. VSC의 경우에는 Color Picker 라고 검색하시면 관련 확장 프로그램이 엄청 많이 나올건데 그냥 가장 많이 다운로드받은 녀석으로 설치하시면 됩니다. 저는 VS Color Picker 라는 확장플러그인을 사용중입니다. VSC의 컬러 코드에서 마우스를 가만히 올려두면 이렇게 새로운 컬러 팝업창이 뜹니다. 여기에서 원하는 색으로 수정해서 사용하면 됩니다. 다만 단점이라고 한다면 16진수 코드가 아닌 RGB값으로 수정된다는 것입니다. 저는 16진수가 보기 편해서 이게 좀 거슬리더라고요. 물론 투명까지 고려하면 RGB가 훨씬 편합니다. 16진수의 경우에는 투명을 적용시키려면 opacity를 또 사용해야 하니까요. VS Color Picker 를 사용하면 위의 이미지처럼 나타납니다. 색상코드에서 마우스 왼쪽 클릭을 한 번 하면 잠시 뒤 매우 작은 색상표 팝업창이 뜹니다. 이때 파레트 모양 아이콘을 누릅니다. 그러면 많이 익숙한 UI가 뜹니다. 그렇습니다. 마이크로소프트에서 뭔가 색 변경할때 뜨는 그 창입니다. 이것으로 색상을 변경하면 16진수 코드 그대로 변경됩니다. RGB로는 변경되지 않습니다. 색상표 사이트 ...