7.1 첫 번째 html 문서
첫 번째 html 문서 (html 파일)를 만들어 보자. 일반적으로 웹 프로젝트의 메인 html 파일은 index.html이라고 불리지: 이 전통을 따르는 게 좋겠어. 그러기 위해서는 web-storm-10 폴더에서 오른쪽 클릭을 해:
그리고 파일 이름을 입력해:
WebStorm이 파일을 만들어주고 바로 열어줄 거야:
사실 이건 빈 html 문서야. 여기 보이는 건 전부 시스템 정보야. 실제 데이터는 <body> 와 </body> 태그 안에 위치할 거야. 태그가 뭐냐고? 다음 강의에서 더 자세히 배울 거야.
이 태그 안에 재미있고 멋진 메시지를 적어보자. 예를 들어 이런 거 말이야:
만 리 길도 한 걸음부터 시작된다!
그냥 복사해서 8번째 줄에 (태그들 안에) 넣어도 돼. 복사해서 사용하는 게 오타도 줄이고 좋아. 지금 내 문서는 이렇게 생겼어:
내 텍스트 버전이 좀 우울하고 멋지지 않다면, 네 마음에 드는 걸로 바꿔도 돼 — 어쨌든 네 첫 번째 웹 프로젝트니까. 몇 가지 선택지를 더 줄게:
- "어둠의 경로는 빛이 줄 수 없는 진정한 자유를 제안한다."
- "어둠의 경로 — 끝이 없는 힘으로 가는 길이다."
- "나는 내 운명을 선택한다, 그리고 그 운명은 어둠 속에 있다."
7.2 첫 번째 프로젝트 실행
이제 프로젝트를 "실행"하고 브라우저가 우리의 html 파일을 어떻게 보여줄지 확인해 보자.
프로젝트를 실행하려면 상단 메뉴에서 초록색 삼각형을 클릭해야 해. 그 왼쪽에 실행할 파일 이름이 보여:
또한 Shift+F10을 눌러서 파일 실행할 수도 있어.
이걸 해보면 브라우저가 네 첫 번째 html 파일을 어떻게 보여줄지 볼 수 있어. 이것이 내 브라우저에 어떻게 보이는지야:
주황색으로 표시된 부분은 URL의 호스트 — 우리 프로젝트를 실행한 웹 서버야, WebStorm이 띄운 거지.
초록색으로 표시된 부분은 URL의 경로 — 프로젝트의 루트부터 index.html까지의 경로야.
파란색으로 — WebStorm을 위한 시스템 정보야.
빨간색으로 강조된 텍스트는 네 html 문서를 기반으로 브라우저가 표시한 텍스트야.
7.3 오류 해결
우리가 어떤 오류를 범한다면 어떻게 될까? 브라우저와 WebStorm은 어떻게 반응할까?
9번째 줄의 첫 번째 문자를 지우고 WebStorm의 반응을 확인해 보자. 내 결과는 다음과 같아:
우리가 여기서 볼 수 있는 것은:
- 9번째 줄에 있는 단어는 더 이상 태그가 아니고, 그래서 WebStorm은 노란색이 아닌 회색으로 표시하고 있어.
- 10번째 줄에는 닫는
<html>태그가 있어, 하지만<body>태그는 닫는<html>태그 전에 나와야 해. 그래서 WebStorm은 여기 오류가 있다고 생각해. - 문서 오류 개수는 오른쪽 상단에 표시돼 – 하나야.
- 오류 위치도 스크롤바에 나타나 – 오른쪽 아래. 긴 문서에 대해서 매우 편리해.
이제 이 파일을 실행해서 브라우저가 오류에 어떻게 반응하는지 보자:
브라우저도 불완전한 <body> 태그를 그냥 텍스트로 간주하고, 그래서 보통 텍스트처럼 보여줘.
닫는 <body> 태그의 부재도 브라우저가 크게 신경 쓰지 않아: 태그 문제는 더 심각한 경우도 많으니까. 그래서 결과가 꽤 괜찮게 나와.
GO TO FULL VERSION