css, js 연결하기

vs코드를 장기적으로 사용할 때 가장 중요한 것은 전체 저장하는 습관을 들이는 것이다.

전체 저장은 Ctrl + s를 이용하면 되고 저장하면 하얀 점이 사라진다.

 

 

 

vs코드에서 왼쪽을 클릭하고 우리가 설치한 확장 파일인 Live Sever를 열어준다.
그럼 브라우저가 자동으로 열리고 코드가 실행된다.

 

 

 

index.html에서 작성할 내용을 꾸며줄 수 있는 css파일을 생성하였다.  

 

 

 

css파일에 내용을 열심히 작성하여도 화면에 나타나지 않는다.
그 이유는 index.html에 main.css을 연결하지 않아서이다.

 

 

 

index.html에 밑줄친 부분과 같은 연결 링크를 넣어주면
우리가 지정하였던 스타일 값을 볼 수 있다.

 

 

이러한 한영 구글 번역기가 뜨는 것은 해당코드 때문이다.
사용자는 굳이 영어로 되있지 않은 페이지일 경우 변역할 필요가 없다.
위 코드에서 lang은 지정한 문서의 언어를 명시하는 html 속성이다.
여기서 en을 ko로 바꾼다면 한글을 바탕으로 한 파일이 되어 한영 구글 번역기 창이 더 이상 안뜬다.

 

 

 

index.html에서 작성할 내용에 동작을 넣을 수 있는 js파일을 생성하였다.
js파일에 내용을 열심히 작성하여고 link로 연결하였는데 화면에 나타나지 않는다.
그 이유는 index.html에 css파일을 연결하는 방식과 js파일을 연결하는 방법이 달러서이다.

 

 

 

index.html에 밑줄친 부분과 같은 연결 링크를 넣어주면
우리가 지정하였던 단어를 콘솔에서 볼 수 있다.