태그 (Tag) 표기법을 통해 어떤 요소인지 (제목, 본문, 이미지, 비디오)를 명시
<p>내용</p>
여는태그 <요소의 이름> + 내용 + 닫는태그 </요소의 이름> = 요소 (element)
-요소의 이름은 동일 해야함.
빈요소 =empty element, self element, void element, single tag
-내용이 없는 빈요소
-닫는 태그를 추가로 명시하지 않아도 됨.
<p></p> 라고 해서 빈요소가 되는게 아니라 빈요소로 쓸수 있는 것들이 따로 있다.<br>,<hr> 간혹 <br/> 이렇게도 씀
-이미지 <tag>url</tag> 이미지 url을 넣게 되면 text로 읽는다.
-수평선
-줄바꿈
요소의 중첩
요소 안에 다른 요소가 들어가는 포함관계
서로의 포함관계 (부자관계)를 구분하기 위해 들여쓰기를 사용
열린순서대로 닫혀야함 <h1><strong></strong></h1>
주석 <!--주석의내용--!>
주석의 목적은 코드에 메모를 추가하거나 사용하지 않는 코드를 임시로 처리하기 위함
브라우저가 해석하지 않음
여러명이서 협업을 할 때 개발자에게 내용전달, 코드의 설명을 추가 하기 위함
문서의 구조
필수적으로 가져야 하는 것 (한문서에 1개만 존재)
<!DOCTYPE html> 문서의 타입은 html이다 선언
<html> 페이지 전체의 컨텐츠를 감싸는 루트(root)요소, 최상위 요소
모든 요소를 다 포함해야함
<head> 웹브라우저 화면에 직접적으로 나타나진 않는 웹페이지 정보
<body> 웹브라우저 화면에 나타나는 모든 컨텐츠
태그를 구분짓는 특성 (body 영역)
1. 구획을 나누는 태그
-여기저기 흩어져 있는 것들을 상단영역, 중간영역, 하단영역으로 그룹화 시킴
-단독으로 사용했을때에는 눈에 보이지 않는다.
-여러가지 요소들을 묶어서 그룹화
-컨테이너
2. 그 자체로 요소인 태그
-단독으로 사용했을 때에도 눈으로 확인할 수 있음 (버튼, 텍스트입력창)
3. 블록과 인라인
어디에 어떻게 배치를 해야 할 지에대한 법칙
블록(Block)
-블록레벨 요소는 언제나 새로운 줄에서 시작하고 좌우 양쪽으로 최대한 늘어나 가능한 너비를 차지함
->보여지는 가로 넓이를 다 차지함
-상자를 아래로 쌓는것
-인라인 요소들이 앞는 경우 그 옆에서부터 블록이 들어가는것이 아니라 밑에 층으로 내려와서 자리를 차지함
인라인(Inline)
-줄의 어느 곳에서나 시작할 수 있다.
-바로 이전 요소가 끝나는 지점부터 시작하여 요소의 내용 (content)만큼만 차지함.
포함규칙
-같은 형태의 다른 요소를 안에 포함할 수 있음 (블록>블록 / 인라인>인라인)
-대부분의 블록 요소는 다른 인라인 요소도 안에 포함할 수 있음.
*인라인 요소는 블록요소를 포함할 수 없음.
콘텐츠 카테고리
HTML5부터 비슷한 특징을 가진 요소끼리 묶어서 7가지 카테고리로 세분화
하나의 HTML 요소가 여러 콘텐츠 카테고리 내의 포함관계에 들어갈 수 있다.
-플로우 콘텐츠 (Flow content)
웹페이지상에 메타데이터를 제외하고 거의 모든 요소가 속함. Body에 들어가있는 대부분의 영역
보통 텍스트나 임베디드 콘텐츠(이미지) 를 포함
-섹션 콘텐츠 (Section content)
웹 문서의 구획(section) 을 나눌 때 사용
-헤딩 콘텐츠 (Heading content)
섹션의 제목(heading)과 관련된 요소
-프레이징 콘텐츠 (phrasing content)
문단에서 텍스트를 마크업할 때 사용
-임베디드 콘텐츠 (Embedded content) =내장콘텐츠
이미지나 비디오 등 외부 소스를 가져오거나 삽입할 때 사용되는 요소
-인터렉티브 콘텐츠 (Interactive content)
사용자와의 상호작용을 위한 컨텐츠 요소
ex. 버튼을 클릭한다던지 텍스트를 한다던지 ,,
-메타데이터 콘텐츠 (Metadata content)
문서의 메타 데이터(정보), 다른 문서를 가리키는 링크 등을 나타내는 요소