'coding' 카테고리의 글 목록 (15 Page)

비주얼 스튜디오 코드 html 태그 자동으로 바꾸기

html 태그를 수정할 때 여는 태그와 닫는 태그를 모두 수정하는 번거로움이 있죠. 비주얼 스튜디오 코드의 auto rename tag 확장 기능을 사용하면 한 곳만 바꿔도 자동으로 바꿔줍니다. 편리하죠? 1. Auto rename tag 다운로드하기 확장 기능 설치 포스팅을 보셨던 분들이라면 많이 익숙해지셨을 화면이죠? 왼쪽 아이콘 중 가장 아래에 있는 확장 탭을 선택한 뒤 검색 창에 auto를 입력해줍니다. 가장 위에 Auto Rename Tag 확장 기능이 보이시죠? 설치해줍니다. Auto Rename Tag 설치 방법 정리 ① 확장 탭 선택 ② 검색창에 auto 검색 ③ Auto Rename Tag 설치 2. 기능 살펴보기 확장 기능의 상세페이지로 들어와서 어떻게 사용하는지 살펴봅시다. gif 이..

coding/editor · 2021. 11. 23. 09:30

[VS code] css에서 html class 보기

css를 작성하다가 내가 클래스명을 뭐라고 적었더라? 하고 다시 html로 돌아가신 적 있으시죠? 이 확장 기능은 그 불필요한 동작을 줄여주는 좋은 친구입니다. 1. 설치하기 설치방법 ① vs code 에서 왼쪽 메뉴 가장 아래 확장 메뉴를 선택한다. ② 검색창에 html to 를 검색한다. ③ HTML to CSS autocompletion 확장 기능을 설치한다. 확장 기능 HTML to CSS autocompletion 상세 페이지를 보시면 css에서 클래스를 작성할 때 아래 그 이름이 들어가는 클래스명들을 쭉 보여주는 것을 알 수 있습니다. 2. HTML to CSS autocompletion 사용 방법 ① html과 연결된 css에서 클래스 이름을 적는다. ② [.+클래스명]을 입력하고 아래로 나..

coding/editor · 2021. 11. 17. 09:30

css flexbox 게임으로 배워보자

지난번 포스팅에서 select 게임을 했던 것 기억하시죠? 이번에는 flexbox 게임을 가져와봤습니다. 1. flexbox froggy flexbox는 css에서 그리드를 조절해주는 스타일입니다. display 속성 값으로 사용하고 여러 가지 옵션을 넣어주면 편리하게 사용할 수 있어요. 저도 아직 배우는 중이라 정리가 된다면 이것만 따로 포스팅해보겠습니다. 오늘은 그 옵션을 익혀볼 게임인 flexbox froggy을 소개해드립니다. 보이시는 것 처럼 개구리를 연잎 위로 올려주면 됩니다. 첫 문제인만큼 아예 정답도 알려줍니다. justify-content은 아이템의 배치에 대해서 설정할 수 있는 속성이에요. flext-end는 끝에서 정렬 가로로 되어있으니 오른쪽 정렬이 되겠죠? 그런 속성 값입니다. 자..

coding/html + css · 2021. 11. 15. 09:30

들여쓰기 색 넣기 VS code

비주얼 스튜디오 코드의 시각적인 보정 확장 코드를 하나 더 알려드립니다! 1. Indent rainbow indent는 들여 쓰다는 뜻의 영어단어로 들여 쓴 부분을 무지개색으로 만들어주는 확장 기능입니다. 이 기능이 없을 때는 들여 쓴 부분의 공백에 아무것도 없죠? 이제 indent rainbow 확장 기능을 설치해보겠습니다. 왼쪽의 세로 메뉴에서 가장 아래 아이콘 확장을 선택해주시거나 단축키 [Ctrl + Shift + X] 키를 눌러주세요. 검색창에 indent를 써주시면 맨 위에 나올 거예요. indent-rainbow 확장 기능을 선택해주시거나 바로 설치를 눌러주세요. indent-rainbow 설치 방법 확장 > indent 검색 > indent-rainbow 설치 2. 설치 및 확인 위에서 설..

coding/editor · 2021. 11. 12. 09:30

css 선택자 게임

css를 처음 접하시는 분들은 Select. 즉, 선택자를 잡는 것이 어려울 거예요. 저도 처음에는 냅다 외우기만 해 가지고 이해하 하나도 안 됐었거든요. 그런데 이게 게임으로 쉽게 이해하는 방법이 있다고 합니다. 1. 접시 선택하기 https://flukeout.github.io/ CSS Diner A fun game to help you learn and practice CSS selectors. flukeout.github.io 접시를 선택하면 되는 게임이에요. 보기에는 어려워 보이는 데 막상 하면 생각보다 쉽답니다. 오른쪽에 보시면 설명도 나와있어서 살펴보시면 좋아요. 영어 기는 하지만 그래도 대충 해석이 없어도 알 수 있어요. 이렇게 마우스를 올리면 자기가 어떤 태그 인지도 알려줘요 귀엽죠. 접..

coding/html + css · 2021. 11. 10. 09:30

coding 265