언어/HTML | CSS | JS

HTML 튜토리얼 01: HTML이란? 직접 쓴 코드를 브라우저에서 열어보기

만결숭이 2021. 4. 22. 15:56
반응형

HTML(Hyper Text Markup Language)

HTML이란?

웹페이지를 만들기 위한 표준 마크 업 언어입니다.

 

말이 너무 어렵나요? 지금 보시는 이 페이지에서 마우스 오른쪽 버튼을 클릭하고 "페이지 소스보기" 또는 "소스보기"를 눌러보세요. 이 페이지에 대한 HTML 소스 코드를 볼 수 있습니다.

 

Chrome, Safari 등의 웹 브라우저들은 HTML 코드를 읽고, 그대로 콘텐츠들을 화면에 표시합니다.

 

 

 

웹 페이지를 만들어서 브라우저에 띄워보는 방법

1) 메모장을 연다. (Mac의 경우 TextEdit)

 

2) HTML 코드를 작성한다.

코드에 대한 내용은 뒤에서 공부할거지만, 먼저 스포 하나 하자면 <body>에서 </body>까지가 화면에 표시되는 부분입니다.

 

 

3) 파일>다른 이름으로 저장

이 때, 파일명 뒤에 ".html" 혹은 ".htm"을 꼭 붙이고, (별 차이는 없음)

HTML 파일의 기본 인코딩인 UTF-8으로 설정합니다.

 

4) 브라우저에서 HTML 열어보기

저는 Chrome에서 열어보았습니다.

(1) 파일을 더블클릭해서 열거나,

(2) 현재 열려 있는 브라우저에 드래그 앤 드롭 해서 끌어오면

아래와 같이 직접 쓴 코드가 열리는 것을 볼 수 있습니다.

반응형