HTML은?
- 웹 페이지를 구성하고 있는 요소(Element) 하나하나를 태그라는 표기법을 통해 작성하며 이를 통해 어떤 요소인지(제목, 본문, 이미지, 비디오 등) 알 수 있음
- 아래의 예시대로 여는 태그, 닫는 태그를 통해 내용을 적음, 이를 통틀어 요소라고 함
<p>내용</p>- 예시(HTML5에서는 모두 소문자로 태그를 작성하는걸 권장함)
<h1>This is Title!</h1>
<h2>fix you</h2>
<p>
Lights will guide you home, And ignite your bones, And I will try to fix you.
</p>빈 요소(Empty elements)
- 내용(content)이 없다면? 이미지, 수평선, 줄바꿈 등, 빈 요소로 쓸 수 있는 것은 애초에 정해져 있음(p태그의 내용을 안 쓴다고 빈 요소가 되지 않음)
- 내용이 없는 요소를 빈 요소라 부르고 이 경우 닫는 태그를 추가로 명시하지 않음
- Empty, Self-Closing, Void, Single tag...(
<br/>로 쓰는 케이스가 있기도 함, 상관없음) - 예시
<br>
<hr>
<img src="http://image.url/images/icon.jpg">
<meta charset="utf-8">
<input type="text" name="name">요소의 중첩
- 요소 안에 다른 요소가 들어가는 포함관계를 성립할 수 있음
- 여러 요소가 중첩될 경우, 열린 순서의 반대로 닫혀야함. 이 때 서로의 포함관계를 구분하기 위해서 들여쓰기를 씀
- 예시
<html>
<head>
<title>요소의 중첩</title>
</head>
<body>
<h1>요소안에 <strong>다른 요소가</strong> 들어 갈 수도 있습니다!</h1>
<ul>
<li>하나</li>
<li>둘</li>
<li>셋</li>
</ul>
</body>
</html>주석(Comments)
- 브라우저는 주석을 무시하며 사용자가 주석을 보이지 않게 함.
- 주석의 목적은 코드에 메모를 추가하거나, 혹은 사용하지 않는 코드를 임시로 처리하기 위함
- 주석은 정말 필요한 위치에 필요한 경우에만 써야함. 너무 남발하면 안됨.
- 예시
<p>I'm not inside a comment</p>
<!-- <p>I am!</p> -->HTML 문서의 구조
<!DOCTYPE html>
<html>
<head>
<!-- HEAD 영역 -->
</head>
<body>
<!-- BODY 영역 -->
</body>
</html><!DOCTYPE html>문서의 DOCTYPE을 html을 알리는 태그, 생략해도 문제는 없지만 일종의 관습 및 표준으로 많이 써서 계속 씀html해당 태그는 무조건 하나의 문서의 하나만 있어야함. 모든 내용들이 해당 태그 내부의 자식 요소로 들어와 있어야 함(최상위, 루트 요소라고 함)head화면에 직접적으로 나타나지 않은 웹페이지의 정보를 담고 있음(meta tag or title(페이지의 제목), 웹 페이지의 설명과 정보들)bodyhead에 있는 것 외에 화면에 나타나는 모든 콘텐츠를 나타냄- 필수적으로 모두 하나씩 가지고 있어야함
- 앞으로 태그에 대한 정보를 찾을 때는 MDN을 붙여서 사용할 태그에 대한 정보와 사용 방안에 대해서 직접 찾아보는 습관을 들이는 것이 좋음
HEAD 태그
head는 웹 문서의 정보와 문서가 사용할 정보, 스크립트, 스타일 시트 등 다양한 정보를 담고 있음- 웹 브라우저가 식별하기 위한 일종의 정보임.
- 하나 이상의 메타데이터 콘텐츠, 정확히 한 개의 title 요소를 포함해야함
- 생략이 가능하나 그래도 되도록 쓰는 것을 권장함
- 참고자료
BODY 태그
- 사용자에게 최종적으로 보여지는 모든 요소들이 담기는 곳
- 특성, 속성을 문서상 잘 보면 몇 가지는 사용을 못하는 속성들이 있음, 사용하지 못할 경우 대체해서 써야함
- 참고자료
태그를 구분짓는 특성
- 구획을 나누는 태그
- 단독으로 사용했을 때에는 눈에 보이지 않음
- 여러가지 요소들을 묶어서 그룹화
- 레이아웃을 위해 섹션별로 구분하고 아이템을 담는 용도로 사용됨
- 일종의 컨테이너의 역할을 하고 구획을 나눔, 아이템을 묶는데 용이함
- 그 자체로 요소인 태그
- 단독으로 사용했을 때에도 눈으로 확인할 수 있음
- 버튼, 텍스트 등
블록과 인라인
- 블록(Block)
- 블록 레벨 요소는 언제나 새로운 줄에서 시작하고, 좌우 양쪽으로 최대한 늘어나 가능한 모든 너비를 차지함
- 상자를 아래로 쌓는 느낌
- 인라인(Inline)
- 인라인 요소는 줄의 어느곳에서나 시작할 수 있음
- 바로 이전 요소가 끝나는 지점부터 시작하여, 요소의 내용(Content)만큼만 차지함
- 포함 규칙
- 같은 형태의 다른 요소를 안에 포함할 수 있음(블록 > 블록, 인라인 > 인라인)
- 대부분의 블록 요소는 다른 인라인 요소도 안에 포함할 수 있음(단, 인라인 요소는 블록 요소를 포함할 수 없음!)
- 그래서 블록 요소는 한 행을 다 차지하기 때문에 인라인 요소가 먼저 있다면 다음행으로 넘어가서 요소가 처리될 수도 있음
콘텐츠 카테고리
- HTML5부터 비슷한 특징을 가진 요소끼리 묶어서 7가지 카테고리로 세분화함.
- 하나의 HTML 요소가 여러 콘텐츠 카테고리 내의 포함관계에 들어갈 수도 있음
메타데이터 콘텐츠(Metadata Content)문서의 메타 데이터(정보), 다른 문서를 가리키는 링크 등을 나타내는 요소플로우 콘텐츠(Flow Content)웹 페이지상에 메타데이터를 제외하고 거의 모든 요소. 보통 텍스트나 임베디드 콘텐츠를 포함(body에 들어가는 대부분 요소들)섹션 콘텐츠(Section Content)웹 문서의 구획(Section)을 나눌때 사용헤딩 콘텐츠(Heading Content)섹션의 제목(heading)과 관련된 요소프레이징 콘텐츠(Phrasing Content)문단에서 텍스트를 마크업 할 때 사용임베디드 콘텐츠(Embedded Content)이미지나 비디오 등 외부 소스를 가져오거나 삽입할 때 사용되는 요소인터렉티브 콘텐츠(Interactive Content)사용자의 상호작용을 위한 콘텐츠 요소- 참고자료
측정할 수 없으면 관리할 수 없고, 관리할 수 없으면 개선시킬 수도 없다