반갑습니다, 에코노트허브입니다. 1편에서 HTML이 웹사이트의 뼈대라는 사실을 배우고 나니, 당장 뭐라도 만들어보고 싶은 마음이 들지 않으시나요?
보통 코딩을 시작하려 하면 "비싼 컴퓨터를 사야 하나?", "어려운 설치 프로그램을 깔아야 하나?" 고민부터 하시는 분들이 많습니다. 하지만 결론부터 말씀드리면, 오늘 여러분의 컴퓨터에 이미 다 설치되어 있는 '메모장' 하나면 충분합니다.
[코딩을 위해 비싼 프로그램은 필요 없다]
전문 개발자들은 편의를 위해 복잡한 에디터를 쓰기도 하지만, HTML의 원리를 이해하기에 가장 좋은 도구는 아이러니하게도 가장 단순한 '메모장'입니다. 꾸며진 화면이 아니라, 우리가 직접 타이핑한 글자 하나하나가 웹페이지로 바뀌는 마법을 처음부터 경험해야 코딩의 진짜 재미를 알 수 있거든요.
윈도우를 쓰신다면 '메모장', 맥을 쓰신다면 '텍스트 편집기'를 열어주세요. 자, 이제 첫 번째 웹사이트를 만들어볼까요?
[직접 따라 해보는 5분 실습]
1단계: 메모장을 실행하세요. 윈도우 시작 버튼을 누르고 '메모장'을 검색해서 실행해주세요.
2단계: 아래 코드를 똑같이 타이핑해보세요. (복사하지 말고 직접 타이핑해보는 것이 공부에 훨씬 좋습니다!)
3단계: 파일 저장하기 (가장 중요!)
메모장의 '파일' 메뉴에서 '다른 이름으로 저장'을 누르세요.
여기서 핵심은 파일 이름 뒤에 반드시 '.html'을 붙이는 것입니다.
예를 들어, 파일 이름을 index.html이라고 저장하세요. (파일 형식은 '모든 파일'로 선택하는 것을 잊지 마세요!)
4단계: 브라우저로 열어보기 방금 저장한 파일을 찾아 마우스 오른쪽 버튼을 클릭하고, '연결 프로그램'에서 '크롬(Chrome)'이나 '엣지(Edge)'를 선택해보세요.
방금 여러분이 작성한 메모장의 글자가 웹 브라우저 안에서 제목과 문단으로 예쁘게 나타나는 것을 보실 수 있을 겁니다. 신기하지 않나요?
[왜 .txt가 아니라 .html로 저장해야 하나요?]
컴퓨터는 파일 뒤에 붙은 이름(확장자)을 보고 이 파일이 어떤 파일인지 판단합니다. '.txt'라고 하면 컴퓨터는 "아, 이건 그냥 글자구나!" 하고 읽지만, '.html'이라고 하면 "아! 이건 웹사이트 설계도니까 웹 브라우저로 뼈대를 그려줘야겠구나!"라고 반응합니다. 우리가 메모장에 적은 규칙들을 웹 브라우저가 해석해서 화면에 그려준 것이죠.
[초보자가 자주 겪는 당황스러운 상황들]
화면에 글자만 보이고 효과가 없어요: 저장할 때 확장자를 '.html'로 정확히 썼는지 다시 확인해보세요. 실수로 'index.html.txt'로 저장되는 경우가 많습니다.
한글이 깨져서 보여요: 아주 옛날 버전의 메모장을 쓰면 가끔 발생할 수 있습니다. 저장할 때 인코딩 방식을 'UTF-8'로 선택하고 저장하면 해결됩니다.
오타가 났어요: 태그는 아주 예민합니다.
<p>라고 써야 하는데< p >처럼 띄어쓰기를 하거나, 꺽쇠를 빼먹으면 브라우저가 명령을 이해하지 못합니다.
오늘 실습에 성공했다면, 여러분은 이미 웹사이트를 만드는 기본 원리를 체득하신 겁니다. 그다음부터는 이 메모장에 코드를 하나씩 더 추가하면서 웹사이트를 풍성하게 만드는 일만 남았습니다.
핵심 요약
코딩 시작에 복잡한 프로그램은 필요 없습니다. 윈도우 메모장이면 충분합니다.
파일을 저장할 때 반드시 파일 이름 끝에
.html을 붙여야 웹 파일로 인식됩니다.태그를 한 글자라도 틀리거나 띄어쓰기를 잘못하면 브라우저가 코드를 이해하지 못합니다.
다음 편 예고: 3편에서는 우리가 방금 사용한 <html>, <body>, <h1> 같은 코드들이 도대체 무슨 뜻인지, 태그의 이름과 특징들을 하나씩 자세히 뜯어보는 시간을 갖겠습니다.
메모장으로 저장한 파일을 브라우저로 열었을 때, 첫 화면이 정상적으로 뜨셨나요? 혹시 오류가 났다면 어떤 부분이 막혔는지 알려주세요! 같이 해결해봅시다.