HTML은 어떻게 생겼을까?
<P>내용</P>
1. 여는 태그(Opening tag):<요소의 이름>
2. 닫는 태그(Closing tag):</요소의 이름>
3. 내용(Content): 요소의 내용
4. 요소(Element): 여는 태그, 닫는 태그, 내용을 통틀어 요소(element)라고 한다.빈 요소(Empty elements))
내용(Content)이 없는 요소를 빈 요소(Empty elements)라고 부른다.
이 같은 경우는 닫는 태그를 추라고 명시하지 않아도 된다.
ex) <br>줄바꿈 요소로 텍스트 안에 줄바꿈을 생성하게 된다.
<hr>이야기 장면 전환, 구획 내 주제 변경 등, 문단 레벨 요소에서 주제의 분리를 나타낸다.
<img src=""> 이미지를 넣을 때 사용한다.
<meta charset=""> 메타 요소를 나타낸다.
<input type="" name=""> 사용자의 데이터를 받아낼 수 있는 대화형 컨트롤을 생성한다.br
hr
img
meta가 제공하는 4가지 유형
name: 특성을 지정하면 전체 페이지에 적용되는 "문서 레벨 메타데이터"를 제공합니다.
http-equiv: 특성을 지정하면 유사한 이름의 HTTP 헤더가 제공하는 정보와 동일한 "프래그마 지시문"이 됩니다.
charset: 특성을 지정하면 문서 인코딩에 사용한 문자 인코딩을 나타내는 "문자 집합 선언"이 됩니다.
itemprop: 특성을 지정하면 "사용자 정의 메타데이터"를 제공합니다.
input
요소의 중첩(Nesting)
요소 안에 다른 요소가 들어가는 포함관계를 성립할 수 있다.
여러 요소가 중첩될 경우에는, 열린 순서의 반대로 닫혀야만 한다.
<ul>
<li>하나</li>
<li>하나</li>
<li>하나</li>
</ul>HTML 문서의 구조
<!DOCTYPE html> 문서의 타입을 명시
<html lang="en"> 페이지 전체의 컨텐츠를 감싸는 루트(root)요소
<head> 웹브라우저 화면에 직접적으로 나타나진 않는 웹페이지의 정보
<meta charset="UTF-8"> 문서의 일반적인 정보와 문자 인코딩
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body> 웹브라우저 화면에 나타나는 모든 콘텐츠
</body>
</html>블록(Block)과 인라인(Inline)
- 블록(Block)
- 블록 레벨 요소는 언제나 새로운 줄에서 시작하고, 좌우 양쪽으로 최대한 늘어나 가능한 모든 너비를 차지한다.
- 상자를 아래로 쌓는다고 생각하자.
- 인라인(Inline)
- 인라인 요소는 줄의 어느 곳에서나 시작할 수 있다.
- 바로 이전 요소가 끝나는 지점부터 시작하여, 요소의 내용(content)만큼만 차지한다.
안녕하세요