태그
ex)
<p>태그 공부</p>
<p> : 여는 태그
</p> : 닫는 태그
태그 공부 : 내용(content)
전체를 통틀어 요소라고 부름.태그의 경우 대소문자를 구분하진 않지만, HTML5에서는 모두 소문자로 작성 권장!!
why? 가독성
빈 요소
내용이 없는 요소(빈 요소)가 있을까?? -> 이미지, 수평선, 줄바꿈 등(닫는 태그를 추가로 명시하지 않아도 됨)
빈 요소로 태어나지 않은 애들에 내용을 작성하지 않는다고 빈 요소가 되는 것은 아님!
요소의 중첩
요소의 중첩(Nesting)
- 요소 안에 다른 요소가 들어가는 포함관계 성립 가능
- 요소 중첩 시, 열린 순서의 반대로 닫혀야 함.
- 서로의 포함관계(부자관계)를 구분하기 위해 들여쓰기 사용.
ex)
<ul>
<li> 하나 </li>
<li> 둘 </li>
<li> 셋 </li>
</ul>주석
주석 (comments) : 브라우저가 내용을 해석하지 않음. 코드에 메모를 추가하거나, 사용하지 않는 코드를 임시로 처리
<p>Hi</p>
<!-- <p>I am!</p> --> (주석 처리)HTML 구조
<!DOCTYPE html>
<html>
<head>
<!-- HEAD 영역 -->
</head>
<body>
<!-- BODY 영역 -->
</body>
</html><!DOCTYPE html> : document의 타입이 html이다. 선언하고 시작하는게 관습화됨.
html : 페이지 전체의 컨텐츠를 감싸는 루트(root)요소
head : 웹브라우저 화면에 직접적으로 나타나진 않는 웹페이지 정보
- meta tag : 문서의 일반적인 정보와 문자 인코딩 명시
- title : 페이지의 제목
body : 웹브라우저 화면에 나타나는 모든 콘텐츠
<head> 태그
head
- 사람이 아닌 웹 브라우저를 위한 정보
- 젬목, 스크립트, 스타일 시트 등
- HTML5에서는 생략 가능하지만 생략하지 말도록!!!!!
- 모든 브라우저 호환
<body> 태그
body
- HTML 문서의 내용을 나타냄
- HTML5에서는 생략 가능하지만 생략하지 말도록!!!!!
- 모든 브라우저 호환
태그를 구분짓는 특성(body)
구획을 나누는 태그(layout) : 컨테이너의 역할을 갖고 있음.
- 단독으로 사용했을 때는 눈에 보이지 않음.
- 여러가지 요소들을 묶어서 그룹화
그 자체로 요소인 태그(button 등)
- 단독으로 사용했을 때에도 눈으로 확인 가능
블록(Block)과 인라인(Inline)
블록(Block)
- 블록 레벨 요소는 언제나 새로운 줄에서 시작, 좌우 양쪽으로 최대한 늘어나 가능한 모든 너비를 차지함. (부모가 허용한 가로 최대까지)
- 상자를 아래로 쌓는 것!
인라인(Inline)
- 인라인 요소는 줄의 어느 곳에서나 시작 가능
- 바로 이전 요소가 끝나는 지점부터시작하여, 요소의 내용만큼만 차지
블록 > 블록 / 인라인 > 인라인 / 블록 > 인라인 포함 가능
하지만, 인라인 안에 블록은 포함할 수 없다.
