<HTML> HTML 문서의 구조 및 코드 에디터

HTML

<HTML> HTML 문서의 구조 및 코드 에디터

제이미로그 2024. 5. 16. 12:58

📌 1. HTML이란?

HTML은 HyperText Markup Language를 의미한다. 우리가 보는 웹페이지가 어떻게 구조화되어 있는 지 브라우저로 하여금 알아볼 수 있도록 하는 마크업 언어이다. HTML은 elements로 구성되어 있으며, 각 컨텐츠의 여러 부분을 감싸고 마크업해야 한다. tags는 웹 상의 다른 페이지로 이동하게 하는 하이퍼링크 내용들을 생성하거나, 단어를 강조하는 등의 역할을 한다.

HyperText : 하이퍼링크를 통해 어떤 문서에서 다른 문서로 접근할 수 있는 텍스트.

Markup : (콘텐츠를) 표시하다.

Language : 언어

즉, 하이퍼텍스트와 콘텐츠를 표시해주는 언어.

쉽게 말해 HTML은 웹브라우저를 통해 표시되는 웹페이지의 콘텐츠를 정의하기 위해 사용하는 언어.

HTML은 웹페이지의 콘텐츠를 정의하기 위해 사용하는 언어이다. 개발자는 HTML 코드로 웹페이지에 어떤 내용이 표시될 지를 정의한 HTML 문서를 만든다.

완성된 HTML 코드를 웹브라우저에서 로딩하면 웹페이지가 만들어진다.

HTML 코드가 웹브라우저를 통해 해석되고 표현되는 과정을 렌더링이라고 한다.

📌 2. HTML 문서 만들기

HTML 문서는 파일의 확장자가 html 또는 htm이다.

대표적인 텍스트 편집기 : 기본 메모장, Brackets, VS Code 등

대표적인 웹브라우저 : 크롬, 파이어폭스, 사파리, 인터넷익스플로러, 엣지 등

📌 3. 개발자 도구

웹 브라우저에는 개발자 도구가 탑재되어 있다.

웹사이트 개발용 도구로, 대부분의 최신 브라우저에는 개발자 도구가 탑재되어 있다.

HTML CSS 코드 확인, 모바일 모니터링, 네트워크 상태 점검, 스크립트 명령어 확인 등 다양한 기능을 통해 개발자에게 편의를 제공한다.

크롬은 브라우저가 열려 있는 상태에서 F12 버튼을 누르거나 우측 상단 메뉴 설정 -> 도구 더 보기 -> 개발자 도구를 선택해 연다.

📌 4. 코드 에디터

코드 에디터는 프로그래머가 프로그램 소스를 편집하기 위해 사용하는 소프트웨어.

코드는 결국 텍스트이다. 이 텍스트를 더 빠르게, 더 편하게 작성하기 위해서는 코드 에디터를 사용하는 것이 좋다.

=> 텍스트 자동 완성 + 하이라이팅 기능이 추가된 메모장

ex : VS Code (Visual Studio code)

📌 5. HTML 문서의 구조

1. 태그 사용법 : 시작과 끝

태그는 <> 과 </> 기호를 사용해 콘텐츠의 시작과 끝을 표시한다. 각 태그는 콘텐츠를 감싸며, 태그명은 콘텐츠의 성격과 의미를

나타낸다.

<!DOCTYPE html> : HTML 문서의 시작을 나타내는 부분

<html lang="ko"> : 한국어로 작성된 HTML 문서 명시

<html lang="en"> : 영어로 작성된 HTML 문서 명시

<head> </head> : 문서의 head 부분 메타데이터와 스타일 시트, 자바스크립트 파일 등이 위치.

뷰포트의 너비를 디바이스의 너비와 동일하게 설정. 모바일 기기의 화면 너비에 맞춰서 웹 페이지를 조정.

페이지가 로드될 때 초기 배율을 1로 설정. 사용자가 웹 페이지를 처음 방문했을 때, 화면이 기본 배율로 표시.

<h1> ~ </h6> : body 부분에 있는 본문 내용. h1 부분이 가장 크다.

2. 태그 사용법 : 단일 태그

HTML에서 단일 태그(single tag)는 닫는 태그가 없는 태그를 말합니다. 이러한 태그들은 주로 빈 요소(empty element)로서 사용되며, 단독으로 존재할 때에도 의미를 가집니다.

<img> : 이미지 삽입

<br> : 줄 바꿈

<input> : 사용자 입력을 받는 입력 필드 생성

<hr> : 수평 줄

<base> : 문서 내의 모든 상대 URL에 대한 기본 URL 지정