Computer Science/HTML

[HTML] 05. 텍스트(글자) 관련 태그 완전 정리

[HTML] 05. 텍스트(글자) 관련 태그 완전 정리HTML에서 가장 많이 사용하는 요소는 결국 텍스트입니다.이번 글에서는 글자를 표현하는 태그들을 단순 암기가 아니라의미 중심으로 정리해보겠습니다.1. 제목 태그 (Heading Tag)제목 태그는 문서의 구조를 나타냅니다.단순히 글자를 크게 만드는 태그가 아닙니다.제목1제목2제목3...제목6Output제목1제목2제목3은 페이지에서 가장 중요한 제목입니다.SEO(검색엔진 최적화) 측면에서도 매우 중요합니다.한 페이지에 h1은 보통 1개 사용계층 구조를 유지 (h1 → h2 → h3)2. 문단 태그 (Paragraph)이것은 문단입니다.Output이것은 문단입니다.문단은 자동으로 위아래 여백을 가집니다.줄 바꿈을 위해 p를 남발하는 것은 좋지 않습니다.3..

2026. 2. 7. 18:45

Computer Science/HTML

[HTML] 04. 블록 요소 vs 인라인 요소 완전 정리

[HTML] 04. 블록 요소 vs 인라인 요소 완전 정리HTML 태그는 크게 두 가지 유형으로 나뉩니다.블록 요소(Block Element)와 인라인 요소(Inline Element)입니다.이 차이를 이해하지 못하면,왜 줄이 바뀌는지, 왜 나란히 안 붙는지 계속 헷갈리게 됩니다.1. 블록 요소(Block Element)란?블록 요소는 화면에서 한 줄 전체를 차지하는 요소입니다.항상 새로운 줄에서 시작가로 폭을 기본적으로 100% 사용다른 블록 요소와 위아래로 쌓임대표적인 블록 요소 ~ 예제첫 번째 문단두 번째 문단Output첫 번째 문단두 번째 문단각 문단이 자동으로 줄 바꿈 되는 것을 확인할 수 있습니다.2. 인라인 요소(Inline Element)란?인라인 요소는 필요한 만큼의 공간만 차지합니다.줄..

2026. 2. 7. 18:45

Computer Science/HTML

[HTML] 03. 태그(Tag)의 문법 구조 완전 이해

[HTML] 03. 태그(Tag)의 문법 구조 완전 이해HTML은 태그(Tag)로 구성된 언어입니다.HTML을 이해한다는 것은 결국 태그의 구조와 원리를 이해하는 것입니다.이번 글에서는 단순 사용법이 아니라,왜 이런 문법을 가지는지, 그리고 브라우저는 이를 어떻게 해석하는지까지 알아보겠습니다.1. 태그의 기본 형태 내용 HTML 태그는 기본적으로 다음 3가지 요소로 구성됩니다.① 여는 태그 (Opening Tag)② 내용 (Content)③ 닫는 태그 (Closing Tag)예시안녕하세요여기서 → 문단 시작안녕하세요 → 텍스트 노드 → 문단 종료이 전체를 하나의 요소(Element)라고 부릅니다.2. 태그 vs 요소(Element) 차이많이 헷갈리는 부분입니다.태그(Tag) → 또는 요소(Element..

2026. 2. 7. 18:43

Computer Science/HTML

[HTML] 02. HTML 기본 구조

[HTML] 02. HTML 기본 구조 완전 이해이번 글에서는 HTML 문서의 기본 구조를 단순히 외우는 것이 아니라,왜 이런 구조를 가지는지까지 이해해보겠습니다.HTML은 아무렇게나 작성하는 문서가 아닙니다.브라우저가 해석할 수 있도록 정해진 문서 구조(Document Structure)를 따릅니다.1. HTML 문서의 전체 구조 화면에 보이는 내용 이 구조는 단순한 관습이 아니라,브라우저가 HTML을 해석하는 표준 방식입니다.2. 브라우저는 HTML을 어떻게 읽을까?브라우저는 HTML을 위에서 아래로 한 줄씩 읽습니다.이 과정을 파싱(Parsing)이라고 합니다.파싱 과정에서 브라우저는 HTML을 트리 구조로 변환합니다.이를 DOM(Document Object Model)이라고 합니다...

2026. 2. 7. 18:40

Computer Science/HTML

[HTML]01. HTML이 뭐예요?

[HTML] 01. HTML이 뭐예요?HTML은 웹페이지를 만들기 위한 가장 기본적인 언어입니다.우리가 인터넷에서 보는 모든 웹사이트는 HTML로 시작합니다.쉽게 말하면 HTML은 웹사이트의 뼈대(구조)를 만드는 역할을 합니다.1. HTML이 하는 일HTML은 화면을 예쁘게 꾸미는 역할이 아닙니다.HTML은 어디에 무엇이 있는지 정하는 구조 설계를 담당합니다.제목이 어디에 있는지문단이 어디에 있는지이미지가 어디에 들어가는지링크가 어디에 있는지예를 들어 책으로 비유하면,HTML → 책의 목차와 구조CSS → 책 디자인 (글자 색, 크기)JavaScript → 책 속에서 움직이는 기능2. 웹페이지는 어떻게 만들어질까?우리가 주소창에 URL을 입력하면 이런 일이 일어납니다.브라우저가 서버에 요청을 보냅니다.서..

2026. 2. 7. 18:38