익스텐션 종류 - Material Thema: 테마 색 확장 익스텐션 - Material Icon: 테마 아이콘 익스텐션 - Auto Rename Tag: 변수 양끝에 태그 값 자동변경 익스텐션 - HTML to CSS: 텍스트 자동완성 익스텐션 - HTML CSS Support: CSS와 HTML 관련된 텍스트 연계 익스텐션 - CSS Peek: 연계되어 있는 CSS 클래스로 클릭만 하면 바로 이동할 수 있도록 해주는 익스텐션 - Autoprefixer: 새로운 기능을 실험해볼 수 있도록 도와주는 익스텐션 - Bracket Pair Colorizer: 코드들을 색깔을 입혀서 가독성을 높여주는 익스텐션 - indent-rainbow: 코드의 가독성을 더 높여주는 익스텐션 (클래스간 앞에 채워진 빈공간을 무지개 색깔로 분류해서 클래스간 차이를 분명하게 나누어줌) - live-server: 새로고침 하지 않아도 코드들이 자동 새로고침이 되어 내가 수정해 집어넣은 코드를 실시간으로 수정해 넣어주는 익스텐션
안녕하세요 프런트엔드의 기본이 되는 HTML과 CSS, 그리고 자바스크립트는 시간이 아무리 지나도 새롭게 추가되는 부분은 있어도 아예 변경되는 부분이 없는 언어들입니다. 따라서 설령 2년전 영상이라고 하더라도 현재 시점에서도 반드시 사용되고 필요한 내용이기때문에 걱정하지 마시고 보시면 됩니다. 😀 (참고로 리액트나 뷰 같은 라이브러리/프레임워크는 하루가 다르게 사용법이 달라질 가능성이 높기 때문에 최신 영상을 보시는 게 좋습니다.)
방법은 2가지입니다. 1. 크롬 브라우저를 컴퓨터의 기본 브라우저로 설정한다. 2. 윈도우 기준으로 ctrl + , 를 누르면 settings 탭이 열립니다. 거기서 liveServer.settings.CustomBrowser 라고 검색하시면 "Live Server > Settings: custom browser"라고 나옵니다. 그 아래 셀렉트 박스에서 chrome을 선택하시면 됩니다 :)
안녕하세요! 영상 잘 보고 왔습니다! 다만 한 가지 문제점이 생겼는데요 Commend Palette에서 Autoprefixer : Run을 실행했을 때 [Autoprefixer] Cannot execute Autoprefixer because there is not supported languages. Supported: LESS, SCSS, PostCSS and CSS. 오류가 뜨는데 어떻게 해결할 수 있을지 여쭤보고자 합니다!!
익스텐션의 문제이고 저는 경험해보지 못한 상황이라서 정확한 답변은 어렵지만, 익스텐션을 설치하고 재설치를 해보시거나, VSCODE를 껐다가 다시 키시거나 www.freecodecamp.org/news/visual-studio-code-live-server-not-working/ 블로그의 해결법을 참고하시는 등의 조치를 취할 수 있을 것 같네요!
안녕하세요 코딩 공부해보려고 비주얼스튜디오 깔아서 플러그인 설치 했는데 live server 설치하구 확인하려는데 명령 'Live Server: Open with Live Server'에서 오류(command 'extension.liveServer.goOnline' not found)가 발생했습니다. 이렇게 뜨면서 창이 아예 안열리더라구요..ㅠㅠ 어떻게 해결해야 할까요 .. ?
원격지(remote)에 있는 파일은 내 로컬 파일이 아니기 때문에 VSCODE에서 검색을 할 수 없습니다. VSCODE의 검색은 로컬 파일만 찾아주는 기능이므로, 반드시 내 로컬에 있는 파일만 가능합니다 :) 그래서 만약 원격지를 굳이 하고 싶으시다면, 원격지로 연결하고 원격지 소스를 로컬로 다 내려 받은 다음에 검색하셔야합니다.
hong.adfeel.info/frontend/html%EC%97%90%EC%84%9C-css%EB%A5%BC-%EC%82%AC%EC%9A%A9%ED%95%98%EB%8A%94-%EB%B0%A9%EB%B2%95%EC%9D%B8%EB%9D%BC%EC%9D%B8-%EC%8A%A4%ED%83%80%EC%9D%BC-%EC%99%B8%EB%B6%80%EC%8A%A4%ED%83%80%EC%9D%BC/ 이 블로그 보시고 외부 스타일 시트 방법으로 해보시면 되겠습니다!
버전이 달라서 그런지는 모르겠는데 처음 비쥬얼스튜디오를 설치한후에 Material icon 같은 경우는 다운받고 바로적용이 안되고 커맨드에서 또 지정을 해줘야 적용이 되더라구요!
경험 공유 감사합니다 :)
일단 저는 경험해보지 못한 경우라서 다른 분들도 도움 되시라고 고정 댓글해놓을게요! ^^
이렇게 소중한 영상 업로드 해주셔서 정말 감사드립니다 ^^ 도움이 많이 되었습니다💛
vs code 설치하고 C/C++ 환경 설정을 못해서 헤매고 있는 중인데, 이 강의를 통해서 여러가지 이해가 되었습니다. HTML도 시작했는데 큰 도움이 되었습니다. 감사합니다.
도움이 되셨다니 다행입니다 ~!
수코딩님 감사합니다 9개 익스텐션 하나하나 다 주옥같네요 ㅎㅎ 번창하시길 바랍니다 ~~
감사합니다 🙏
코딩을 너무 배우고 싶었는데 덕분에 알아가고 있어요! 너무 감사합니다 ㅜ.ㅜ
감사합니다 ! 조금이라도 도움이 되셨으면 좋겠어요!
와우~ 하나 하나 따라서 설치해 봤는데 너무 좋네요~ VS Code가 기본적인 건 알아서 탑재를 하고 on/off 할 수 있었으면.. 하는 생각도 드네요. 감사합니다.~~
정말 그럴수 있다면 편하긴 하겠네요 ㅎㅎ
기본적으로 탑재되어 나오는 유료 제품이 있습니다 webstorm 이런 프로그램이죠.
영상 퀄리티가 아주 좋네요. 도움되었습니다
감사합니다!
정말 도움 많이 됬습니다^^
아주 보석 같은 강의 감사드립니다
감사합니다 🙏
진짜 갬동임
수코딩님 이즈 갬동
감사합니다 🙏
익스텐션 종류
- Material Thema: 테마 색 확장 익스텐션
- Material Icon: 테마 아이콘 익스텐션
- Auto Rename Tag: 변수 양끝에 태그 값 자동변경 익스텐션
- HTML to CSS: 텍스트 자동완성 익스텐션
- HTML CSS Support: CSS와 HTML 관련된 텍스트 연계 익스텐션
- CSS Peek: 연계되어 있는 CSS 클래스로 클릭만 하면 바로 이동할 수 있도록 해주는 익스텐션
- Autoprefixer: 새로운 기능을 실험해볼 수 있도록 도와주는 익스텐션
- Bracket Pair Colorizer: 코드들을 색깔을 입혀서 가독성을 높여주는 익스텐션
- indent-rainbow: 코드의 가독성을 더 높여주는 익스텐션 (클래스간 앞에 채워진 빈공간을 무지개 색깔로 분류해서 클래스간 차이를 분명하게 나누어줌)
- live-server: 새로고침 하지 않아도 코드들이 자동 새로고침이 되어 내가 수정해 집어넣은 코드를 실시간으로 수정해 넣어주는 익스텐션
Bracket Pair Colorizer은 이제 vscode에 기본 내장되어 있습니다. 별도로 설치하지마세요!
훌륭한 강의 감사드립니다.
감사합니다 🙏
익스텐션=플러그인 설명부터 코딩에 대한 이해가 잘되네요 ㅋㅋ감사합니다~
감사합니다 ~!
잘 봤습니다. 감사합니다~~~
^^ 잘보셨다니 다행입니다!
구독하고갑니다~^^
감사합니다!
아주아주 좋아요 ㅎㅎ
대박 굳!
감사합니다 🙏
정말감사합니다
영상 잘 봤습니다! 근데 저는 live server로 열때 internet explorer로 열리더라구요 chrome으로 열 수 있는 방법이 따로 있을까요?
오 설정여기저기 뒤져가며 해결했습니다!!ㅋㅋ
@@예린-o7o 대단하시네요!
좋은 영상 정말 감사합니다! 소개해주신 익스텐션 중 bracket pair colorizer 2를 검색해 보니 이름 앞에 [deprecated] 라고 적혀 있던데요. 버전이 바뀐 게 아닐까 싶은데, 이것 대신 어떤 익스텐션을 설치하는 게 좋을까요?
해당 익스텐션은 이제 VSCODE의 기본 설정으로 포함되었습니다. 삭제하시고 설정에서 'bracket pair colorization'에 enabled 체크하시면 됩니다~!
오늘부터 아재지만 열공하려고합니다 잘부탁드려요
화이팅입니다~
영상 보고 공부를 하고 있습니다.
HTML CSS Support
기능이..아무리 재부팅 그리고 재설치를 해봐도 실행이 되지 않습니다.
왜 그런 건지 알 수 있을까요?
윈7 64비트 운영체제에서 학습 하고 있습니다.
해당 익스텐션은 두 개의 조건이 필요합니다.
1. HTML과 CSS가 연결되어 있어야합니다.
2. CSS 코드가 저장이 되어져 있어야합니다.
이 조건을 맞추어도 되지 않을까요?
@@sucoding 넵 한 번 확인하고 해결해 보겠습니다.
안녕하세요 수코딩님! 방금 웹개발 어떤 언어로 시작하지? 라는 영상을보고 너무 잘 설명해 주셔서 정주행 해보려고 합니다. 그전에 질문 하나 드려도 되나요? 입문편 영상이 2년전 영상인데 지금 배워도 괜찮을까요? 많이 달라지거나 해서 중간에 헷갈릴까 좀 걱정이네요 ㅎㅎ
안녕하세요 프런트엔드의 기본이 되는 HTML과 CSS, 그리고 자바스크립트는 시간이 아무리 지나도 새롭게 추가되는 부분은 있어도 아예 변경되는 부분이 없는 언어들입니다.
따라서 설령 2년전 영상이라고 하더라도 현재 시점에서도 반드시 사용되고 필요한 내용이기때문에 걱정하지 마시고 보시면 됩니다. 😀
(참고로 리액트나 뷰 같은 라이브러리/프레임워크는 하루가 다르게 사용법이 달라질 가능성이 높기 때문에 최신 영상을 보시는 게 좋습니다.)
@@sucoding 감사합니다 영상 정주행 잘 하겠습니다! 그리고 기회가 되면 책도 꼭 볼게여 !
안녕하세용! 영상보고 따라하고있는데,, 혹시 한글판 익스텐션을 설치해서 작업을 해도 될까요??
아니면,,그냥 영문판을 하면서 영문에 익숙해지는게 나을까요?
저는 개인적으로 영문에 익숙해지면서 하는 게 더 좋다고 생각하고 있습니다 :)
@@sucoding 조언 감사합니다!
초반엔 조금 불편해도 그냥 영문판으로 사용해서 저도 익숙해져볼게요🙏
19:48 저는 브라우저가 크롬이아니아 익스플로우로 되어있어요 크롬으로 설정하는방법좀 알려주실수시면 감사하겠습니다...
방법은 2가지입니다.
1. 크롬 브라우저를 컴퓨터의 기본 브라우저로 설정한다.
2. 윈도우 기준으로 ctrl + , 를 누르면 settings 탭이 열립니다. 거기서 liveServer.settings.CustomBrowser 라고 검색하시면 "Live Server > Settings: custom browser"라고 나옵니다. 그 아래 셀렉트 박스에서 chrome을 선택하시면 됩니다 :)
쌤~~~~~~~ 정리하면서 보고있는데 css peek 까지 총 10개에요 ㅎㅎㅎ
헛.. 한.. 한개는 보너스.. ?! :)
css에서 float 함수?는 별로 안중요한가요? 강의에 없는거같아서요!
중요합니다. 다만 유튜브 강의에는 없네요!
코딩지옥에서 꺼내주심에 감사합니다~!!
하터면 죽어날 뻔 했어요
ㅎㅎ 도움이되셨길 바랍니다!
HTML to CSS autocompletion이거는 현재 없어졌나요? 안보여서요ㅜㅜㅜ 강의 잘듣고 있습니다!
안녕하세요 :) 만약 잘 안나오시면 제작자 이름으로 검색해보시겠어요? 검색창에 HTML to CSS autocompletion 대신에 "solnurkarim"이라고 검색해보시민 됩니다!
@@sucoding 저도 이게 없어서 혹시 질문하신 분이 없을까 해서 댓글 보니 있네요 감사합니다
@@ladolcevitashu 캬~ 보통 이렇게 생각하기 힘든데 좋은 사고방식인것 같아요 ㅎㅎ
혹시 웹개발을 처음하는 수준에서 이런 확장자를 이용하는게 더 나을까요... 뭔가 시작부터 좋은 스킬들을 쓰면서 하는 느낌이라 공부가 제대로 될지 조금 걱정되네요 ㅜㅜ
이건 사람마다 견해가 다를 수 있는데 어차피 코딩을 보조해 줄 뿐, 코딩 실력과는 무관한 익스텐션이므로 써도 된다고 봅니다 :)
몸은 편하게, 공부는 열심히.
@@sucoding 답변 감사합니다 !!
안녕하세요! 영상 잘 보고 왔습니다! 다만 한 가지 문제점이 생겼는데요 Commend Palette에서 Autoprefixer : Run을 실행했을 때
[Autoprefixer]
Cannot execute Autoprefixer because there is not supported languages. Supported: LESS, SCSS, PostCSS and CSS.
오류가 뜨는데 어떻게 해결할 수 있을지 여쭤보고자 합니다!!
오래 되어서 답변 해주실지 모르겠지만 익스텐션들을 인스톨 후에... 동영상에선 바로바로 적용되어서 자동 완성 기능들이 되어지게 나오는데 혹시 설정을 해야하는가요
예를 들면 동영상의 몇분 부분을 보고 그렇게 생각하신걸까요?
@@sucoding 제가 초보라서 그런거 같아요 동영상은 익스텐션 하나하나 인스톨 하는걸 여러번 돌려봐도 제가 이해력이 부족한가..ㅠㅠ여러번 돌려봐도 인스톨후에 어떻게 해야하는지 잘모르겠어요 죄송해요 ㅠ
이제시작하는 초보인데
visual studio code와 visual studo 2019의 차이점은 무엇인가요?
둘 다 에디터라는 점은 같은데, 쉽게 생각해서 스튜디오 2019는 c나 c++에 특화된 언어이고, 스튜디오 코드는 프론트엔드 전반적인 언어에 특성화가 된거라고 이해하시면 될 것 같습니다 :)
강의 감사합니다,
그런데
라이브서버를 설치하고 설정을 오픈으로 해도 텍스트를 적고 저장을 해줘야만 브라우저에 나타나는 것은 왜 일까요? 저절로 강의 대로라면 글씨를 적으면 바로 나타난다고 했었는데요
안녕하세요!
내용 전달에 오류가 있었나보네요!
저장해야 적용되는 게 맞습니다 ^^
맥 사용시에 라이브서버 이용시 자동으로 사파리로 실행이 되는데요 혹시 사파리 말고 자동으로 크롬으로 실행 되게 할수 도있나요
세팅에서 custom browser 검색하시면 나오는 라이브서버 셋팅 변경하시면 됩니다
오 처음 시작이 너무 막막 했는데 친절히 알려주셔서 잘 따라갈 수 있었습니다 좋은 영상 감사합니다 😊
🙏 감사합니다
질문이있는데 ..이게 한글ㅡ영어버전이있는데..
어떤버전으로 연습을하는게 좋은가요?
저는 무조건 영어 버전입니다.
익스텐션이 설치는 됬는데 적용이 안되는 것 같습니다. 어떻게 해결해야하나요 ㅠㅠ 가르쳐주세요
이야 뭔지 모르지만 짱 멋지다
ㅋㅋㅋㅋ 어라? ㅋㅋㅋ
엄첨 나네 금세 10만 되겠어
혹시 git 같은 설정없이 그냥 나 혼자만을 위한 소스관리나 파일 통째로 버전관리 백업을 위한 익스텐션이나 자체 기능이 있을까요? 검색해봐도 안나오네요 ㅜㅜ
그러면 그냥 GIT을 로컬에서만 쓰면 되지 않으실까요? :)
수코딩님 live server를 실행시켰는데 크롬창이 아예 안뜨는 경우는 뭐가 잘못 된거죠? ㅜㅜ 하루죙일 해결 방법을 검색해봐도 모르겠어요
익스텐션의 문제이고 저는 경험해보지 못한 상황이라서 정확한 답변은 어렵지만, 익스텐션을 설치하고 재설치를 해보시거나, VSCODE를 껐다가 다시 키시거나 www.freecodecamp.org/news/visual-studio-code-live-server-not-working/ 블로그의 해결법을 참고하시는 등의 조치를 취할 수 있을 것 같네요!
10:20
수코딩님 live server로 여는데 해당 index.html 파일이 안열리고 listing 이라고 경로 폴더 파일 창이 나오는데. 혹시 해결방법아실까요??
혹시 실행하려는 html 파일을 정확히 더블클릭하여 오픈하시고, 해당 html 탭이 활성화된 상태에서 실행하셔도 그러실까요?
@@sucoding 그냥 해당 html 오른쪽클릭 라이브실행 했습니다
안녕하세요 코딩 공부해보려고 비주얼스튜디오 깔아서 플러그인 설치 했는데 live server 설치하구 확인하려는데
명령 'Live Server: Open with Live Server'에서 오류(command 'extension.liveServer.goOnline' not found)가 발생했습니다. 이렇게 뜨면서 창이 아예 안열리더라구요..ㅠㅠ 어떻게 해결해야 할까요 .. ?
Work-around : C:\Users\[사용자명]\.vscode\extensions\
에서
and Delete the folder ritwickdey.liveserver-5.6.1을 삭제하고 컴퓨터를 재부팅하신 후 다시 설치해보세요!
@@sucoding 헉 해결됬어요! 감사합니다~!
혹시 파일을 만들고 ! 를 치면 단어들이 나와야 하는데 왜 안나오는것일까요?
live server를 설치하고 커멘드에 입력해도 나오지 않아서 삭제 후 재설치를 해도 보이질 않네요ㅠㅠㅠㅠ
오.. 사실 이런 경우는 또 처음 보는 경우긴 한데... 한 번도 안나온다는 소리는 못들었거든요. open folder로 폴더 정확히 여시고 확인해 보신걸까요?
@@sucoding 폴더 적용이 안되어 있었던 것 같아요.
내용 에서 영상에서 내용을 바꾸면 바로 페이지에 적용되는 걸로 보이는데 저는 매번 커멘드 - open with live server를 들어가야 새로고침이 되는데 원래 이런 건가요??
html에 나오는 클래스 이름이.. css 파일에서 자동완성되는 확장기능은 잘되는데.. 그 반대 기능하는 HTML CSS Support는 작동을 안하네요.. 이유가 뭘까ㅠ.ㅜ
html 파일과 css 파일이 연결되어있는지 확인하고 css에서 저장까지 잘 된건지 확인해보셔야할 것 같아요!
html 파일과 css파일이 연결되어있는지 어떻게 확인하나요... 저도 안됩니다
그리고 css peek도 실행이 안됩니다.
vscode ftp 연결 remote시에 전체검색(컨트롤 + 시프트 + F) 이 안되는데 왜그런지 아시나요?
원격지(remote)에 있는 파일은 내 로컬 파일이 아니기 때문에 VSCODE에서 검색을 할 수 없습니다. VSCODE의 검색은 로컬 파일만 찾아주는 기능이므로, 반드시 내 로컬에 있는 파일만 가능합니다 :)
그래서 만약 원격지를 굳이 하고 싶으시다면, 원격지로 연결하고 원격지 소스를 로컬로 다 내려 받은 다음에 검색하셔야합니다.
html과 css는 어떻게 연결하나요? 그래서 HTML CSS Support 와 CSS Peek가 적용이 안됩니다..
hong.adfeel.info/frontend/html%EC%97%90%EC%84%9C-css%EB%A5%BC-%EC%82%AC%EC%9A%A9%ED%95%98%EB%8A%94-%EB%B0%A9%EB%B2%95%EC%9D%B8%EB%9D%BC%EC%9D%B8-%EC%8A%A4%ED%83%80%EC%9D%BC-%EC%99%B8%EB%B6%80%EC%8A%A4%ED%83%80%EC%9D%BC/
이 블로그 보시고 외부 스타일 시트 방법으로 해보시면 되겠습니다!
@@sucoding 감사합니다!!
되돌리기나 새로고침은 어떻게해요? ㅠㅠㅠ
윈도우 기준 되돌리기는 ctrl+z, 에디터 새로고침은 ctrl+R 누르시면 됩니다. :) 에디터 상단의 [Edit] 하위 메뉴에서도 쟈세히 살펴보실 수 있습니다.
@@sucoding 감사합니다 ㅠㅠ
13분경강의중 자동왼성 이왜안되죠 ~
link 태그로 스타일 파일을 연결해야합니다
VS는 무료인가요 ?? 기업용으로 사용해도 되나요 ?
네 사용하셔도 됩니다!
내가 이따 다시보려고 만든 타임라인 8:54
도움이 되시길 바래요!
설치해서 깔았는데 검은화면만 뜨는데 해결방법 아시나요?ㅜㅜ 알려주시면 감사하겠습니다
비주얼스튜디오코드를 실행하면 검은화면만 나오시는건가요? 대략적인 작동 모습을 휴대폰으로 촬영하여 sucoding@naver.com으로 보내주시면 어떤 증상인지보고 도와드릴 수 있으면 도와드릴게요!
아앗..! 주변에 물어 물어서 해결했어요 답변 달아주셔서 감사합니다~^^
처음에 welcome 이 아니라 get started면 어카죠오…..
확인해보니까 welcome이나 get started 페이지나 이름만 다를 뿐 같은 페이지네요 :)
익스텐션이 실행이 안되면 어떻게 해결하나요?
구글링으로 검색해보세요~!
전기 브금이다 ㅋㅋ
배경음악이 졸리네요!
피드백 감사합니다!
감사합니다. 정말 많은 도움이 됐습니다.