HTML 편집기 / 프로그램 없이 간편하게 HTML 작성하기

728x90

안녕하세요 리무입니다.

오늘은 HTML 편집기 중 가장 간편하고 쉬운 방법에 대해서 소개하려고 합니다.

▶HTML 이란?

HTML(Hyper Text Markup Language)이란, 무수한 웹 페이지를 구성하는 언어입니다.

컴퓨터에 관심이 있는 사람이라면 우리가 사용하는 웹, 앱은 프로그래밍 언어로 만들어진다는 이야기를 들었을 것입니다.

여기서 언어란, 말 그래도 소통을 위한 언어(language)이다. 우리가 컴퓨터가 알아들을 수 있는 언어를 작성하면 그것을 읽은 컴퓨터가 쓰인 대로 작동하게 됩니다.

HTML은 웹페이지를 작성하기위한 언어로 HTML언어를 작성하면 웹 브라우저(인터넷 익스플로러, 크롬, 파이어폭스 등)가 읽고 쓰인 대로 페이지를 만들어냅니다.

즉, HTML은 웹 페이지를 작성하고 웹 브라우저는 HTML을 읽고 구성하는 역할을 합니다.

▶HTML 편집기란?

HTML 편집기는 웹 페이지를 만들기 위해서 HTML을 작성하게 해주는 프로그램입니다.

UltraEdit, EditPlus, Visual Studio Code 등이 대표적인 편집기입니다. 이것들은 HTML뿐 아니라 HTML을 꾸며주는 역할을 하는 CSS, JavaScript를 포함해 Java, C, C++, Python 등 다른 언어 프로그램을 사용할 수도 있습니다.

하지만, HTML은 기본적인 텍스트(text)만을 사용하기 때문에 특별한 프로그램 없이도 간단하게 작성할 수 있습니다.

바로 메모장 혹은 워드패드를 이용하는 방법입니다.

오늘은 윈도우 사용자라면 모두 가지고 있는 메모장을 가지고 HTML을 작성하는 방법에 대해서 알아보겠습니다.

▶간편한 HTML 편집기

▷메모장 이용하기

메모장을 켜진 후 위와 같이 작성합니다.(가장 기본적인 작성법입니다.)

저장하기 혹은 다른 이름 저장하기를 해줍니다.

이때 확장자를 html로 만들어주기 위해서 맨 뒤에 .txt을 지우신 후 .html를 넣어주고 저장해주세요.

저장하신 곳에 가시면 이렇게 인터넷 페이지 파일이 만들어진 것을 확인하실 수 있습니다.

만약 브라우저가 따로 연결이 안 되어 있다면 파일을 우클릭 후 - 연결 프로그램 - 브라우저 선택을 해주시면 됩니다.

▷HTML 기본 요소

모든 편집기를 사용하실 때 기본적으로 사용해야 하는 요소들에 대해서 간략하게 소개하겠습니다.

처음 메모장에 적혀 있던 요소 <!DOCTYPE html>, <html>, </html>, <head>, </head>, <title>, <,title>,<p>,</p>은 아래와 같은 역할을 합니다.

- <!DOCTYPE html>: html을 선언해 줍니다.

- <html> 과 </html>: html의 시작과 끝임을 의미합니다. 모든 코드는 이 안에 사이에 작성해 주셔야 합니다.

- <head>와 </head>: HTML 문서의 정보를 정의하는 공간입니다.

<title>, </title> 사이에 제목을 넣어서 웹페이지의 제목을 만듭니다.

- <body>와 </body>: HTML 문서의 본문(내용)을 정의하는 공간입니다

<p> 는 단락의 시작 </p>은 단락의 끝을 나타냅니다.

이렇게 별도의 프로그램 다운로드하지 않고 간단하게 웹 페이즈를 작성하는 방법에 대해서 알아봤습니다.

메모장이나 워드패드를 이용해서 작성할 때는 쉽고, 가볍고 빠르다는 장점이 있습니다.

html을 연습하실 때, 가볍게 사용하시면 좋을 것 같습니다.

728x90

'Programming > IT' 카테고리의 다른 글

[Tistory Tip] 관리자 페이지 들어가기 (0)	2023.12.16
42 서울(42 Seoul) 6기 지원부터 최종합격까지 (2)	2022.03.05
티스토리 페이지 내에서 바로가기 만들기(네비게이션 만들기) / Tistory 네비게이션 (1)	2021.12.30
티스토리 테이블 생성, 크기 조절 하는법 / 테이블 양 끝 채우기, 가운데 정렬 (5)	2021.01.08
티스토리 모바일 팁 / 관리 페이지 들어가기 및 단축키 / 모바일로 html 편집 / 모바일 글 쓰기 팁 (0)	2020.12.20

📝 적어서 머릿속으로

HTML 편집기 / 프로그램 없이 간편하게 HTML 작성하기

▶HTML 이란?

▶HTML 편집기란?

▶간편한 HTML 편집기

▷메모장 이용하기

'Programming > IT' 카테고리의 다른 글

티스토리툴바

HTML 편집기 / 프로그램 없이 간편하게 HTML 작성하기

▶HTML 이란?

▶HTML 편집기란?

▶간편한 HTML 편집기

▷메모장 이용하기

'Programming > IT' 카테고리의 다른 글

'Programming/IT' Related Articles

티스토리툴바