coding 259
스파르타 코딩 클럽 후기 및 클릭하면 팝업창 나오게 하기
스파르타 코딩 클럽 내일 배움 카드를 이용해 강의를 듣고 있습니다. (팝업창 관련 내용은 바로 2번으로 가주세요.) 1. 스파르타 코딩 클럽 후기 https://spartacodingclub.kr/ 스파르타코딩클럽 왕초보 8주 완성! 웹/앱/게임 빠르게 배우고 내것을 만드세요! spartacodingclub.kr 스파르타 코딩 클럽 특별 관리 시스템 스파르타 전용 메타버스는 온라인 교실이라고 생각하시면 됩니다. 듣기 전에는 이게 뭐가 좋은 거지?라고 생각했는데 담당 매니저님이 매일 관리해주시고 같이 공부하시는 분들도 옆에 계신 느낌이라 강의를 더 열심히 듣게 됩니다. 온라인 강의에서 오프라인 강의 효과를 느낄 수 있죠. 인간은 생각보다 의지력이 약하기때문에 이런 반강제적인 시스템 온라인 수강생들에게 좋다..
비주얼 스튜디오 코드 유용한 단축키 - 파일 찾기 (VS code)
알고 있으면 유용한 비주얼 스튜디오 코드 단축키 퀵오픈 사용방법을 알려드릴게요. 다른 말로 파일 찾기! 1. 파일 찾기 Quick Open 퀵오픈 기능은 파일을 빠르게 찾을 수 있는 기능입니다. 비주얼 스튜디오 코드에서 단축키로는 [Ctrl + P]로 열 수 있습니다. 위쪽에 검색창이 뜨는데 여기서 찾고자 하는 파일명을 검색해주시면 됩니다. 지금은 왼쪽 탐색기에 파일이 2개뿐이지만 파일이 많다면 스크롤로 찾아보기 힘들어집니다. 그럴 때 사용하면 유용한 기능입니다. - 파일 찾기 검색 기능을 이용해 파일을 찾아봅시다. 파일명을 전부 입력하지 않고 한 글자만 입력해도 위의 이미지처럼 포함된 파일이 모두 나옵니다. 이름이 헷갈려도 찾기가 편하죠. 2. 탐색기 숨기기 Toggle Sidebar 탐색기를 숨기는 ..
VS code 단축키 명령어 팔레트(Command Palette)
VS code 단축키 중 알아두면 유용한 명령어 팔레트 단축키를 알려드립니다. 1. 명령어 팔레트 Command Palette VS code에서 명령어 팔레트(Command Palette)의 단축키는 Ctrl + Shift + P 입니다. 그 외에도 F1 키를 눌러도 명령어 팔레트를 열 수 있습니다. 명령어 팔레트는 위의 이미지처럼 명령어를 검색해서 사용할 수 있습니다. - 키워드 입력 명령어 팔레트에 찾고자 하는 키워드를 입력하면 키워드가 포함된 작업이 쭉 뜨는데 여기서 원하는 작업을 클릭하거나 선택된 상태에서 엔터를 누르면 명령어가 실행됩니다. 특정 명령어의 단축키를 모르거나 찾기 힘들어도 검색해서 찾을 수 있다는 편리함이 있습니다. 2. 명령어 팔레트 사용하기 파일 저장 VS code에서 명령어 팔..
개발자 도구 이용해 CSS를 효과적으로 보는 방법
개발자 도구에서 CSS를 정리해서 볼 수 있는 방법이 있다는 것 알고 계시나요? 1. 개발자 도구 켜기 개발자 도구 일단 개발자 도구가 무엇이냐면 위의 이미지처럼 코드를 확인해볼 수 있는 창입니다. 내가 짠 코드를 확인해보거나, 다른 사이트의 벤치마킹을 할 때도 주로 사용합니다. - 검사 어떻게 켜느냐. 개발자 도구를 사용할 화면에서 [오른쪽 클릭 > 검사] 메뉴를 선택하면 개발자 도구 창이 뜹니다. 단축키로는 [Ctrl + Shift + I], [F12]를 눌러도 개발자 도구를 열 수 있습니다. 다만 개발자도구의 사용이 막혀있는 페이지에서는 열리지 않을 수 있으니 참고해주세요. 2. CSS Overview 설정 CSS Overview는 CSS의 전체적인 스타일을 확인할 수 있는 기능입니다. 개별적으로 ..
css 변수 사용 방법
홈페이지 제작 시 컬러, 패딩, 마진 등등 반복해서 같은 값을 사용해야 하는 경우가 많습니다. 여기에 변수를 사용하면 웹 페이지의 통일성을 유지하는 것은 물론이고 유지보수도 손쉽게 관리할 수 있습니다. :root :root는 문서의 가장 상단 요소를 선택하는 가상 클래스입니다만, 벌써부터 설명이 어려워졌죠. 간단히 말해 html에서 html 선택자 역할을 합니다. 그런데 변수의 범위를 전체에 적용하기 위해 html 선택자 역할을 하는 가상 클래스를 사용한다고 생각해주세요. ▼ 자세한 설명은 아래 문서를 참고해주세요. https://developer.mozilla.org/ko/docs/Web/CSS/:root :root - CSS: Cascading Style Sheets | MDN CSS :root 의사..
