[HTML&CSS] 1강 HTML 개념 및 구성요소
1. HTML이란?
: 웹페이지 표시를 위해 개발된 지배적인 마크업 언어
: HTML은 제목, 단락, 목록 등과 같은 본문을 위한 구조적 의미를 나타내는 것 뿐만 아니라 링크, 인용 그 밖의 항목으로 구조적 문서를 만들 수 있는 방법을 제공
: 이미지와 객체를 내장하여 대화형 양식을 생성하는데 사용 가능
- 문서의 특정 텍스트 영역이 문단인지 목록인지 표의 일부인지 구분할 수 있도록 의미를 부여
- 헤더인지 콘텐츠 칼럼인지, 네비게이션 메뉴인지 알 수 있도록 논리적인 영역으로 구조화
- 이미지와 비디오 같은 콘텐츠를 삽입할 수 있게 해주는 요소들로 구성된 간단한 언어
웹을 이루는 가장 기초적인 구성요소
웹 페이지를 만들기 위한 표준 마크업 언어
2. index.html
: 방문자가 사이트를 요청할 때 다른 페이지가 지정되지 않은 경우 웹 사이트에 표시된 기본 페이지에 사용되는 가장 일반적인 이름
3. HTML 구성요소
a. 태그 (tag)
- 웹 문서를 구성하는 명령어
- 꺽새 안에 들어 있는 정보를 정의하는 형식
- 요소의 일부로 시작 태크(요소의 시작)와 종료 태그 (요소의 끝) 두 종류
- 종료 태그가 없는 <br /> <hr />과 같은 태그도 있음
b. 요소 (element)
- 시작 태그와 종료 태그, 그 사이의 내용으로 구성됨
1) 빈 요소
: 내용 없이 구조적인 기능만 하는 요소
ex) <br /> <hr />
+ <br>과 <br />의 차이
HTML5: <br>이 기본, <br/> 또는 <br />와도 혼용 가능
XHTML : <br />이 기본, <br> 또는 <br/> 와도 혼용 가능
-> <br> 표기법을 동일하여 사용하는 것을 추천
2) 블록 요소
- 다른 블록 요소를 포함할 수 있음
- 인라인 요소를 포함 할 수 있음
- 블록요소 이후에 블록 요소를 사용하면 아랫줄에(세로로) 나타나게 됨
- margin과 padding 값을 가질 수 있음
ex) h1~h6, div, list, p, 시맨틱 태그
3) 인라인 요소
- 블록 요소 안에 포함되어 있음
- 다른 인라인 요소를 포함할 수 있음
- 블록 요소를 포함할 수 없음
- 너비와 높이 값을 가질 수 없음
- 인라인 요소 이후에 인라인 요소를 사용하면 가로로 쌓임
- display:block을 이용해서 너비를 생성할 수 있음
ex) a, span, strong
c. 속성 (attribute)
- 태그를 보조하는 명령어로 태그 안쪽에 있음
- 태그의 문법 명령어가 다루지 못하는 명령을 보조
ex) width, height, alt, style, href
<a> = 다른 웹사이트에 대한 링크
href = 이 링크를 클릭할 때 열리는 웹사이트를 수정해줌
d. 속성 값 (attribute values)
- 속성에 대한 값 " "부분에 들어갈 값을 속성 값이라고 함