HTML 개요
HTML이란?
- HyperText Markup Language의 약자
- 웹 페이지는 HTML 문서라고도 불리며, HTML 태그들로 구성
- 각각의 HTML 태그는 웹 페이지의 디자인이나 기능을 결정하는데 사용
HTML 기본 구성 요소
태그
- 다양한 구성 요소(텍스트, 이미지, 버튼 등)를 정의
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
- <!DOCTYPE html>
- DTD(Documen Type Definition)
- HTML의 처음 시작은 항상 해당 구문으로 시작
- 현재 문서가 HTML5 문서임을 명시(문서형 정의)
- <html>
- MTML 문서의 루트 요소(경로)를 정의
- 웹 문서의 시작과 끝을 나타내는 태그
- 모든 태그는 <html>안에 작성
- <head> : 웹사이트의 환경을 설정하기 위한 내용, 개발자는 볼 수 있지만 사용자는 볼 수 없음
- 웹 브라우저가 웹 문서를 해석하는 데 필요한 정보를 입력하는 부분(html문서의 메타데이터 정의)
- <title> : HTML 문서의 제목 정의
- 웹 브라우저의 툴바에 표시
- 웹 브라우저의 즐겨찾기에 추가할 때 즐겨찾기의 제목
- 검색 엔진의 결과 페이지에 제목
- <meta> : 문자 세트 등 문서 정보가 들어있음(메타데이터 정의)
- 한글로 된 내용을 표시하기 위해서 UTF-8 문자 세트 사용 : <meta charset=”UTF-8”>
- 인터넷 익스플로러의 렌더링 엔진을 강제로 최신 렌더링 엔진으로 지정하는 메타데이터 : <meta http-equiv="X-UA-Compatible" content="IE=edge>
- 뷰포트는 웹페이지에 접속했을 때 사용자에게 보이는 화면 영역을 의미 : <meata name="viewport" content="width=device-width, intial-scale=1.0">
- 그 외 <style>, <link>, <script>, <base>태그 등 존재
- <body> : 사용자가 볼 수 있는 내용
- <h1> ~ <h6> : 제목, 숫자는 폰트 크기(커질수록 작아짐)
- <p> : 단락(paragraph) = 덩어리
- <em> : 기울기
- <strong> : 두껍게 강조 표시
- <b> : bold, 진하게 표시
- strong은 강조 b는 볼드체로 최근엔 strong 사용 : 화면 낭독기 등 다른 기기에서 다르게 표현될 수 있는 여지가 있음
- <br> : 줄 바꿈, 닫는 태그가 없음
- <hr> : 구분선, 닫는 태그가 없음
- <ol> : ordered list, 순서가 있는 목록(숫자가 기본형)
- <li> : 순서가 있는 목록의 항목 태그
- <ol type=”a”> : a,b,c ~ 목록으로 변경
- <ul> : 순서가 없는 목록(점으로 표시)
VS Code에서 ‘!+Tab’누르면 html 기본 구조 자동 완성
속성
- 태그에서 어떤 의미나 기능을 보충하는 역할, 옵션
- 태그 없이 단독 사용은 불가능
- 속성명과 속성값으로 구성
- 속성명은 따옴표 없이, 값은 큰따옴표안에 작성
- 속성값이 여러개인 경우 하나의 큰따옴표 안에 쉼표로 구분해 값 나열
1
<태그명 속성명="속성값">
문법
- HTML은 태그와 속성으로 문법 구성
- 문법은 크게 콘텐츠가 있는 문법과 없는 문법으로 나뉨
1
2
3
4
5
6
7
8
- 콘텐츠가 있는 문법
: 콘텐츠 앞 뒤에 태그표시(시작태그 + 종료태그)
: 시작태그와 종료태그, 콘텐츠를 합쳐 '요소'라고 함
- 콘텐츠가 없는 문법
: 시작태그만 사용
: 빈 태그(empty tag)라고도 함
: 시작 태그가 곧 요소(<br>태그는 br요소)
주석
- 실행결과(웹 브라우저)에는 표시되지 않지만, 코드에 어떠한 메모나 설명을 남기고자할 때 사용
- 웹 브라우저의 소스 보기로 볼 수 있으므로 보안상 중요한 내용을 넣으면 안됨
- 주석처리 :
<!--주석내용-->
HTML 특징
블록 요소와 인라인 요소
- 블록 요소 : body태그에 사용하는 태그 중 웹 브라우저의 공간 유무와 상관없이 hn태그나 p태그처럼 사용할 때마다 줄바꿈되는 태그로 작성한 코드
- 인라인요소 : a태그나 span태그처럼 공간이 부족할 때만 줄 바꿈되는 태그로 작성한 코드
부모, 자식, 형제 관계
- 태그 사용 위치에 따라 부모, 자식, 형제 관계 형성