VS Code에서 HTML/CSS/JavaScript 개발 환경 구축/실행하기

목차

 

어렴풋하게만 알고 있었던
Front-end(HTML, CSS, Javascript, react 등) 

손에 좀 익히면서
구동 원리도 자세히 알고자 하여 
강의의 miniproject도 수행하고 
개발 환경을 구축! 

 

    [Frontend] 개념

• 개념 
  • HTML - 웹 콘텐츠의 구조를 짜고 의미를 부여하는 마크업 언어, 예를 들어 페이지의 어디가 문단이고, 헤딩이고, 데이터 표와 외부 이미지/비디오인지 정의
  • CSS - HTML 콘텐츠에 스타일을 적용할 수 있는 스타일 규칙 언어
  • Javascript - 동적으로 콘텐츠를 바꾸고, 멀티미디어를 제어하고, 애니메이션을 추가하는 등 거의 모든 것을 만들 수 있는 스크립팅 언어
• 즉 웹 페이지는 웹 콘텐츠의 구조를 가진 HTML이 CSS 파일을 참조함으로써 스타일(색, 위치 등)을 표현하고,
  HTML이 Javascript를 참고함으로써 동적인 동작을 추가할 수 있다.  

 

    ① node.js 설치 

다운로드 | Node.js

• Node.js®는 Chrome V8 JavaScript 엔진으로 빌드된 JavaScript 런타임입니다.(공식 홈 정의)
  • Javascript를 (웹브라우저가 아닌 환경에서 실행할 수있게 해주는) 구동할 수 있도록 환경을 만들기 위해 설치한다.

 

    ② 설치된 vs code 열기 

파일 생성 - html, css, javascript

 

    ③ 미리 보기를 위한 Live Server Extension 설치  

• vs code 좌측 Extension에서 Live server 검색
• install 눌러 설치 
• 설치 후 하단 파란 메뉴의 'Go Live 클릭 

Extension 검색

 

    ④  설치 후, 미리 보기 하면서 개발 

• 설치 후 하단 파란 메뉴의 'Go Live 클릭 
• 혹은 단축키 ALT + O 

Go Live

귀염뽀짝 실습 ㅎㅎ

 

    혹시 HTML만 보이고 js, css가 동작안해서 오잉?하는 사람이 있다면?

• header에 reference를 잘해주었는지 체크해보자
• 예시 

<header>
    <script src="todolist.js";> </script>
    <link rel='stylesheet' type='text/css' href='../todolist.css'>
</header>