01. 기본 문법
요소(element) : <태그>내용</태그>
02. 부모와 자식 관계의 이해
부모 요소를 포함하는 모든 상위 요소들은 상위(조상) 요소
자식 요소를 포함한 감싸는 모든 요소는 하위(후손) 요소 라고 함.
03. 빈 태그
meta태그, link, image 등 닫히는 태그가 없는 태그를 빈 태그(empty tag)라고 함.
- <태그> 또는 <태그/> 두가지 방식으로 사용할 수 있음.
<태그/> - 엄격한 방식. 더 명확하게 쓰는 방식. 쓰는걸 권장.
태그 속성 = "값" ex)title태그의 name이 속성 soyeon이 값
값 : (attribute)(value)
->기능을 확장할 수 있음.
빈태그들은 대부분 속성과 값을 설정하는 칸이 자동으로 붙음.
어떤건 요소의 "필수속성"이라고 함. ex) image태그의 "src"
04. 글자와 상자
- 인라인(inline) 요소 :글자를 만들기 위한 요소들
- 블록(block) 요소 : 상자(레이아웃)를 만들기 위한 요소들
span :
대표적인 인라인 요소. 기본적으로 왼->오 수평으로 쌓이는 특성을 가지고 있음
<span>Hello</span>
<span>World</span>
Hello World
줄바꿈은 띄어쓰기로 인식됨.
※ 포함한 콘텐츠 크기만큼 자동으로 줄어들음. 높이도 포함한 콘텐츠 크기만큼 자동으로 줄어듬!!★ 글자요소들이.
※ 인라인 요소는 글자를 취급하는 요소이고, 글자는 가로 사이즈와 세로 사이즈를 가질 수 없음. ★★★
so width, margin 등 모두 안 먹힘. 내부외부를 지정할 때 좌우는 되는데 위아래는 안됨.
※span 하위에 블록 요소인 div는 사용할 수 없음.
div :
대표적인 블록 요소. 본질적으로 아무것도 나타내지 않는 콘텐츠 영역을 설정하는 용도.
위에서 아래로 수직으로 쌓이는 특징.
부모 요소의 크기만큼 자동으로 늘어남, 세로 너비는 자동으로 줄어듬
※ 가로 세로 지정할 수 있는 개념 외부 내부도 모두 지정 가능!
※ 자식으로 블록 요소, 인라인 요소 모두 포함 가능.
일반적으로 블록 요소는 제약 사항이 별로 없다.
