HomeAboutMeBlogGuest
© 2025 Sejin Cha. All rights reserved.
Built with Next.js, deployed on Vercel
🕛
나의 MBIT(My Best IT personalities)!
/
🐚
002. HTML
🐚

002. HTML

1. Hyper Text Markup Language2. 메모장이나 크롬에서 바로 작성하는 예제2.1. Window 사용시2.2. 맥북 사용 시

1. Hyper Text Markup Language

Hyper Text는 참조(하이퍼링크)를 통해 한 문서에서 다른 문서로 즉시 접근할 수 있는 텍스트를 말합니다. Markup Language는 이것은 제목이다, 이것은 테이블이다, 문단이다와 같은 문서의 구조를 표현하는 역할을 합니다.
쉽게 말해, HTML은 웹을 만들기 위한 가장 기초적인 언어입니다.
notion image
 
하지만 HTML은 프로그래밍 언어는 아닙니다.
  • 프로그래밍 언어 : 문제를 해결하기 위해 컴퓨터에게 주어지는 처리방법과 순서를 정해주는 명령문을 작성하는 언어
  • 마크업 언어
    • : 구조를 정하는 언어
 
즉, HTML은 웹의 뼈대에 해당합니다.
 
Icon made by flaticon
Icon made by flaticon

2. 메모장이나 크롬에서 바로 작성하는 예제

메모장에서 아래 코드를 입력한 뒤, '다른 이름으로 저장'을 클릭해 확장자를 .txt 대신 .html로 바꿔서 저장하면 됩니다.
Mac OS의 경우에는 "텍스트 편집기"에서 "포맷"란에 들어가 "일반 텍스트 만들기"에서 코드를 작성하신 후 확장자를 .html로 변경하시면 됩니다.
보다 상세한 내용은 하단에 캡쳐해 두었습니다.
 
결과창은 이와 같이 나옵니다.
notion image
 

2.1. Window 사용시

notion image
notion image
메모장을 실행하시고 위와 같이 타이핑을 치신 후 파일 > 저장 버튼을 눌러주세요.
 
 
 
 
 
 
 
 
 
아래처럼 파일 이름은 test.html, 파일 형식은 모든 파일, 인코딩은 utf-8으로 바꾸신 후 저장을 눌러주세요.
notion image
저장된 파일을 더블클릭하여 실행시키시면 아래와 같이 실행됩니다.
notion image

2.2. 맥북 사용 시

텍스트 편집기를 사용하여 간단하게 편집할 수 있습니다. 이 경우 아래 2가지 선택이 가능합니다. 2개 모두 설명해 드리도록 하겠습니다.
  1. 텍스트 파일로 저장 후 확장자 변경
  1. html로 저장(Version에 따라 안될 가능성이 있습니다.)
여러분들 컴퓨터에서 텍스트 편집기를 찾아 클릭해주세요.
notion image
새로운 문서를 클릭해주시고 아래와 같이 문서를 작성해주세요.
notion image
notion image
가장 먼저 텍스트로 저장 한 후 확장자를 바꾸는 방법을 사용해보도록 하겠습니다. 위와 같이 작성 한 후 포멧 > 일반 텍스트 만들기를 클릭해주세요.
notion image
 
아래와 같은 알림창이 뜬다면 확인을 눌러주세요.
notion image
확인을 눌러주시고 원하시는 이름으로 저장한 다음 아래처럼 확장자를(원하시는_이름.html) 변경해주시면 변경하시겠냐는 경고창이 하나 뜹니다. .html사용 버튼을 눌러주시고 변경된 파일을 더블클릭 해주시면 웹 브라우저에서 열립니다.
notion image
notion image
 
notion image
 
이 방법이 어려우시다면 아래처럼 텍스트로 변환하지 않고 저장할 때 .html 형식으로 저장하는 방식을 사용하세요. 아래 이미지를 보시면 3번째에 있죠? 저장하시고 더블 클릭하시면 됩니다.
notion image
 
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <h1>Hello world</h1> </body> </html>