웹 개발 입문 | 개발환경 구성

유튜브 '짐코딩 GYM CODING' 님의 강의를 통하여 공부한 것을 기록합니다.

✍🏻 HTML&CSS 강의 Ep00 - 강의소개 | 웹 개발 입문 | 함께 웹 개발에 입문해 보는 건 어떨까요?

https://youtu.be/N_nVDZSAjq4?si=TrIelTdFP7NF-3xN

✍🏻 HTML&CSS 강의 Ep01 - 개발환경 구성 | 웹 개발 입문 | 함께 웹 개발에 입문해 보는 건 어떨까요?

https://youtu.be/9o5VuZB5OKw?si=F7HMNzWtM5qyr33b

 

 

f12 우 개발자 도구 크롬에서 지원 개발할 때 편리

 

크롬 브라우저 다운

 

비주얼스튜디오 설치

 

설치 후 첫 실행이라 테마 선택 나옴

선택 후 mark done

 

실습 할 파일 만든 후 열어보기

 

생성 완료

 

visual studio code로 와서

file-open folder

나오는 창 체크

 

왼 우측 작업막대바,액티비티

돋보기 밑부터 순서대로 소스제어, 디버그, 확장프로그램검색후설치가능

옆 explorer는 사이드바라는 영역 액티비티바에서클릭한거사용할수었음

 

실제 작업할 파일 생성 가능

 

view-terminal누르면 하단에 패널이라는 영역이 나옴

터미널이나 디버그 콘솔과 같은 다양한 기능 제공

위 start 적혀 있는 곳은 애디터영역 실제 html파일이나 css 파일 만들고 해당 영역에서 코딩 가능

맨 밑은 상태바 visual studio 프로그램의 다양한 상태 제공

 

한국어로 볼 수 있게 해 주는 확장팩 설치

 

설치하라고 하시는데, 이제 안 해도 되는 듯하다

색 지정을 함으로써 괄호를 쉽게 구분할 수 있게 해 준다

 

설치.

탭 영역을 컬러별로 다르게 표시해서 코드 라인이 길어졌을 때 읽기 편하게 해 줌

 

설치.

html은 수많은 태그로 이루어져 있음

태그는 여는 태그와 닫는 태그가 있음

그런데 여는 태그를 수정하게 되면 닫는 태그도 함께 수정해 줘야 함

이건 하나의 태그를 수정했을 때 쌍을 이루는 다른 태그들을 자동으로 수정할 수 있게 해 줌

 

설치.

html 문서에서 정의된 css를 금방 찾을 수 있도록 도와주는 확장 프로그램

윈도우에서는 ctrl+클릭, 맥은 커멘드+클릭을 하면 해당 css가 선언된 곳으로 쉽게 찾을 수 있도록 이동을 시켜 줌

 

확장프로그램 기능 테스트

 

style.css 파일 만들고 블루라는 스타일 정의

 

설치.

정의된 css가 어디에서 사용되었는지 쉽게 찾을 수 있게 도와줌,

html 문서에 선언된 클래스 명을 css 파일에서 입력할 때 자동완성 기능을 제공 

 

div.auto-completion-hello-css

입력하고 ctrl+enter

 

uto-completion-hello-css

클래스 명이 있는 div태그 하나 선언한 것

 

ctrl+s로 파일 저장

 

style에서 .auto 입력하면 자동완성 기능 제공 

 

background-color로 레드 지정

 

마우스 갖다 대면 어디에 쓰였는지 나옴

 

설치.

hml 문서에서 css의 자동완성 기능을 제공 

 

이렇게 자동완성

 

설치.

html 수정 시 새로고침 없이 바로 즉각 적용되도록 도와줌

 

Go Live 클릭

 

자체 서버에서 웹 문서를 띄움

 

아무거나 수정하고 저장

 

바로 적용

 

Port 버튼 클릭하면 이 라이브 서버는 종료됨

 

우클릭후 open with live server로도 가능 

 

설치.

코드를 예쁘게 정렬해 주는 코드 formatter중 하나

 

윈도우 ctrl+,   맥 커멘드+,

해당 박스 체크

 

탭 간격을 몇 칸으로 할 건지

만약 4칸으로 되어 있다면 2칸으로 하는 것을 권장

난 원래 2로 되어 있다

 

해당 박스 체크

 

둘 다 auto를 single로 변경

자바스크립트 스타일을 유지하기 위한 설정 

 

자바스크립트에서 문자열을 표현할 때는 "", '' 둘 다 가능

하지만 스타일을 싱글로 설정했기 때문에 저장하면 싱글 쿼트로 일관성 있게 변경

 

없음을 prettier formatter로 변경 

 

style로 가서 저장했더니 두 칸으로 자동 포맷 완료 

 

저장했더니 적용 안 됨.

우클릭 후 문서 서식 프로그램

prettier로 설정

 

안 돼서 코드 수정했더니 됐다!

 

두 칸으로 변경