CodeGym /행동 /Frontend SELF KO /첫 번째 웹 프로젝트

첫 번째 웹 프로젝트

Frontend SELF KO

레벨 3 , 레슨 4

사용 가능

7.1 첫 번째 html 문서

첫 번째 html 문서 (html 파일)를 만들어 보자. 일반적으로 웹 프로젝트의 메인 html 파일은 index.html이라고 불리지: 이 전통을 따르는 게 좋겠어. 그러기 위해서는 web-storm-10 폴더에서 오른쪽 클릭을 해:

그리고 파일 이름을 입력해:

WebStorm이 파일을 만들어주고 바로 열어줄 거야:

사실 이건 빈 html 문서야. 여기 보이는 건 전부 시스템 정보야. 실제 데이터는 <body> 와 </body> 태그 안에 위치할 거야. 태그가 뭐냐고? 다음 강의에서 더 자세히 배울 거야.

이 태그 안에 재미있고 멋진 메시지를 적어보자. 예를 들어 이런 거 말이야:

    
      만 리 길도 한 걸음부터 시작된다!

그냥 복사해서 8번째 줄에 (태그들 안에) 넣어도 돼. 복사해서 사용하는 게 오타도 줄이고 좋아. 지금 내 문서는 이렇게 생겼어:

내 텍스트 버전이 좀 우울하고 멋지지 않다면, 네 마음에 드는 걸로 바꿔도 돼 — 어쨌든 네 첫 번째 웹 프로젝트니까. 몇 가지 선택지를 더 줄게:

이제 프로젝트를 "실행"하고 브라우저가 우리의 html 파일을 어떻게 보여줄지 확인해 보자.

프로젝트를 실행하려면 상단 메뉴에서 초록색 삼각형을 클릭해야 해. 그 왼쪽에 실행할 파일 이름이 보여:

또한 Shift+F10을 눌러서 파일 실행할 수도 있어.

이걸 해보면 브라우저가 네 첫 번째 html 파일을 어떻게 보여줄지 볼 수 있어. 이것이 내 브라우저에 어떻게 보이는지야:

주황색으로 표시된 부분은 URL의 호스트 — 우리 프로젝트를 실행한 웹 서버야, WebStorm이 띄운 거지.

초록색으로 표시된 부분은 URL의 경로 — 프로젝트의 루트부터 index.html까지의 경로야.

파란색으로 — WebStorm을 위한 시스템 정보야.

빨간색으로 강조된 텍스트는 네 html 문서를 기반으로 브라우저가 표시한 텍스트야.

우리가 어떤 오류를 범한다면 어떻게 될까? 브라우저와 WebStorm은 어떻게 반응할까?

9번째 줄의 첫 번째 문자를 지우고 WebStorm의 반응을 확인해 보자. 내 결과는 다음과 같아:

우리가 여기서 볼 수 있는 것은:

9번째 줄에 있는 단어는 더 이상 태그가 아니고, 그래서 WebStorm은 노란색이 아닌 회색으로 표시하고 있어.
10번째 줄에는 닫는 <html> 태그가 있어, 하지만 <body> 태그는 닫는 <html> 태그 전에 나와야 해. 그래서 WebStorm은 여기 오류가 있다고 생각해.
문서 오류 개수는 오른쪽 상단에 표시돼 – 하나야.
오류 위치도 스크롤바에 나타나 – 오른쪽 아래. 긴 문서에 대해서 매우 편리해.

이제 이 파일을 실행해서 브라우저가 오류에 어떻게 반응하는지 보자:

브라우저도 불완전한 <body> 태그를 그냥 텍스트로 간주하고, 그래서 보통 텍스트처럼 보여줘.

닫는 <body> 태그의 부재도 브라우저가 크게 신경 쓰지 않아: 태그 문제는 더 심각한 경우도 많으니까. 그래서 결과가 꽤 괜찮게 나와.

코멘트

TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION