JavaScript 프로젝트 생성

박선규's avatar
Oct 07, 2024
JavaScript 프로젝트 생성
 
  • CUSOR AI 사용

프로젝트 생성

notion image
 

JS 파일 만들기

notion image
확장자를 .js하면 자동으로 자바스크립트 파일로 인식

JS 파일의 내용 입력

notion image
 

HTML 파일 만들기

notion image
 

JS 파일 내용 출력하기

저장된 폴더 열기

notion image
notion image

파일을 실행

notion image
 

HTML에서 JS 출력하기

CSS파일 만들기

notion image
 

HTML 파일의 내용 넣기

!+enter 밑 코드 자동 완성
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>basic</title> </head> <body> </body> </html>
style.css 적용하기
<link rel="stylesheet" href="style.css"> <!--style.css 적용하기-->
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <title>basic</title> </head> <body> </body> </html>
  • HTML 파일에서 CSS 파일을 불러와서 적용됨
    • notion image
  • app.js 적용하기
<script src="app.js"></script>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <!--style.css 적용하기--> <title>basic</title> </head> <body> <script src="app.js"></script> <!--app.js 적용하기--> </body> </html>
  • 콘솔(자바스크립트 코드 확인하는 곳)확인하기
notion image
📌
별도의 컴파일 없이 브라우저에서 바로 실행 됨
Share article

p4rksk