특별한 도구 없이 메모장으로 html 웹 페이지를 작성해 보도록 하겠습니다. html 을 작성하려면 기본적인 구조를 알아야 합니다. 아무리 간단한 내용이라도 꼭 들어가야 하는 필수 태그들이 있거든요. 그 태그들을 이용해 메모장에 html 문서를 작성한 후 저장해서 웹 브라우저로 제대로 작성했는지 확인해 보겠습니다.
▼ 아래 그림은 html 웹 페이지가 구성될 때 꼭 들어가야 하는 태그 들입니다. <head> 안에 들어간 <meta> 나 <title> 은 예외입니다. 각 블럭별로 어떤 내용이 들어가야 하는지 간략하게 알아 보겠습니다.
▼ 전체 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 블럭안에 출력하고 싶은 내용을 입력해 주세요.
| ※ 아래는 참고하면 좋을 만한 글들의 링크를 모아둔 것입니다. ※ ▶ 윈도우10 메모장 위치 찾기 와 바로 가기 아이콘 만드는 방법 ▶ 메모장 숨은 기능 F5 단축키로 현재 시간 날짜 입력하는 방법 ▶ 메모장 상태 표시줄과 라인 번호 나타내는 방법 ▶ 윈도우 메모장 글씨 크기, 폰트 종류 자동 줄 바꿈 설정 하는 방법 ▶ 윈도우 자주 사용하는 메모장 단축키 설정, 실행하는 방법 |
▼ 다음은 저장할 때 주의해야 합니다. 텍스트를 저장하는 기본 인코딩은 ANSI 인데 이것을 UTF-8 로 변경하고 파일 형식을 모든 파일로 바꿔 줍니다. 메타태그에 한글을 설정하지 않았다면 한글이 깨지기 때문입니다. 그리고 HTML 파일 형식임을 나타나는 확장자를 파일명 뒤에 붙여 줍니다.
▼ 제대로 저장이 되었다면 파일의 아이콘은 브라우저 모양으로 변경되어야 합니다. 그럼 작성한 HTML 문서가 제대로 되는지 확인하기 위해 더블 클릭해 줍니다.
▼ 그럼 연결된 기본 브라우저가 뜨면서 body 블럭 안에 작성한 내용이 화면에 나타납니다. 웹 사이트는 이렇게 작성한 파일들이 모여서 만들어 지는 것입니다. 이상으로 메모장에 HTML 문서를 작성해서 웹 브라우저로 띄우는 방법에 대해 알아 보았습니다.
| ※ 아래는 참고하면 좋을 만한 글들의 링크를 모아둔 것입니다. ※ ▶ 윈도우10 메모장 위치 찾기 와 바로 가기 아이콘 만드는 방법 ▶ 메모장 숨은 기능 F5 단축키로 현재 시간 날짜 입력하는 방법 ▶ 메모장 상태 표시줄과 라인 번호 나타내는 방법 ▶ 윈도우 메모장 글씨 크기, 폰트 종류 자동 줄 바꿈 설정 하는 방법 ▶ 윈도우 자주 사용하는 메모장 단축키 설정, 실행하는 방법 |
'웹 프로그래밍 > HTML' 카테고리의 다른 글
| HTML 단락 들여쓰기 blockquote 태그 사용하는 방법 (1) | 2024.03.07 |
|---|---|
| HTML 구분선, 수평선을 그을 때 이용하는 hr 태그 사용법 (1) | 2024.01.12 |
| HTML 일련번호가 있는 목록 나열 ol, li 태그 사용법 (1) | 2023.12.04 |
| HTML 입력한 형태 그대로 보여 주는 pre 태그 사용법 (1) | 2022.12.16 |
| HTML div, span 태그 사용법과 차이 (20) | 2022.12.07 |
| HTML 용어 정의할 때 사용하는 dl, dt, dd 태그 사용법 (1) | 2022.12.01 |
| HTML 하이퍼링크 a 태그 id 속성으로 내부 링크(책갈피) 기능 구현하는 방법 (7) | 2022.11.18 |
| HTML 하이퍼링크 a 태그로 사이트 연결하기 (1) | 2022.11.09 |
