HTML 개요(문법, 부모자식, 빈태그, 글자상자)

1) 문법: 요소, 부모자식

요소(element): <태그>내용</태그>

부모-자식요소: 자식-들여쓰기(indent:tap), 부모-내어쓰기(outdent:shift+tab) : 보기 좋은 형태로 관리

ㄴ나를 기준으로 내가 감싸고 있는 아래요소(하위), 내 위를 감싼다면 (상위)요소

  <div>
    <div></div>
  </div>

cf) 부모의 상위요소라면? 상위(조상)요소

     자식의 하위요소라면? 하위(후손)요소

 

2) 빈태그

빈(empty)태그

열린태그:<> 편리하고 모든 사항에 해당하진 않음 ( XHTML 예외)

닫힌태그:</> /를 붙여, 안전하고 XHTML/HTML5 Okay[권장]

<태그 속성 = "값"> 내용</태그>

 

3) 글자와 상자

인라인(inline) 요소: 글자

블록(block) 요소: 상자(레이아웃)

 

* 인라인요소: 수평으로 쌓임 : 대표적 <span></span> 콘텐츠 영역 설정하는 용도

ㄴ 띄어쓰기가 될 수 있음, 포함한 콘텐츠 크기만큼 자간이 자동으로 줄어든다.

ㄴ 글자요소는 가로세로 사이즈를 지정할 수 없다.

ㄴ 요소의 외부여백(margin)은 사용할 수 없다. [위아래 안됨]

ㄴ 글자 안엔 상자를 집어넣을 수 없다 [span>div [x]] 

*요소의 내부여백(padding)사용 가능하다. [좌우 됨]

 

* 블록요소: 수직으로 쌓임: 대표적:<div>

ㄴ 부모요소의 크기만큼 자간이 자동으로 늘어난다.

ㄴ외,내부 여백은 모두 사용가능[제어 시에 블록이 유리]

ㄴ상자 안에 상자와 글자 모두 가능