잔디 심는 블로그

병원 가세요.

세 줄 요약 그래프, 다이어그램에는 그냥 Graphviz, Mermaid 쓰자. 정확하지 않아도 된다면 svgbob은 정말 좋은 대안이다. 정확도가 필요하다면 그냥 svg 쓰자. 배경 블로그든 뭐든, 정보 전달의 용이성을 위해 글에 시각 자료를 첨부할 때가 많이 있다. 이미지 표, 리스트, 각종 강조 효과 아스키 아트? 정보성 시각 자료의 유형은 이 셋 정도가 있는 듯하다. 각자 장단점이 있다. 이미지 표, 리스트 등 아스키 아트 장점 보기 좋다. 이미지를 만들지 않아도 된다. 데이터를 복사하기 용이하다. 일단 보이기는 한다. 가볍다. 복사가 되긴 한다. 단점 만들고 관리하기 어렵고, 텍스트 복사도 어렵다. 이것도 나름 공 들일 수 있는데, 어차피 이미지가 더 보기 좋다. 하지만 보기도 힘들고, 심지어 ..

vscode-icons 확장에 대해 간단하게 알아보겠습니다. Visual Studio Marketplace에서 확인할 수 있습니다. 이 글은 v11.10.0 버전을 기준으로 작성되었습니다. 세 줄 요약 파일명, 폴더명 등에 따라 적당한 아이콘으로 표시됩니다. vsicons.dontShowNewVersionMessage는 true로 설정! 아이콘 테마 기존에 쓰고 있는 게 따로 없다면 꼭 한 번 써 보세요 기능 커맨드 팔레트에서 Preferences: File Icon Theme을 선택, VSCode Icons를 선택하면 활성화됩니다. 파일 익스플로러에서 파일명, 폴더명에 따라 적당한 아이콘으로 보여줍니다. (지원하는 파일명/폴더명은 각 링크를 참고해 주세요) 여러 종류의 파일이 있을 때 (여러가지 툴의 ..

Code Spell Checker 확장에 대해 간단하게 알아보겠습니다. Visual Studio Marketplace에서 확인할 수 있습니다. 이 글은 v2.1.6 버전을 기준으로 작성되었습니다. 세 줄 요약 코드에서 자동으로 영어 스펠링 검사, 이상한 부분 강조 표시 단어를 직접 사전에 추가할 수 있음, workspace settings에 추가하는 걸 권장 큰 파일을 열었을 때는 많이 느려질 수도 있어요! 기능 코드에서 스펠링이 틀린 부분을 찾아서 강조해줍니다. 오타를 쉽게 발견할 수 있습니다. 저 문제의 Quick Fix에서 비슷한 단어를 보고, 바로 그 단어로 수정할 수 있습니다. 그런데 오타가 아니라면? 예를 들어 프로젝트 이름이 wrold일 수도 있겠죠? 그런 경우에는 그 단어를 사전에 직접 추..

SynthWave '84 테마에 대해 간단하게 알아보겠습니다. Visual Studio Marketplace에서 확인할 수 있습니다. 이 글은 v0.1.11 버전을 기준으로 작성되었습니다. 세 줄 요약 무지개색, 반짝이는 테마! 정말 예뻐요. 제가 쓰는 테마고, 강력 추천합니다 :+1: 코드 반짝이는 건 커맨트 팔레트에서 SynthWave '84: Enable Neon Dreams로 활성화 활성화를 하면, vscode의 내부 파일을 수정해요. 물론 안 해도 쓸 수 있어요 :) 사용법 이 테마는 특별히 설치하면 바로 모두 적용되는 게 아니라 SynthWave '84: Enable Neon Dreams 커맨드를 실행해서 활성화를 해야 합니다. (활성화 후 재시작이 필요합니다.) 활성화와..

Auto Close Tag 확장에 대해 간단하게 알아보겠습니다. Visual Studio Marketplace에서 확인할 수 있습니다. 이 글은 v0.5.14 버전을 기준으로 작성되었습니다. 세 줄 요약 XML 스타일의 여는 태그를 작성하면 닫는 태그를 자동으로 만들어줍니다. HTML이나 XML, JSX같은 코드를 작성할 일이 있다면 추천합니다. 개인적으로 "auto-close-tag.SublimeText3Mode": true 설정 추천 기능 여는 태그를 입력하면 닫는 태그를 자동으로 추가해줍니다. 그렇게 자동으로 닫는 태그가 생기면, 커서는 태그 사이에 놓입니다. Sublime Text 3 스타일로 닫을 수 있다는데, 이건 좀 있다 알아봐요~ 입력할 때만 아니라 원할 때 호출할 수 있도록 커맨드와 단축..

2018년 말쯤에 글 몇 개, 또 2019년 말쯤에 글 몇 개... 지금은 무려 2022년! 아무것도 안 한 것 같은데 시간 정말 빠르네요 티스토리 블로그도 바뀐 게 많은 것 같아요. 마크다운 모드가 생겨서 써 보는데 안 되는 건 좀 많네요 :thinking: 새로 작성할 것도 있고 원래 작성하던 것도 많은데, 다시 시작 해 볼게요 :)

HTML 입문자를 위해 간단히 HTML 문법을 정리해 보겠습니다. 다른 코드를 보고 이게 정상적인 HTML이 맞는지 검증하는 데는 별 관심이 없습니다. 실제로 html, head, body 태그가 생략 가능하다거나 li, dt, dd, p 닫는 태그가 생략 가능하다거나, 혹은 XML같은 네임스페이스라거나 하는... 기타 등등 별 이상한 것도 쓸 수는 있겠지만, 좋은 코드를 짜는 데 있어서 그딴 거 필요 없습니다. HTML 문법을 꿰는 것이 아니라, 좋은 HTML 코드를 짜는 것이 목표입니다. 자세히 들어가지는 않고, 간단히 필요한 문법만 보겠습니다. "굳이 나는 모든 문법을 자세히 알아야겠다!" 하는 분이 계시다면 여기로... 우선 간단한 샘플 페이지를 보겠습니다. 테스트 줄바꿈 테스트 123 123 직..

HTML, CSS를 처음 시작하려고 HTML이나 CSS를 검색하면 관련 검색어나 검색어 자동완성으로 HTML5, CSS3도 나오는 것을 볼 수 있습니다. HTML5와 CSS3은 뭔가요? HTML, CSS와는 다른 건가요? HTML4, CSS3도 있나요? 이런 의문이 들 수 있습니다. 혼란스러울 수 있겠는데요, 간단히 정리해드리겠습니다. HTML5는 HTML이고, CSS3은 CSS입니다. HTML4, CSS2도 있지만, 그런 거 신경 안 써도 됩니다. 안 쓸 거에요... 지금 HTML이라고 하면 당연히 HTML5를, CSS라고 하면 당연히 CSS3을 말하는 게 맞으니 안심하고 잊으셔도 됩니다. 2022/02/08 - 그래서 저도 이번에 카테고리 정리하면서 HTML5 CSS3 이름 그냥 HTML CSS로 바..

HTML 표준 스펙은 https://html.spec.whatwg.org/multipage/ 여기에서 확인할 수 있습니다. 웹 퍼블리싱 정복 카테고리에는 주로 HTML 표준 스펙에 근거해서 올릴 예정입니다. 저도 다 알고 쓰는 건 아니지만, 궁금한 게 있으시다면 언제든 댓글 남겨주세요! 수정: 브라우저나 HTML 최적화 프로그램 같은 거 만들 거 아니면 굳이 볼 필요 없습니다.