1. HTML 기초
Q) 어떻게 생긴 놈이죠?? 🤔
-
웹 페이지를 구성하고 있는 요소(element) 하나하나를 "태그(Tag)"라는 표기법으로 작성한다.
-
태그를 통해 어떤 요소인지 (제목, 본문, 이미지, 비디오 등) 명시한다.
-
태그의 이름은 HTML5 웹 표준에 맞게 작성한다.
여는 태그(Opening tag): <요소의 이름>
닫는 태그(Closing tag): </요소의 이름>
내용(Content): 요소의 내용
요소(Element): 여는 태그, 닫는 태그, 내용을 통틀어 요소(element)라고 한다.
--> 여는 태그 & 닫는 태그는 사용자에게는 보이지 않는다. == 개발자가 명시하기 위한 용도이다.
[ 사용자에게는 내용만 보인다. ]
Example
<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>-
html은 줄바꿈을 무시한다. (3~5 Line)
-
각 태그 사이에 있는 Text가 내용이다.
-
<title>,<Title>,<tItle>, ... --> 전부 동일하게 인식한다.
태그 요소 이름의 경우 대소문자를 구분하진 않지만, HTML5에서는 모두 소문자로 작성하는 것을 권장한다.
일관성 있는 html 문서 작성과 가독성을 위해서 반강제되는 내용이다.
빈 요소 (Empty elements)
-
내용(content)이 없다면? (
이미지,수평선,줄바꿈, ...) -
내용이 없는 요소를 빈 요소(Empty element)라고 부른다.
--> 닫는 태그를 추가로 명시하지 않아도 된다. -
Empty element, Self-Closing element, Void element, Single tag, ...
-
빈 요소로 쓰일 수 있는 태그와 쓰일 수 없는 태그는 정해져 있다.
--><p></p>와 같이 내용만 비운다고 해서 빈 요소가 되는 것은 아니다!! -
<빈 요소명> & <빈 요소명/> : 같은 의미 (Optional)
But, 일관성 있게 사용하자.
Example
<br>
<hr>
<img src="http://url">
<meta charset="UTF-8">
<input type="text" name="name">요소의 중첩 (Nesting)
-
요소 안에 다른 요소가 들어가는 포함관계를 성립할 수 있다.
-
여러 요소가 중첩된 경우 : 열린 순서의 반대로 Tag 가 닫혀야 한다.
-
포함관계를 구분하기 위해 들여쓰기(Indent)를 사용한다. --> 가독성도 함께 올라간다.
Example
<html>
<head>
<title>요소의 중첩</title>
</head>
<body>
<h1>요소 안에 <strong>다른 요소가</strong> 들어갈 수도 있습니다!</h1>
<ul>
<li>하나</li>
<li>둘</li>
<li>셋</li>
</ul>
</body>
</html>
- 내용(content) 의 구성요소는
1. 텍스트
2. 다른 요소
가 될 수 있다.
주석 (Comments)
- 브라우저는 주석을 무시하여 사용자가 주석을 보이지 않게 한다.
< 주석의 목적 >
- 코드에 메모를 추가
- 사용하지 않는 코드를 임시로 처리
Example
<p>I'm not inside a comment</p>
<!-- <p>I am!</p> -->2. HTML 문서의 구조
기본 골격
<!DOCTYPE html>
<html>
<head>
<!-- HEAD 영역 -->
</head>
<body>
<!-- BODY 영역 -->
</body>
</html>-
<!DOCTYPE html>: 문서의 종류를 나타낸다. -
html: 페이지 전체의 컨텐츠를 감싸는 루트(root) 요소 (최상위 요소) -
head: 웹브라우저 화면에서 직접적으로 나타나지는 않는 웹페이지의 정보
-- meta : 문서의 일반적인 정보와 문자 인코딩(Encoding)을 명시
-- title :Chrome기준 상단 '탭' 제목 -
body: 웹브라우저 화면에 나타나는 모든 콘텐츠(내용)
<head> 태그에 관한 MDN Info.
🦊 https://developer.mozilla.org/ko/docs/Web/HTML/Element/head
<body> 태그에 관한 MDN Info.
🦊 https://developer.mozilla.org/ko/docs/Web/HTML/Element/body
--> body 는 속성을 지정하기보다 단독으로 사용된다.
태그를 구분짓는 특성 (body)
1. 구획을 나누는 태그 : Layout 의 목적
-
단독으로 사용했을 때에는 눈에 보이지 않는다.
-
여러가지 요소들을 묶어서 그룹화한다.
--> Item 들을 담는 용도로 사용된다. == Item이 없으면 눈에 보이지 않는다.
2. 그 자체로 요소인 태그
- 단독으로 사용했을 때에도 눈으로 확인할 수 있다.
블록(Block) & 인라인(Inline)
1. 블록(Block)
상자를 아래로 쌓는 것!
-
블록 레벨 요소는 언제나 새로운 줄에서 시작한다.
-
좌우 양쪽으로 최대한 늘어나 가능한 모든 너비를 차지한다.
2. 인라인(Inline)
-
인라인 요소는 줄의 어느 곳에서나 시작할 수 있다.
-
바로 이전 요소가 끝나는 지점부터 시작한다.
--> 요소의 내용(content)만큼만 자리를 차지한다. -
다른 인라인 요소와 한 줄에 중첩되어 사용 가능하다.
3. 인라인 블록(Inline-Block)
Block과Inline특성의 혼종이다. (?)
-
기본적으로 인라인 요소처럼 전후 줄바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치된다.
-
But,
inline에서 불가능하던width와height속성 지정 및margin과padding속성의 상하 간격 지정이 가능해진다.
📦 포함 규칙
- 같은 형태의 다른 요소를 안에 포함할 수 있다.
(블록 > 블록, 인라인 > 인라인)- 대부분의 블록 요소는 다른 인라인 요소도 안에 포함할 수 있다.
(블록 > 인라인)- !! 인라인 요소는 블록 요소를 포함할 수 없다. !!
콘텐츠 카테고리
-
HTML5 부터 비슷한 특징을 가진 요소끼리 묶어서 7가지 카테고리로 세분화한다.
-
하나의 HTML 요소가 여러 콘텐츠 카테고리 내의 포함관계에 들어갈 수도 있다.
- 메타데이터 콘텐츠 (Metadata Content) : 문서의 메타 데이터(정보), 다른 문서를 가리키는 링크 등을 나타내는 요소
- 플로우 콘텐츠 (Flow Content) : 웹 페이지상에 메타데이터를 제외하고 거의 모든 요소.
- 보통 텍스트나 임베디드 콘텐츠를 포함한다.- 섹션 콘텐츠 (Section Content) : 웹 문서의 구획(Section)을 나눌 때 사용
- 헤딩 콘텐츠 (Heading Content) : 섹션의 제목(heading)과 관련된 요소
- 프레이징 콘텐츠 (Phrasing Content) : 문단에서 텍스트를 마크업 할 때 사용
- 임베디드 콘텐츠 (Embedded Content) : 이미지나 비디오 등 외부 소스를 가져오거나 삽입할 때 사용되는 요소
- 인터렉티브 콘텐츠 (Interactive Content) : 사용자와의 상호작용을 위한 컨텐츠 요소
