[HTML]html기본 요소(태그)에 대해서 알아보자.
- SW교육/HTML
- 2020. 8. 24.
'즐거운 코딩 생활' 은 '꿈꾸는 판다' 블로그의 프로그래밍 언어 관련 카테고리에서 사용하는 부 캐릭터 입니다.
'즐거운 코딩 생활' 은 프로그래밍 언어 초심자를 위한 쉬운 내용과 함께 하는 공부를 표방합니다.
안녕하세요. '즐거운 코딩 생활' 입니다.
안녕하세요. 쉽고 즐거운 코딩 <즐거운 코딩 생활>입니다.
지난 글에서 HTML의 정의에 대해서 알아보았는데요.
2020/08/22 - [SW교육/HTML] - [HTML]HTML에 대해서 알아보자. HTML개요.
이번 글에서는 HTML의 기본 구조와 기본 요소(태그)에 대해서 알아보겠습니다.
HTML기본구조
- HTML의 기본구조는 다음과 같습니다.
위 이미지의 구조를 실제 간단히 구현한 기본 양식 샘플을 보시고 각 요소에 대해서 설명하도록 하겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>html 요소</title>
<meta name="keywords" content=" ">
<meta name="description" content=" ">
</head> <!-- 주석 -->
<body>
<h1>처음 배우는 HTML</h1>
<br/>
<p>오늘 처음으로 HTML을 사용해 보았습니다.</p>
</body>
</html>
HTML특징
1. DOM(Document Obeject Model) 트리 구조이다.
: 계층적 구조로 상위 요소를 부모 요소, 하위 요소를 자식 요소라고 하며 동일 선상의 요소를 형제 요소라고 합니다.
2. 대소문자 구분이 없다.
: <html> <HTML> <Html> 동일하다.
3. 시작 태그와 종료 태그로 이루어진다.
: 예) <p> -> 시작 태그, </p> -> 종료 태그
단, <br/>처럼 내용이 없는 경우는 시작과 종료 태그를 하나로 할 수 있음
즉, <br></br> 은 <br/>과 동일하다.
4. 요소 안에 포함될 수 있는 요소는 정해져 있다.
5. 주석은 <!-- 와 --> 사이에 표기한다.
html 요소
- html요소는 HTML 문서의 최상위 요소로서 일반적으로 언어 속성을 기술합니다. 속성(attribute) lang을 사용한 위 예제에서 lang = "ko"에 해당되는 부분 입니다. ( 영어는 "en" )
head 요소
- head 요소는 문서의 제목, 키워드를 지정하는데 보통 head 요소의 하위 요소인 title 요소, meta 요소 등을 이용합니다. 위 예시에서 아래에 해당 되는 부분입니다.
<meta charset="utf-8">
<!-- 문자코드 인코딩 방식 기술 -->
<title> html 요소 </title>
<!-- 문서 제목 -->
<meta name="keywords" content=" ">
<!-- 문서 키워드 -->
<meta name="description" content=" ">
<!-- 문서 개요 -->
- 문서 제목, 키워드는 네이버나 구글이 검색엔진이 검색될 문서를 수집하는데 이용합니다.
- head요소에서는 문서의 기본적인 서식, 레이아웃을 설정하는 CSS, 동작, 이벤트 등을 설정하는 Javasctipt 나 외부 로딩 파일도 지정합니다.
body 요소(태그)
- 브라우저에서 실제 표현되는 내용이 표기되는 요소로 하위 요소로 h1(제목) p(단락) 등 수많은 요소가 있습니다. body의 하위 태그의 용법을 익히는 것이 핵심입니다.
마무리
- html 문서의 확장자는 html 로서 문서명. html로 저장을 하면 브라우저( 크롬, 인터넷 익스플로러, 사파리 ) 등에서 열어 보실 수 있습니다. - 감사합니다.
2020/08/22 - [SW교육/HTML] - [HTML]HTML에 대해서 알아보자. HTML개요.
※ 참조 목록
- 위키백과
- '30일 레슨으로 쉽게 배우는 HTML5&CSS3 웹 표준 디자인 강좌 - Akemi Kusano 지음, 김선숙 옮김, 영진출판사 '
- '쉽고 자세한 HTML & JavaScript - 나윤지, 이법기, 고일석 공저, 도서출판 혜지원'
'SW교육 > HTML' 카테고리의 다른 글
| [HTML]h 태그에 대해서 알아볼까요? -body하위 태그- (6) | 2020.09.03 |
|---|---|
| [HTML]head태그에 대해서 알아볼까요? (0) | 2020.08.28 |
| [HTML]HTML에 대해서 알아보자. HTML개요. (4) | 2020.08.22 |