웹 문서는 아무리 길더라도
<!doctype> 과 <html>, <head>, <body>
4가지 태그를 이용해 문서의 시작과 끝을 표시한다.
태그
마크업할 때 사용하는 약속된 표기법을 의미.
규칙1. '<'와 '>'을 이용해 구분한다.
규칙2. 태그는 소문자로 쓴다.
대소문자를 구별하지는 않지만, 모두 소문자를 사용하는 것을 권장한다.
규칙3. 여는 태그와 닫는 태그를 정확히 입력한다.
규칙4. 적당히 들여 쓴다.
(눈으로 쉽게 확인하기 위해)
| 들여 썼을 때 | 들여 쓰지 않았을 때 |
| <ul> <li> 메뉴1 </li> </ul> |
<ul> <li> 메뉴1 </li> </ul> |
규칙5. 태그는 속성과 함께 사용할 수 있다.
태그는 속성을 함께 익혀야 한다.
예) <img src="imges/study.jpg" width="300" height="250" alt="책이미지">
빨강=속성 / 파랑=속성값
규칙6. 포함관계를 명확히 해야 한다.
예) <u> <i> 포함관계를 명확히! </i> </u>
기본구조 예시
| <!DOCTYPE html> ① <html lang="ko"> ② <head> ③ <meta charset="UTF=8"> ④-① <meta name="viewport" content="width-device-width, initial-scale=1.0"> ④-② <meta http-equiv="X-UA-Compatible" content="ie-edge"> ④-③ <title> 이게 바로 HTML 기본 구조 </title> </head> <body> ⑤ <h1> HTML 이란... </h1> <p> 책 보고 공부하는 독학! </p> </body> </html> |
① <!doctype>
문서 유형을 지정하는 선언문
1) 웹브라우저에게 '이제부터 처리할 문서는 html문서이고, 어떤 유형을 사용했으니 그 버젼에 맞는 방법을 사용하라.' 라고 알려주는 것.
2) HTML5에서는 현재문서가 HTML 문서라는 점만 표기하는 것으로 문서 유형 선언이 끝난다.
3) 대소문자 구별은 없지만, doctype를 강조하기 위해 대문자를사용하는 것일 뿐이다.
② <html>
문서 유형을 선언한 후, 실제 문서 정보와 내용이 시작되고 끝나는 것을 표시.
1) lang : 문서에서 사용할 언어를 지정하는 속성.
(2자리, 4자리 사용 가능)
2) 두 자리로 표기한 주요 국가별 언어코드
- de (독일)
- en (영어)
- fr (프랑스어)
- ja (일본어)
- ko (한국어)
- zh (중국어)
③ <head>
웹브라우저에게 정보를 주는 태그.
1) 실제 웹 브라우저 화면에는 보이지 않는다.
2) 문서에서 사용할 외부 파일들도 이곳에서 링크한다.
3) <head>태그와 </head> 태그 사이에서 문서 정보 표시를 위해 사용 가능한 주요 태그로는 <title> 태그가 있다.
(웹브라우저의 제목표시줄에 표시되는 문서제목 태그이다)
④ <meta>
웹브라우저 화면에는 보이지 않지만, 웹 문서와 관련된 정보들을 지정한다. (문자세트 등)
1) 문자세트 지정하기
웹서버는 영어를 기본으로 하기 때문에, 영어 이외의 문자를 화면에 표시하기 위해서는 미리 약속된 문자세트를 사용해야 한다.
ex) <meta charset="UTF-8">
2) 모바일 기기 고려하기
ex) <meta name="viewport" content="width=device-width, initial-scale=1.0">
3) 인터넷 익스플로러 브라우저 고려하기
현재 웹문서를 최신 표준모드로 해석하라고 알려 주는 것.
ex) <meta http-equiv="X-UA-Compatible" content="ie=edge">
4) 검색 엔진 고려하기 (정보를 지정)
ex) <meta name="keyword" content="html5,웹표준"> => 해당 문서의 키워드
ex) <meta name="description" content="html5를 통해 웹표준 공부하기"> => 해당 문서의 설명
ex) <meta name="author" content="Kyunghee Ko"> => 해당 문서의 소유자 또는 제작자
⑤ <body>
실제 브라우저에 표시될 내용
※ 웹 문서에서 특수문자나
특수기호 사용하기
공백·괄호 등을 그대로 화면에 표시하려 할 때, 미리 약속한 이름이나 표기법을 사용해야 한다.
W3C 엔티티 코드표 : www.w3c.org
※ 에밋(emmet) 기능
웹 문서의 태그를 자동으로 입력해 주는 기능의 플러그인.
미리 약속한 코드를 입력하고 [Tab]을 누르면 완성코드가 자동 작성된다.
※ 필수 숙지 기능
! (느낌표) 입력하고 [Tab] 키를 누르면, HTML 문서 기본 구조가 자동 생성된다.
※ <h1> </h1>
타이틀(제목)처럼 글씨가 크고 두껍게 표시된다.
'스터디' 카테고리의 다른 글
| [웹코딩 요점정리] 1. 기초 다지기 (HTML/웹 브라우저/웹 편집기) (0) | 2021.10.12 |
|---|---|
| [책리뷰&스터디] 웹코딩 분야, 책으로 독학하기 (html5, css3) (0) | 2021.10.06 |