2021. 8. 2. 19:37ㆍWEB/Java Script
(완성 후 사진 첨부 예정)
최종 완성본 - 결과적으로 위와 같은 페이지를 제작
1. 자바스크립트
자바스크립트(이하 JS)는 이미 누구나 갖고 있고, 사용하고 있는 웹 위에서 동작하는 유일한 언어
누구나 JS를 갖고 있다는 게 무슨 말일까?
위와 같이 인터넷 브라우저를 가지고 있는 모든 사용자는 개발자 도구라는 것을 통해 JS를 사용할 수 있다
즉, 웹 언어로 작성된 Document를 JS가 주시하고 있다가 변경점을 읽고 반영해준 것이다
이처럼 JS는 누구나 쉽고 간편하게 사용할 수 있지만, 개발자 도구로 코드를 작성하기에는 부적합하다
이를 위해서는 IDE와 같은 통합 개발 환경이라 불리는 개발자 툴을 사용하여 프로그래밍을 해야 한다
(IDE는 본 주제에서 직접 다루지 않는다, 필요하다면 구글 검색)
해당 프로젝트에서는 VSCode라는 IDE를 이용하여 프로그래밍을 진행
2. JS를 사용하기 위한 기본 환경 구성
VSCode를 실행 후 웹 위에서 동작하는 세 가지 언어를 작성하기 위한 각각의 파일을 생성
(이때, 이름은 자유롭게 설정하되 반드시 .html .css .js와 같은 형태로 파일을 만들어야 각 언어에 맞게 인식)
| 이름 | 역할 |
| HTML | 웹을 구조적 형태로 만드는 역할 |
| CSS | 작성된 HTML 문서를 꾸미는 역할 |
| JavaScript | 정적인 웹에 동적요소를 부여하는 역할 |
* 각 언어에 대한 이해를 위해 짧고 쉽게 표현하면 위와 같이 표현할 수 있을 것 같다
즉, 웹이라는 것이 존재하기 위해서는 HTML이 기본적인 구조의 형태를 잡아주어야 가능하다
기본적인 구조의 틀을 만드는 쉽고 빠른 방법으로 " ! " 를 사용하는 방법이 있다
.html 파일을 생성하고 " ! "를 입력 후 [Enter], 기본적인 HTML의 구조를 만들어주는 코드가 등장한다
각 태그의 의미 및 역할에 대해 간략한 소개
1 : DTD라고 표현하며, 문서의 형식을 선언해준 것(html 형식)
3 ~ 8 : 사용자에게 노출되지 않는 영역, 숨은 데이터를 정의하는 태그들이 들어가게 되는 영역
9 ~ 11 : 사용자에게 실제로 보이게 되는 영역, 눈에 보이는 모든 데이터는 <body> 안에 표현
<title> : 인터넷 상단에 보이게 되는 페이지의 이름을 결정하게 된다
기본적으로 HTML이 구조를 잡아주고 있어야 그 위에 CSS, JS가 적용되어 동작될 수 있다
(모든 동작은 <body> 안에서 이루어짐을 꼭 기억하자)
작성된 모든 내용은 개인의 생각을 정리하여 작성된 것으로, 사실과 다른 내용이 있을 수 있습니다
이점 참고하여 주시길 바라며, 오류에 대한 수정사항을 남겨주시면 확인 후 조치하도록 하겠습니다
'WEB > Java Script' 카테고리의 다른 글
| [JavaScript] 전개 구문(Spread Syntax) (0) | 2021.08.04 |
|---|---|
| Create Web App - Vanilla JavaScript (4) Function (0) | 2021.08.03 |
| Create Web App - Vanilla JavaScript (3) Booleans, Array (0) | 2021.08.02 |
| Create Web App - Vanilla JavaScript (2) 변수 선언 (0) | 2021.08.02 |
| Create Web App - Vanilla JavaScript (prologue) (1) | 2021.08.02 |