Please Enable JavaScript!
Gon[ Enable JavaScript ]

윈도우 메모장에 HTML 문서 작성하는 방법

웹 프로그래밍/HTML
반응형

특별한 도구 없이 메모장으로 html 웹 페이지를 작성해 보도록 하겠습니다. html 을 작성하려면 기본적인 구조를 알아야 합니다. 아무리 간단한 내용이라도 꼭 들어가야 하는 필수 태그들이 있거든요. 그 태그들을 이용해 메모장에 html 문서를 작성한 후 저장해서 웹 브라우저로 제대로 작성했는지 확인해 보겠습니다.

 

 

아래 그림은 html 웹 페이지가 구성될 때 꼭 들어가야 하는 태그 들입니다. <head> 안에 들어간 <meta> <title> 은 예외입니다. 각 블럭별로 어떤 내용이 들어가야 하는지 간략하게 알아 보겠습니다.

윈도우 메모장에 HTML 문서 작성하는 방법

 

전체 HTML 블럭 안에는 3가지 블럭이 들어갑니다. 각 블럭에 들어갈 내용은 다음과 같습니다. HTML 블럭 외부에 있는 <!DOCTYPE HTML> 은 문서형식에 관한 버전 정보로 DTD 라고도 합니다. 이것은 HTML5 를 사용하겠다는 표시입니다. 더 상세하게 할 수도 있지만 메모장에 html 을 작성해서 브라우저에 띄우는 것으로 초점을 맞추겠습니다.

 

l  <html> : head, title, body 요소를 감싸고 있는 전체 블록입니다.

l  <head> : head 는 메타데이터만 들어갈 수 있으며 화면에 표시되지 않습니다. title, style, script, meta, base 등이 포함될 수 있으며 없어도 됩니다.

l  <title> : head 안에 포함된 메타데이터이며 브라우저 상단에 출력되는 제목입니다.

l  <body> : 화면에 출력하는 내용은 이곳에 담기게 됩니다.

 

 

각 구성 요소들을 입력해서 메모장에 HTML 을 작성합니다. 그리고 body 블럭안에 출력하고 싶은 내용을 입력해 주세요.

윈도우 메모장에 HTML 문서 작성하는 방법

 

※ 아래는 참고하면 좋을 만한 글들의 링크를 모아둔 것입니다.
윈도우10 메모장 위치 찾기 바로 가기 아이콘 만드는 방법
메모장 숨은 기능 F5 단축키로 현재 시간 날짜 입력하는 방법
메모장 상태 표시줄과 라인 번호 나타내는 방법
윈도우 메모장 글씨 크기, 폰트 종류 자동 바꿈 설정 하는 방법
도우 자주 사용하는 메모장 단축키 설정, 실행하는 방법



 

 

 

다음은 저장할 때 주의해야 합니다. 텍스트를 저장하는 기본 인코딩은 ANSI 인데 이것을 UTF-8 로 변경하고 파일 형식을 모든 파일로 바꿔 줍니다. 메타태그에 한글을 설정하지 않았다면 한글이 깨지기 때문입니다. 그리고 HTML 파일 형식임을 나타나는 확장자를 파일명 뒤에 붙여 줍니다

윈도우 메모장에 HTML 문서 작성하는 방법

 

 

제대로 저장이 되었다면 파일의 아이콘은 브라우저 모양으로 변경되어야 합니다. 그럼 작성한 HTML 문서가 제대로 되는지 확인하기 위해 더블 클릭해 줍니다

윈도우 메모장에 HTML 문서 작성하는 방법

 

 

그럼 연결된 기본 브라우저가 뜨면서 body 블럭 안에 작성한 내용이 화면에 나타납니다. 웹 사이트는 이렇게 작성한 파일들이 모여서 만들어 지는 것입니다. 이상으로 메모장에 HTML 문서를 작성해서 웹 브라우저로 띄우는 방법에 대해 알아 보았습니다

윈도우 메모장에 HTML 문서 작성하는 방법

※ 아래는 참고하면 좋을 만한 글들의 링크를 모아둔 것입니다.
윈도우10 메모장 위치 찾기 바로 가기 아이콘 만드는 방법
메모장 숨은 기능 F5 단축키로 현재 시간 날짜 입력하는 방법
메모장 상태 표시줄과 라인 번호 나타내는 방법
윈도우 메모장 글씨 크기, 폰트 종류 자동 바꿈 설정 하는 방법
도우 자주 사용하는 메모장 단축키 설정, 실행하는 방법
반응형
Posted by 녹두장군1
,