coding 259
[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에서 클래스 이름을 적는다. ② [.+클래스명]을 입력하고 아래로 나..
![[VS code] css에서 html class 보기](https://i1.daumcdn.net/thumb/C100x100/?fname=https://blog.kakaocdn.net/dn/c0IOv8/btrkAN1qGNB/aWNdFQsKllZGrQ1tyI0RaK/img.png)
css flexbox 게임으로 배워보자
지난번 포스팅에서 select 게임을 했던 것 기억하시죠? 이번에는 flexbox 게임을 가져와봤습니다. 1. flexbox froggy flexbox는 css에서 그리드를 조절해주는 스타일입니다. display 속성 값으로 사용하고 여러 가지 옵션을 넣어주면 편리하게 사용할 수 있어요. 저도 아직 배우는 중이라 정리가 된다면 이것만 따로 포스팅해보겠습니다. 오늘은 그 옵션을 익혀볼 게임인 flexbox froggy을 소개해드립니다. 보이시는 것 처럼 개구리를 연잎 위로 올려주면 됩니다. 첫 문제인만큼 아예 정답도 알려줍니다. justify-content은 아이템의 배치에 대해서 설정할 수 있는 속성이에요. flext-end는 끝에서 정렬 가로로 되어있으니 오른쪽 정렬이 되겠죠? 그런 속성 값입니다. 자..
들여쓰기 색 넣기 VS code
비주얼 스튜디오 코드의 시각적인 보정 확장 코드를 하나 더 알려드립니다! 1. Indent rainbow indent는 들여 쓰다는 뜻의 영어단어로 들여 쓴 부분을 무지개색으로 만들어주는 확장 기능입니다. 이 기능이 없을 때는 들여 쓴 부분의 공백에 아무것도 없죠? 이제 indent rainbow 확장 기능을 설치해보겠습니다. 왼쪽의 세로 메뉴에서 가장 아래 아이콘 확장을 선택해주시거나 단축키 [Ctrl + Shift + X] 키를 눌러주세요. 검색창에 indent를 써주시면 맨 위에 나올 거예요. indent-rainbow 확장 기능을 선택해주시거나 바로 설치를 눌러주세요. indent-rainbow 설치 방법 확장 > indent 검색 > indent-rainbow 설치 2. 설치 및 확인 위에서 설..
css 선택자 게임
css를 처음 접하시는 분들은 Select. 즉, 선택자를 잡는 것이 어려울 거예요. 저도 처음에는 냅다 외우기만 해 가지고 이해하 하나도 안 됐었거든요. 그런데 이게 게임으로 쉽게 이해하는 방법이 있다고 합니다. 1. 접시 선택하기 https://flukeout.github.io/ CSS Diner A fun game to help you learn and practice CSS selectors. flukeout.github.io 접시를 선택하면 되는 게임이에요. 보기에는 어려워 보이는 데 막상 하면 생각보다 쉽답니다. 오른쪽에 보시면 설명도 나와있어서 살펴보시면 좋아요. 영어 기는 하지만 그래도 대충 해석이 없어도 알 수 있어요. 이렇게 마우스를 올리면 자기가 어떤 태그 인지도 알려줘요 귀엽죠. 접..
vs code 괄호 색 넣어주는 확장 기능 설치해보자
vs code가 아무리 개발환경이 좋다고 해도 인간은 계속해서 더 좋은걸 찾게 됩니다. 1. 확장 탭 비주얼 스튜디오 코드를 열고 왼쪽 아이콘 중 가장 아래에 있는 확장 탭을 열어주세요. 그리고 [Bracket Pari Colorizer]를 검색합니다. 사실은 전부 검색할 필요는 없지만 설명을 위해서 이름을 다 검색해봤어요. 아래를 살펴보니 2가 나왔네요. 2를 설치해보겠습니다. 정리 왼쪽 메뉴 가장 아래에 있는 확장 탭 선택 [Bracket Pari Colorizer] 검색 후 설치 이런 화면이 뜬다면 설치가 완료된 것입니다. 2. SCSS 확인하기 이게 어떤 기능이냐 하면 이렇게 중첩된 괄호를 어디서부터 어디까지가 한 묶음인지 알려주는 기능이에요. 보시면 체크된 부분이 색이 다르죠? 파란 괄호 안쪽에..
