1. HTML 기초
a) Html이란?
: 웹 페이지를 구성하고 있는 요소(Element) 하나하나를 태그(Tag)라는 표기법으로 작성하는것.
: 태그를 통해 어떤 구성요소인지 (제목, 본문, 이미지, 링크, 비디오 등등) 명시함.
여는 태그(Opening tag): <요소의 이름>
닫는 태그(Closing tag): </요소의 이름>
내용(Content): 요소의 내용
요소(Element): 여는 태그, 닫는 태그, 내용을 통틀어 요소(element)라고 함.
※ 여는&닫는 태그는 사용자에게는 보이지 않고 개발자가 명시하고 확인하기 위한 용도임.
예시)
<h1>HTML 예시</h1>
<h2>안녕하세요</h2>
<p>
언제나 늘 열심히 공부하는 프로그래머가 됩시다!
</p>: html은 줄바꿈이 먹지않음(무시함)
: 각 태그 사이에 있는 Text가 해당하는 내용이다.
: <title>, <Title>, <tItle> ... 등등 → 전부 동일하게 인식함.
: 태그 요소 이름의 경우 대소문자를 구분하지 않지만, HTML5 에서는 소문자로 작성하는것을 권장
b) 빈 요소 (Empty elements)
: 내용(content)이 없으면 ? (이미지, 선, 줄바꿈 ...등등)
: 내용이 없는 요소를 빈 요소(Empty element)라고 함. [ 닫는 태그를 명시하지 않아도 됨]
: 빈 요소로 쓰일 수 있는 태그와 쓰일 수 없는 태그는 정해져 있음
→ <p></p> 와 같이 내용만 비운다고 해서 빈 요소가 되는 것은 아님.
→ <빈 요소명> & <빈 요소명/> : 같은 의미 (Optional)
c) 요소의 중첩 (Nesting)
: 요소 안에 다른 요소가 들어가는 포함관계 성립가능
: 여러 요소가 중첩된 경우 : 열린 순서의 반대로 Tag가 닫혀야 함.
: 포함관계를 구분하기 위해 들여쓰기(Indent)를 사용함 → 가독성도 함께 Up !!
예시)
<html>
<head>
<title>요소중첩</title>
</head>
<body>
<h1>요소 안에 <strong>다른 요소가</strong> 들어갈 수도 있다!</h1>
<ul>
<li>허이</li>
<li>너이</li>
<li>셋</li>
</ul>
</body>
</html>: 내용(content)의 구성요소
- 1. 텍스트
- 2. 다른 요소
d) 주석 (Comments)
: 브라우저는 주석을 무시하여 사용자가 주석을 보이지 않게 함.
[ 주석의 목적 ]
1. 코드에 메모를 추가함
2. 사용하지 않는 코드를 임시로 처리
3. 주석은 인용한 글의 출처를 밝히는 데 사용
4. 주석은 본문에서 제기한 문제점을 부각시켜 논의하는 데 사용함
예시)
<p>이것은 주석이 아닙니다.</p>
<!-- <p>이것은 주석입니다.</p> -->2. HTML 문서의 구조
a) 기본골격
<!DOCTYPE html>
<html>
<head>
<!-- HEAD 영역 -->
</head>
<body>
<!-- BODY 영역 -->
</body>
</html>- <!DOCTYPE html> : 문서의 종류
- html : 페이지 전체의 컨텐츠를 감싸는 루트(root) 요소 (최상위 요소)
- head : 웹브라우저 화면에서 직접적으로 나타나지는 않는 웹페이지의 정보
-- meta : 문서의 일반적인 정보와 문자 인코딩(Encoding)을 명시
-- title : Chrome 기준 상단 '탭' 제목 - body : 웹브라우저 화면에 나타나는 모든 콘텐츠(내용)
b) 태그를 구분짓는 특성 (body)
1) 구획을 나누는 태그 : Layout의 목적
: 단독으로 사용했을 때에는 눈에 보이지 않음.
: 여러가지 요소들을 묶어서 그룹화
→ Item 들을 담는 용도로 사용함 == Item이 없으면 눈에 보이지 않음.
2) 그 자체로 요소인 태그
: 단독으로 사용했을 때에도 눈으로 확인할 수 있다.
c) 블록(Block) & 인라인(Inline)
1. 블록(Block)
: 햄버거를 만들듯이 ~ 라고 생각하면 편함
: 블록 레벨 요소는 언제나 새로운 줄에서 시작
: 좌우 양쪽으로 최대한 늘어나 가능한 모든 너비를 차지함
2. 인라인(Inline)
: 인라인 요소는 줄의 어느 곳에서나 시작할 수 있다.
: 바로 이전 요소가 끝나는 지점부터 시작함.
→ 요소의 내용(content)만큼 자리를 차지함
: 다른 인라인 요소와 한 줄에 중첩되어 사용 가능하다.
3. 인라인 블록(Inline-Block)
: Block + Inline을 특성만 합쳐놓은 혼종
: 기본적으로 인라인 요소처럼 전후 줄바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치.
: inline에서 불가능하던 width와 height 속성 지정 및 margin과 paddding속성의 상하 간격 지정이 가능함.
- ※ 포함 규칙 ※
- 같은 형태의 다른 요소를 안에 포함할 수 있다.
(블록 > 블록, 인라인 > 인라인) - 대부분의 블록 요소는 다른 인라인 요소도 안에 포함할 수 있다.
(블록 > 인라인) - 인라인 요소는 블록 요소를 포함할 수 없다.
4. 콘텐츠 카테고리
: HTML5 부터 비슷한 특징을 가진 요소끼리 묶어서 7가지 카테고리로 세분화함.
: 하나의 HTML 요소가 여러 콘텐츠 카테고리 내의 포함관계에 들어갈 수도 있다.
- 메타데이터 콘텐츠 (Metadata Content) : 문서의 메타 데이터(정보), 다른 문서를 가리키는 링크 등을 나타내는 요소
- 플로우 콘텐츠 (Flow Content) : 웹 페이지상에 메타데이터를 제외하고 거의 모든 요소.
- 보통 텍스트나 임베디드 콘텐츠를 포함한다. - 섹션 콘텐츠 (Section Content) : 웹 문서의 구획(Section)을 나눌 때 사용
- 헤딩 콘텐츠 (Heading Content) : 섹션의 제목(heading)과 관련된 요소
- 프레이징 콘텐츠 (Phrasing Content) : 문단에서 텍스트를 마크업 할 때 사용
- 임베디드 콘텐츠 (Embedded Content) : 이미지나 비디오 등 외부 소스를 가져오거나 삽입할 때 사용되는 요소
- 인터렉티브 콘텐츠 (Interactive Content) : 사용자와의 상호작용을 위한 컨텐츠 요소
1. HTML 기초
a) Html이란?
: 웹 페이지를 구성하고 있는 요소(Element) 하나하나를 태그(Tag)라는 표기법으로 작성하는것.
: 태그를 통해 어떤 구성요소인지 (제목, 본문, 이미지, 링크, 비디오 등등) 명시함.
여는 태그(Opening tag): <요소의 이름>
닫는 태그(Closing tag): </요소의 이름>
내용(Content): 요소의 내용
요소(Element): 여는 태그, 닫는 태그, 내용을 통틀어 요소(element)라고 함.
※ 여는&닫는 태그는 사용자에게는 보이지 않고 개발자가 명시하고 확인하기 위한 용도임.
예시)
<h1>HTML 예시</h1>
<h2>안녕하세요</h2>
<p>
언제나 늘 열심히 공부하는 프로그래머가 됩시다!
</p>: html은 줄바꿈이 먹지않음(무시함)
: 각 태그 사이에 있는 Text가 해당하는 내용이다.
: <title>, <Title>, <tItle> ... 등등 → 전부 동일하게 인식함.
: 태그 요소 이름의 경우 대소문자를 구분하지 않지만, HTML5 에서는 소문자로 작성하는것을 권장
b) 빈 요소 (Empty elements)
: 내용(content)이 없으면 ? (이미지, 선, 줄바꿈 ...등등)
: 내용이 없는 요소를 빈 요소(Empty element)라고 함. [ 닫는 태그를 명시하지 않아도 됨]
: 빈 요소로 쓰일 수 있는 태그와 쓰일 수 없는 태그는 정해져 있음
→ <p></p> 와 같이 내용만 비운다고 해서 빈 요소가 되는 것은 아님.
→ <빈 요소명> & <빈 요소명/> : 같은 의미 (Optional)
c) 요소의 중첩 (Nesting)
: 요소 안에 다른 요소가 들어가는 포함관계 성립가능
: 여러 요소가 중첩된 경우 : 열린 순서의 반대로 Tag가 닫혀야 함.
: 포함관계를 구분하기 위해 들여쓰기(Indent)를 사용함 → 가독성도 함께 Up !!
예시)
<html>
<head>
<title>요소중첩</title>
</head>
<body>
<h1>요소 안에 <strong>다른 요소가</strong> 들어갈 수도 있다!</h1>
<ul>
<li>허이</li>
<li>너이</li>
<li>셋</li>
</ul>
</body>
</html>: 내용(content)의 구성요소
- 1. 텍스트
- 2. 다른 요소
d) 주석 (Comments)
: 브라우저는 주석을 무시하여 사용자가 주석을 보이지 않게 함.
[ 주석의 목적 ]
1. 코드에 메모를 추가함
2. 사용하지 않는 코드를 임시로 처리
3. 주석은 인용한 글의 출처를 밝히는 데 사용
4. 주석은 본문에서 제기한 문제점을 부각시켜 논의하는 데 사용함
예시)
<p>이것은 주석이 아닙니다.</p>
<!-- <p>이것은 주석입니다.</p> -->2. HTML 문서의 구조
a) 기본골격
<!DOCTYPE html>
<html>
<head>
<!-- HEAD 영역 -->
</head>
<body>
<!-- BODY 영역 -->
</body>
</html>- <!DOCTYPE html> : 문서의 종류
- html : 페이지 전체의 컨텐츠를 감싸는 루트(root) 요소 (최상위 요소)
- head : 웹브라우저 화면에서 직접적으로 나타나지는 않는 웹페이지의 정보
-- meta : 문서의 일반적인 정보와 문자 인코딩(Encoding)을 명시
-- title : Chrome 기준 상단 '탭' 제목 - body : 웹브라우저 화면에 나타나는 모든 콘텐츠(내용)
b) 태그를 구분짓는 특성 (body)
1) 구획을 나누는 태그 : Layout의 목적
: 단독으로 사용했을 때에는 눈에 보이지 않음.
: 여러가지 요소들을 묶어서 그룹화
→ Item 들을 담는 용도로 사용함 == Item이 없으면 눈에 보이지 않음.
2) 그 자체로 요소인 태그
: 단독으로 사용했을 때에도 눈으로 확인할 수 있다.
c) 블록(Block) & 인라인(Inline)
1. 블록(Block)
: 햄버거를 만들듯이 ~ 라고 생각하면 편함
: 블록 레벨 요소는 언제나 새로운 줄에서 시작
: 좌우 양쪽으로 최대한 늘어나 가능한 모든 너비를 차지함
2. 인라인(Inline)
: 인라인 요소는 줄의 어느 곳에서나 시작할 수 있다.
: 바로 이전 요소가 끝나는 지점부터 시작함.
→ 요소의 내용(content)만큼 자리를 차지함
: 다른 인라인 요소와 한 줄에 중첩되어 사용 가능하다.
3. 인라인 블록(Inline-Block)
: Block + Inline을 특성만 합쳐놓은 혼종
: 기본적으로 인라인 요소처럼 전후 줄바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치.
: inline에서 불가능하던 width와 height 속성 지정 및 margin과 paddding속성의 상하 간격 지정이 가능함.
- ※ 포함 규칙 ※
- 같은 형태의 다른 요소를 안에 포함할 수 있다.
(블록 > 블록, 인라인 > 인라인) - 대부분의 블록 요소는 다른 인라인 요소도 안에 포함할 수 있다.
(블록 > 인라인) - 인라인 요소는 블록 요소를 포함할 수 없다.
4. 콘텐츠 카테고리
: HTML5 부터 비슷한 특징을 가진 요소끼리 묶어서 7가지 카테고리로 세분화함.
: 하나의 HTML 요소가 여러 콘텐츠 카테고리 내의 포함관계에 들어갈 수도 있다.
- 메타데이터 콘텐츠 (Metadata Content) : 문서의 메타 데이터(정보), 다른 문서를 가리키는 링크 등을 나타내는 요소
- 플로우 콘텐츠 (Flow Content) : 웹 페이지상에 메타데이터를 제외하고 거의 모든 요소.
- 보통 텍스트나 임베디드 콘텐츠를 포함한다. - 섹션 콘텐츠 (Section Content) : 웹 문서의 구획(Section)을 나눌 때 사용
- 헤딩 콘텐츠 (Heading Content) : 섹션의 제목(heading)과 관련된 요소
- 프레이징 콘텐츠 (Phrasing Content) : 문단에서 텍스트를 마크업 할 때 사용
- 임베디드 콘텐츠 (Embedded Content) : 이미지나 비디오 등 외부 소스를 가져오거나 삽입할 때 사용되는 요소
- 인터렉티브 콘텐츠 (Interactive Content) : 사용자와의 상호작용을 위한 컨텐츠 요소
