HTML
본격적으로 수업이 시작되었다. 첫 수업은 HTML수업이다.
- 환경 설치
- vscode 설치
- 확장자 html 파일 만들기
- 확장 프로그램 들어가서 live server 설치
(내장 웹 서버 설치, 정식 서버로는 쓸 수 없음)
(로컬 호스트 IP (도메인) 127.0.0.1로 지정)
(5500 → 포트번호, 쉽게 말해 문 , 중복 X)
(/001.html → 파일경로)
(*http 프로토콜 포트번호 → 80, https 프로토콜 포트번호 → 443)
- 개요
HTML(Hyper Text Markup Language)
웹페이지는 HTML 문서이며, 웹 브라우저가 이를 해석하여 화면에 렌더링(표현)합니다.
태그(Tag)와 속성(Attribute)을 사용하여 웹 문서의 구조와 의미를 명확하게 표현합니다.
- HTML 태그 기초
- 시작/종료 태그 : <태그>내용<태그>로 구성
- 빈 요소(Empty Element): 종료<태그> 없이 사용 가능
- 속성(Attribute): 시작<태그> 내부에 속성명=”값”형태로 작성하여 추가 정보 제공
- 중첩 규칙: 여러 <태그>를 사용할 때에는 마지막으로 열린<태그> 순서대로 닫아야함
- HTML 기본 구조
- <!DOCTYPE html>: 현재 문서가 HTML5임을 명시
- <html>: HTML 문서의 루트(root) 요소를 정의합니다. lang 속성 권장
**lang 속성
해당 웹 페이지의 주요 언어가 무엇인지 브라우저와 검색 엔진, 보조 공학 기기에 알려주는 역할을 합니다. en은 영어를 의미하며, 한국어 페이지라면 보통 ko로 설정합니다.
3. <head>: HTML문서의 메타데이터 정의
4. <body>: 웹 브라우저를 통해 보이는 내용(content) 부분입니다.
(아무런 태그 없이 내용만 있을 시 <body> 내용으로 추정)
- HTML 요소와 속성
- HTML 요소(Element)는 시작 태그, 종료 태그, 그리고 그 안의 내용(Content)으로 구성됩니다.
- 속성(Attribute)은 시작 태그 내에서만 정의되며, 요소에 대한 추가적인 정보를 제공합니다. 항상 속성명=”속성값” 형태로 표현됩니다.
- 자주 사용하는 전역 속성(모든 태그에 사용 가능)에는 id, class, title, lang등이 있습니다.
- 주석
1. 표기형식: <!-- 주석 내용-->
- 엔티티
1. 예약문자(Reserved Characters)
< > & “ 등은 미리 약속된 문자로 예약문자들을 표시하려면
| 기호 < | < |
| 기호 > | > |
| 기호 & | & |
| 큰따옴표 " | " |
| 작은따옴표 ' | ' |
| (공백) | |
- 문자셋(인코딩이라고도 표현)
1. 웹 브라우저가 문서를 정확하게 나타내려면 해당 문서의 문자셋(Character set) 정보를 알아야합니다.
2. 대표적인 문자셋
ASCII: 127개의 영문자와 숫자
ANSI: 윈도우즈 문자셋(256개)
ISO-8859-1: HTML4의 기본 문자셋
UTF-8(권장): 세상의 거의 모든 문자를 표현할 수 있는 HTML5의 기본 문자셋
- 태그와 속성
| 태그 | 속성 | ||
| <br> | 줄 바꿈 | width="100" | 너비를 100px로 고정 |
| <p> | 단락태그 기본적으로 위/아래 여백이 있는 블록(Block) 요소 |
height="100" | 높이를 100px로 고정 |
| <h1>,<h2>,<h3>, ... | 문서의 계층적 제목을 표현하는 태그 (숫자가 커질수록 하위수준의 제목) |
src="이미지주소" | 주소(경로) |
| <hr> | 웹 페이지에 가로줄 표시 | alt="텍스트" | 이미지 대체 텍스트 (이미지가 안 나올때 나오는 것) |
| <img> | <이미지 태그> *사용법 <img src = "이미지 주소"> |
title="텍스트" | 커서를 요소 위에 올렸을 때 말풍선(tooltip) 형태로 부가적인 정보를 표시 |
| <b>, <strong> | 단순히 글자를 시각적으로 굵게 표현, 내용의 중요성을 강조하여 굵게 표현 |
||
| <i>,<em> | 단순히 글자를 시각적으로 기울여 표현, 내용의 의미적 강조를 위해 기울여 표현 |
||
| <mark>,<del>,<ins> | 텍스트에 하이라이팅 효과, 텍스트 중앙에 가로줄 그어 삭제 표시, 텍스트 밑에 밑줄 표시 |
||
| <sup>,<sub> | 위첨자 표현, 아래첨자 표현 |
||
| <q>,<blockquote> | 자동으로 앞뒤에 큰따옴표, 별도의 단락으로 구분되어 들여쓰기 |
||
-미니 과제
위 웹문서 구현
느낀점
첫날이라 기본 구조정도만 배운 느낌이라 위 글을 쓰면서 복습하면 충분히 따라갈 수 있다고 생각했다.
——————————————————————————
본 후기는 [한글과컴퓨터x한국생산성본부x스나이퍼팩토리] 한컴 AI 아카데미 (B-log) 리뷰로 작성 되었습니다.
'학습일지' 카테고리의 다른 글
| [스나이퍼팩토리] 한컴AI아카데미(26.04.08) (0) | 2026.04.08 |
|---|---|
| [스나이퍼팩토리] 한컴AI아카데미(26.04.07) (0) | 2026.04.07 |
| [스나이퍼팩토리] 한컴AI아카데미(26.04.06) (0) | 2026.04.06 |
| [스나이퍼팩토리] 한컴AI아카데미(26.04.01) (0) | 2026.04.04 |
| [스나이퍼팩토리] 한컴AI아카데미(26.03.30) (0) | 2026.04.04 |