웹 프로그래밍을 공부해보면 프론트앤드(front-end), 백앤드(back-end), 풀스택(full-stack) 이런 이야기를 듣게 된다. 언제부터 이런 것부터 알고 공부를 시작했다고…
(몰라도 된다. 몰라도 나중되면 저절로 알게 된다. 그래도 궁금하다면 검색해보면 된다.)
단순하게 시작하자. 매일 접속하는 웹사이트는 어떻게 만들어지는건가? 나도 저렇게 만들 수 있을까? 시작은 어렵지 않으니 무작정 만들어보자.
1. 에디터 설치하기
Atom 설치
Q.에디터가 뭔가요?
A. 프로그래밍을 쉽게 할 수 있도록 도와주는 툴이다. 문서작업을 위해 쓰는 MS워드나 한글2013 같은 프로그램을 쓰는 것처럼, 프로그래밍을 위해서 이런 에디터들을 사용한다. atom말고도 여러 에디터가 있으나 일단은 atom으로 한다. 다른 에디터를 쓰고 싶다면 말리지 않겠다.
설치 방법
설치하고 실행하면 이런 화면이 나온다.
2. Html 파일 만들기
그러면 html 파일을 만들어보자. File → new File 로 새로운 파일을 만들고 저장부터 한다. Ctrl + s 는 저장하는 단축키다. 수시로 누르는 습관을 들이자. 나는 바탕화면에 week1 폴더를 만들고 그 안에 week1.html로 저장을 했다.
(중요!) 저장할 때 이름을 뭘로 해도 상관없으나 .html을 꼭 붙여주자. 확장자를 html로 지정한다는 얘기고 컴퓨터한테 이 파일은 html 파일이야 라고 얘기해주는 단계다.
위처럼 만들어지면 성공. 만든 파일을 실행시켜 보면 브라우저로 인터넷 창이 열린다. 아무것도 작성하지 않았으니 당연히 빈화면이다. 다시 Atom으로 돌아가 뭐라도 쳐보자. 프로그래밍을 공부하면 맨 처음 쓰는 단어인 Hello World를 써보자. 썼으면 저장하고 다시 week1.html을 실행시켜보자.
브라우저에 Hello world가 나온다. 영어를 쓰는게 불만이라 한글로 '안녕 세상'이라 작성하면, 크롬에서는 잘나오지만, 익스플로러에서는 깨져나온다. 이걸 해결하는 법은 나중에 다루지만… 앞으로 웹페이지를 만들 생각이라면 ‘크롬’만 사용하자. 다른 브라우저는 안쓰는게 좋다.
이렇게 아톰에서 작성해두면
크롬은 잘나오는데
익스플로러는 이모양이다.
교훈 : 크롬을 쓰자.
Q. HTML이 뭔가요?
A. HTML은 하이퍼텍스트 마크업 언어(HyperText Markup Language, 문화어: 초본문표식달기언어, 하이퍼본문표식달기언어)라는 의미의 웹 페이지를 위한 지배적인 마크업 언어다. 라고 위키에서 말하고 있다. 이런말 치우고... 쉽게 얘기해서 웹페이지의 뼈대를 만드는 프로그래밍 언어라고 생각하면 된다.
html로 뼈대를 만들고, css로 예쁘게 꾸미고, javascript로 살아움직이게 한다. 라고 누군가 비유했었다.
----------------------------------------------
난 그저 애들가르치는거 정리해서 복습하라고 자료좀 만들 생각이였는데.. 이게 생각보다 손이 많이 가는 일이구나.. 깨달음. 심지어 스팀잇은 이미지 올리는것도 주소로 밖에 안되서 간단한 작업도 두번하게 만드네 ㅠ
본게시글은 초중생 대상으로 작성되는 콘텐츠이므로...
html이나 css, javascript에 관심이 있다면 아래 링크들로 학습하길 권합니다.
인프런 - https://www.inflearn.com/
코드카데미 - https://www.codecademy.com/
