HTML 2.엘리먼트 관계, 블럭(Block) 요소, 인라인(Inline) 요소

HTML 관계 종료

• 부모(Parent)와 자식(Children 또는 Childrens)
• 같은 부모 = 형제(Sibling)
• 이런 관계가 계속 이어지며 Tree구조를 구성한다.(HTML Trees)

권장하는 부모 요소, 자식 요소

몇 가지 경우의 수로 나눠지나 가장 큰 기준은 아래와 같다.

부모

• div같은 블록 요소

자식

• 일부 블록 요소 + 인라인(inline) 요소

id 속성

• 한 페이지의 유일한 요소의 식별자
• 한 페이지에 같은 id 속성값이 존재할 순 없다.

class 속성

• 한 페이지에 다중 요소의 식별자
• 관리를 위한 그룹을 만들어준다고 볼 수 있다.

자주 나오는 요소 패턴

• <a href="hypelnIk"> 내용 </a> : 해당 내용에 대한 연결주소(HyperLink) 지정
• <img src="이미지 파일 주소"> : 마쳐주는 태그가 없다.
• <br> : 줄 바꿈. Line Break
• <div> : 레이아웃을 잡을 때 사용
• <input type="text"> : 텍스트 입력용. type 속성에 여러가지 들어갈 수 있다.
• input은 form태그에서 다시 설명

블럭(Block) 요소

• 줄 바꿈 속성이 있다.
• 블록 요소를 포함할 수 없다(예외 존재)
• 인라인 요소를 포함 할 수 있다.
• 태그 목록 : div, p, h1~h6, address, ol, ul, li, dl, dt, area, dd 등
• 예외적으로 범용 요소는 다른 블록 요소를 포함할 수 있다.
• 범용 요소 : div, address(p 요소만), li, dd

인라인(Inline)요소

• 줄 바꿈 속성 없다.
• 블록 요소를 포함할 수 없다.
• 인라인 요소는 포함할 수 있다.
• 태그 목록 : a, img, span, strong, q, em, abbr, acronym, sup, sub, map, area 등