728x90
반응형
1 HTML의 기본 구성 요소
태그/ 속성/ 문법/ 주석
태그
구성 요소를 정의하는 역할
- HTML 문법을 이루는 가장 작은 단위
- 혼화살표괄호(<>) 사이에 태그명을 넣는 형태
- <태그명>
속성
태그에 어떤 의미나 기능을 보충하는 역할
- ~= 옵션 => 사용해도 되고 안 해도 되고, 여러 개 사용해도 됨
- But, 태그 없이 단독 사용X
- <태그명 속성명="속성값">
- 속성명 + 속성값으로 구성
- ex. <html lang="ko">
-> 태그: html/ 속성명: lang/ 속성값: ko
=> 주 언어(lang)가 한글(ko)로 된 HTML 문서의 시작
- 속성명: 따옴표 X 작성/ 값: 큰따옴표("") 안에 작성
- 속성값 여러 개 -> 쉼표(,)로 구분해 값을 나열
문법
- 콘텐츠(content)가 있는 문법
- 콘텐츠 앞뒤를 태그로 감쌈
- 시작 태그(open tag): 앞에 넣는 태그
- 종료 태그(close tag): 뒤에 넣는 태그/ 태그 명 앞에 슬래시(/)
- 시작태그 + 콘텐츠 + 종료 태그 => element
- <title>My First Web Page!</title>
- 콘텐츠 앞뒤를 태그로 감쌈
- 콘텐츠가 없는 문법
- 앞뒤로 감싸야 할 콘텐츠 X => 시작 태그(빈 태그; empty tag)만 사용
- ex. <br />
주석(comment)
- 실행결과(웹 브라우저)에는 표시 X
- 코드에 어떤 메모나 설명 남기고 싶을 때 사용
- <!-- 주석 내용 -->
- 웹 브라우저의 소스 보기로 볼 수 있음
=> 보안상 중요한 내용 삽입 X
Q. HTML 문법을 이루는 가장 작은 단위?
더보기
A. 태그
2 HTML의 기본 구조
DTD/ html 태그/ head 태그/ body 태그
<!DOCTYPE html>
<!-- 문서의 루트요소 -->
<html lang="en">
<!-- head 요소
문서의 메타 데이터 집합 요소
문서의 제목, 스타일, 파일 연결, 자바스크립트 삽입을 위한 요소 포함 -->
<head>
<meta charset="UTF-8" />
<!-- html4 -->
<!-- <meta http-equiv="content-type" content="text/html; charset=utf-8" /> -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- title: 문서의 제목, 텍스트만 포함될 수 있음 -->
<title>doctype.html</title>
</head>
<!-- body 요소
문서의 본문 요소
문서 내에서 한 번만 사용할 수 있음 -->
<body>
<h1>HTML5</h1>
</body>
</html>DTD(Documen Type Definition)
문서형 정의
- <!DOCTYPE html>
- 웹 브라우저가 처리할 HTML 문서가 어떤 문서 형식을 따라야 하는지 알려주는 것
- HTML 문서를 작성할 때 항상 처음에 넣어야 함
html
문서의 시작과 끝
- <html lang=”ko></html>
head
문서 정보 정의
- <head></head>
- HTML 문서의 메타데이터(metadata)를 정의하는 영역
- 메타데이터: HTML 문서에 대한 정보, 웹 브라우저에 직접 노출 X
- meta, title, link, style, script 등의 태그 사용 -> HTML 문서의 여러 정보 정의
- meta 태그: 메타데이터 정의
- HTML 문서에서 허용하는 문자 집합(charset)을 정의
- <meta charset="UTF-8">
- 인터넷 익스플로러의 렌더링 엔진을 강제로 최신 렌더링 엔진으로 지정
- <meta http-equiv="X-UA-Compatible" content=IE-edge">
- 기기의 화면 너비에 맞추기 위해 사용
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- 뷰포트(viewport): 웹 페이지에 접속했을 때 사용자에게 보이는 화면 영역
- HTML 문서에서 허용하는 문자 집합(charset)을 정의
- title 태그: HTML 문서의 제목 지정
- <title>doctype.html</title>
- 중복 허용 X
(중복 -> 웹 사이트 신뢰성 ↓라고 판단 => 검색 엔진 노출 시 불이익)
- meta 태그: 메타데이터 정의
body
웹 브라우저에 표시할(노출되는) 내용
- <body></body>
Q. 다음 중 HTML 기본 구조의 구성 요소가 아닌 것?
DTD/ html/ title/ body/ p
더보기
A. p
3 HTML의 특징 파악하기
블록 요소, 인라인 요소/ 부모, 자식, 형제 관계/ 줄 바꿈, 들여쓰기
블록 요소와 인라인 요소
- 블록 요소(block element)
- body 태그에서 사용하는 태그 중에서 웹 브라우저의 공간 유무와 상관X
사용할 때마다 줄 바꿈되는 태그 - ex. hn 태그, p 태그
- body 태그에서 사용하는 태그 중에서 웹 브라우저의 공간 유무와 상관X
- 인라인 요소(inline element)
- 공간이 부족할 때만 줄 바꿈 되는 태그
- ex. a 태그, span 태그
부모, 자식, 형제 관계
<html lang="en">
<head>
<!-- 생략 -->
</head>
<body>
<!-- 생략 -->
</body>
</html>- head 태그와 body 태그: html 태그의 자식
- html 태그: head 태그와 body 태그의 부모
- head 태그와 body 태그는 부모(html 태그)가 같으므로 형제 관계
줄 바꿈과 들여쓰기
사용 이유: 코드의 가독성
가독성: 얼마나 쉽게 읽히는가를 나타내는 정도
출처
코딩 자율학습 HTML + CSS + 자바스크립트
더북(TheBook): (주)도서출판 길벗에서 제공하는 IT 도서 열람 서비스입니다.
thebook.io
728x90
반응형
