1일차 (2)
앞에서 기본 개념을 배웠으니 본격적으로 코딩에 나서겠다!
원래 산책도 걸음마를 떼야지 할 수 있는 법!
이제 걸을 수 있다고 춘잣! 두두두두 하면서 달리면 넘어져서 애기처럼 울 수도 있기에 난 천천히 하겠다.
아픈 건 싫다.
오늘은 정말 간단하게 HTML을 이용해 웹을 만들어보았다.
비록 초라하지만 웹 개발 과정을 설명하겠다!
앞에서 쓴 글에서 나오듯이 웹은 웹브라우저와 명령 코드만 있으면 누구나 만들 수 있다. (물론 공부해야...)
필자는 현재 군 복무 중이며 매우 구린 시설에서 공부를 하고 있지만 웹 프로그래밍 공부에 있어서 아무런 (전혀 없다면 거짓말이지만😢) 지장 없이 잘 공부하고 있다.
(띠링!)
[메인 퀘스트] (진행 중)
웹을 만들기 위해서는 브라우저와 코드 파일이 필요합니다.
준비하세요
브라우저 (x)
코드파일 (x)
우선 브라우저는 인터넷 익스플로러를 쓰면 틀딱소리 듣고 지원하는 것도 많이 없으니
도구들도 많고 요즘 대세인 크롬을 이용해서 간단하게 웹을 만들어 보이겠다!
[시아은(는) 브라우저를 회득하였다!]
[메인 퀘스트] (진행 중)
웹을 만들기 위해서는 브라우저와 코드 파일이 필요합니다.
준비하세요
브라우저 (0)
코드파일 (x)
이제 필요한 건 코드 파일인데 HTML 코드 파일은 정말 단순해서 메모장 가지고도 만들 수 있다.
비쥬얼 스튜디오 뭐 어쩌고 저쩌고 필요 없다!!
그래서 필자는 바로 메모장을 켰다.
하지만 여기서 끝이 아니다.
메모장의 이름을 index.html 로 바꿔줘야 한다.
이름이 index인 이유는 전통적인 관례라고 하는데 C언어의 몸통을 main()으로 하는 거랑 같은 이치라고 생각한다...
다음으로 주목할 부분은 .html인데 이 '.' 다음에 오는 영어를 『확장자』라고 부른다.
확장자가 뭐야?!
쉽게 말하자면 이 파일의 정체성을 결정지어주는 단어라고 보면 된다.
예를 들어 킹갓제네럴엠페럴맛있어탄산톡톡뭉탱이로있다유링게슝하는.사탕 이라는 파일이 있다면
어찌 됐든 이 파일은 사탕이라는 점은 변하지 않은다고 보면 된다.
이 예시 쉬웠으려나..?
아무튼! 이렇게 이름을 바꿔주고 저장을 하니...
?!
위에 보는 것처럼 크롬 아이콘이 되었다!
이것만 보고 "우와! 다 만들었다!"라고 생각하면 큰 오산이다.
우리는 사탕이라는 상품을 만들기 위해 사탕 포장지를 만들었을 뿐이고 아직 중요한 사탕은 만들지 않았다.
그러면 다시 이 텍스트 파일을 열어보자.
중요한 사탕 알맹이(소스코드) 만드는 작업을 할 것이다.
<h1>Hello World!</h1>텍스트 파일에 위 코드를 입력해보자.
<h1> </h1> 이 친구들은 태그라고 불리는 아이들이다.
이 사이에 있는 문자열을 입력받아서 웹 사이트에서 제목으로 달겠다는 내용으로 소스코드를 해석하면 좋겠다!
(실은 필자도 실습만 한 상태이고 근본 원리는 모름ㅠㅠㅠ)
이제 다시 저장을 하면 우리는 코드 파일을 얻게 된 것이다!
(띠링)
[메인 퀘스트] (진행 완료)
웹을 만들기 위해서는 브라우저와 코드 파일이 필요합니다.
준비하세요
브라우저 (0)
코드파일 (0)
이제 모든 준비가 끝났다!
index.html 아이콘을 더블클릭해서 파일을 열어보자!
성공적으로 웹이 만들어졌다!
이렇게 우리는 웹 프로그래밍의 정식 천 계단을 밟았다고 볼 수 있다.
"비록 시작은 작은 한걸음이지만 미래의 나를 위한 위대한 도약이다.”
-대충 윌 암스트롱 명언 빼낀 말
아자아자 힘내서 100일을 향해 나아가자!