728x90
반응형
기본 구조
<!DOCTYPE html> : 현재 문서는 HTML5 문서임을 명시
<html> : HTML 문서의 root 요소를 정의
<head> : HTML 문서의 metadata 정의
<title> : HTML 문서의 제목 정의 (= 웹 브라우저 툴바표시,즐겨찾기 제목,검색엔진 결과제목)
</title>
</head>
<body> : 웹 브라우저 통해 보이는 내용
<h1> </h1> : 제목(heading)
<p> </p> : 단락(paragraph)
</body>
</html>
<html> 태그
- HTML 문서의 시작과 끝을 알린다.
<html lang="ko">
- HTML 문서에서 사용할 언어 지정한다.
- 검색 사이트에서 특정 언어로 제한하여 검색할 때 이것을 참고함.
<html lang="ko"> : HTML 문서에서 사용할 언어 지정.
<head> 태그
- 이 영역의 내용은 대부분 화면에 나타나지 않음.
- 웹 브라우저에게 필요한 정보 알려주는 용도
<meta> 태그
- 웹 문서와 관련된 정보 지정할 때 사용
- <meta charset="UTF-8">
화면에 글자 표시할 때 어떤 인코딩 사용할지 지정
웹 서버는 영어가 Default 이므로, 한국어 표시할 때 지정해주어야 함. - <meta name="keywords" content="문서 키워드">
<meta name="description" content="문서 설명">
<meta name="author" content="제작자">
검색 엔진에서 참고하는 문서 키워드, 설명, 제작자 정보 등 입력가능
<title> 태그
- 웹 문서의 제목
- 검색 엔진, 방문자가 어떤 문서인지 유추가능
- 즐겨찾기 추가 시 제목이 이것으로 들어감
<body> 태그
- 웹 브라우저에 표시할 내용 입력
HTML 파일 생성
.html 확장자를 붙여서 파일 생성한다.
VS Code 에서 !만 치면 기본 구조를 자동 완성 해준다.
HTML 시맨틱 태그
이름만 봐도 의미 알 수 있어서 시맨틱(의마가 통하는) 태그라고 한다.
반드시 사용할 필요는 없지만, 구조가 정확히 나눠지고 정확한 정보 전달을 할 수 있다.
종류
- <header> 헤더 영역
주로 검색 창, 사이트 메뉴 등을 삽입한다.
사이트 전체의 헤더 영역도 있고, 특정 영역의 헤더 영역도 존재하며
<head>와는 완전히 다른 것임. - <nav> 내비게이션 영역
주로 다른 문서로 연결하는 링크를 만든다.
어느 영역에든 포함가능, 독립적으로 써도 된다.
<nav>를 여러 개 사용시 id속성 지정하여 다른 스타일 적용 가능하다. - <main> 본문 영역
웹 문서에서 핵심이 되는 본문을 담는 곳이다.
웹 페이지마다 다르게 보여지는 내용으로 구성한다. 웹 문서마다 단 1번사용 가능 - <article> 독립적 콘텐츠
블로그 포스트처럼 독립된 콘텐츠를 쓸 때 사용 - <section> 콘텐츠 영역
콘텐츠를 묶는 용도로 사용한다.
단순히 스타일 적용을 위해 묶는 거라면, <div> 태그를 사용한다. - <aside> 사이드 바 영역
본문 내용 외에 왼/오른/아래 영역에 사이드 바 만들 수 있다. - <footer> 푸터 영역
주로 제작자, 저작권, 연락처 등의 정보를 입력한다.
맨 아래 위치한다.
이곳에서도 <header>, <section>, <article> 등 다른 시멘틱 태그 사용 가능하다. - <div>
div는 divison의 줄임말으로, 옛날에 시멘틱 태그 없을 때 영역 구분용으로 사용해왔다.
소스를 묶어서 스타일 적용을 시켜주는 용도로 사용된다.
<div id=" ">
<div class=" ">
※ id는 문서 내 1번만 사용가능, class는 여러 번 사용 가능함
저 id, class 명으로 css 스타일 적용해주는 것임.
반응형
'프론트엔드 개발 > HTML CSS' 카테고리의 다른 글
| HTML - 이미지, 오디오, 비디오, 링크 삽입 (0) | 2021.05.30 |
|---|---|
| HTML - HTML 태그 (목록, 표) (0) | 2021.05.30 |
| HTML - HTML 태그 (제목, 단락, 인용구, 서식) (0) | 2021.05.30 |
| DOM (문서 개체 모델) 이란? (0) | 2021.05.23 |
| MIME-Type, Content-Type 이란? (0) | 2021.05.23 |