웹 프로그래밍의 시작
1. html
2. css
3. javascript
웹 프로그래밍을 어렵게 생각할 필요가 없다
내가 만들고 싶은 걸, 어떻게든 만들어서 세상에 보여줄 테다
라는 생각을 가지고 있다면
누구든 만들 수 있다.
딱 세 가지만 알면 된다.
html, css, js
간단하지 않은가?
html : hyper text markup language : 한 마디로 글자에 링크가 씌워진 언어라고 할 수 있음
그러니까 우리가 인터넷 화면에서 보는 것들은 글자 아니면, 이미지 (혹은 영상)다.
이미지를 직접 프로그래밍으로 만들 수는 없으니까, 다른 미디어를 사용하여 갖다 쓰는 것이며,
이를 웹 페이지에 보여주기 위해서는 결국 이미지를 어딘가 올려놓고(혹은 이미 올려진) 그것이 있는
위치와 이름을 찾아서 여기에 보여주라는 명령을 쓰는 것으로 표현될 뿐이다.
css : cascading style sheet : 화면의 시각적인 공통 요소를 정의한 설정값 모음이라고 할 수 있음
사실 웹이 생긴 처음에는 css가 있지 않았고, 그냥 모든 설정과 내용을 html로 작성하여 페이지만
구분한 후 링크를 통해 보여주는 식이었다. 좀 더 인터넷 속도가 빨라지고 시각적 요소를 많이 보여줄 수 있게 되고,
콘텐츠의 양도 많아지게 되면서, 보는 이로 하여금 편안하게 보여줄 필요가 있어졌다. 또한 관리도 편하게 하면서.
편안하고 편하다는 것은 일관성, 통일성, 규칙성, 안정성, 용이성 그리고 그 안에서 작은 변화들.
이런 것을 잘 디자인하는 것을 의미한다. 그래서 생긴 것이 css다.
js : javascript : 동적인 부분을 제어하는 방법들을 구현해 놓은 집합체라 할 수 있음
그냥 페이지만 넘기고 스크롤만 하는 것이 아니라, 다양한 미디어의 형식을 차용하여 이용하기 편하도록
만들어주는 기능적인 부분, 효과적인 부분 등이 필요해졌다. 책도 읽고, 영화표도 예매하며, 영상도 보고, 댓글도 단다
그냥 보는 것이 아니라 사람들은 뭔가를 입력하고, 그에 대한 반응을 받는다. 이것이 곧 인터랙션이며
이에 대한 모든 것을 담아놓은 도구라고 볼 수 있다.
물론 서버, DB에 관한 것들도 알아야 하겠지만, 너무 많은 그리고 너무 먼 얘기들까지 따지다 보면
시작도 할 수 없다. 일단 눈에 보이는 것들부터 하나씩 해 치우고 나면, 그 후에 일들도 차츰 해결될 것이다.
길은 그 길을 걷고 있는 자에게만 그 끝을 보여준다.
걷지 않으면서 길의 끝에 무엇이 있을지 궁금해하지 말자!
나도 만들고 싶은 게 따로 있긴 하지만, 아직 어디서부터 시작해야 할지를 몰라서,
일단 기초강좌를 듣고 있다. 유튜브에서 유명한 '노마드 코더'님의 강의다.
본 내용은 그분의 강좌 중 '바닐라 JS로 크롬 앱 만들기'라는 커리큘럼을 따라가면서 작성한 것이다.
무언가 공부를 한다는 것은 곧 내가 가르친다고 생각하면서 공부를 할 때 진짜 내 것이 되기에
이렇게 나도 공부를 하면서 기록을 하고, 또 내가 가르친다면 좀 더 쉽게 가르치기 위해서 정리하고 있는 중이다.
일단, 아래와 같이 폴더와 파일을 만든다.
준비물은 VS Code (Visual Studio Code)라는 것만 설치하면 된다.
momentum이라는 폴더를 만들고, 그 안에 html 파일과, css파일, js파일 이 세 가지를 임으로 만든다.
왼쪽 창에 보이는 "+버튼"처럼 보이는 것들이 "파일 생성"과, "폴더 생성"이니 그것으로 만들고, 확장자도 직접 써주면 끝이다.
내 컴퓨터의 원하는 위치에 만들었다면 윈도우 폴더에도 아래와 같이 생긴다. (해당 폴더의 위치는 모두 영문으로 되어있길 바란다)
먼저 index.html이라는 파일을 선택하면 우측 화면에 빈 화면이 펼쳐진다.
단축키 "! + TAB"을 누르면 html 시작을 위한 기본 구문이 자동으로 생성된다.
<head> 안에 있는 <title>을 "momentum"으로 바꿔준다. 그러면 우리가 만드는 사이트의 제목 탭이
"momentum"으로 바뀌는 걸 볼 수 있다.
이제 <head> 안에 한 줄을 추가할 것이다.
css 파일을 연결해 주는 구문이다.
<link rel="stylesheet" href="style.css">
다음 <body> 안에 한 줄을 추가할 것이다.
js 파일을 연결해 주는 구문이다.
<script src="app.js"></script>
이렇게 해주면 html과 css, js 셋이 묶여 있게 된 것이다.
우린 index.html을 브라우저에 불러 들어서 읽게 될 것이기 때문에 html을 기준으로 연결시키는 것이다.
아마 만들어 놓은 html 파일 내용은 아래와 같을 것이다. 이제 기본 적인 준비는 끝났다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Monentum</title>
</head>
<body>
<script src="app.js"></script>
</body>
</html>
BR h.
'Javascript: to do list' 카테고리의 다른 글
| 05 Condition 조건문 연습하기 (0) | 2023.05.30 |
|---|---|
| 04 Function에서 Return의 의미 (0) | 2023.05.30 |
| 03 Function으로 계산식 만들기 (0) | 2023.05.30 |
| 02 배열과 오브젝트 Array & Object (0) | 2023.05.30 |
| 01 데이터 타입과 변수 Data Type, Variable (0) | 2023.05.30 |
