HTML 요소(Elements), Element vs Tag, 엘리먼트의 구분(분류)

   

   

HTML 요소(Elements)

• HTML문서의 개별적인 구성 요소들을 의미
• 시작태그와 종료태그로 이루어진 모든 명령어들을 의미
• 시작 태그와 종료 태그를 묶어서 매칭(matching) 태그라고 부릅니다.
• 하나의 HTML 엘리먼트는 시작엘리먼트로 시작하고, 종료엘리먼트로 끝납니다.
• 일부 HTML 엘리먼트는 빈콘텐츠를 가질 수 있습니다. (<br>, <img>등)
• 빈 엘리먼트는 시작태그만으로 존재합니다.
• 대부분의 엘리먼트는 속성을 가지며
• 대부분의 엘리먼트는 중첩이 가능합니다.

   

Element(요소) = 시작태그(Opening) + 내용(Contents) + 종료태그(Closing)

   

   

Element vs Tag

구분	설명
엘리먼트 (Element)	HTML을 문서형식으로 구성할때 특정 의미를 표현하는 약속된 단어들 HTML에서 시작태그와 종료태그로 된 모든 명령어들을 의미 p엘리먼트는 paragraph(문단)를 의미하는 엘리먼트를 지칭 img엘리먼트는 image(이미지)를 의미하는 엘리먼트를 지칭
태그 (Tag)	꺽쇠기호(<>)로 둘러싸인 엘리먼트의 조합을 부르는 이름 <p>를 'p' 태그라고 <img>를 'img' 태그라고도 부릅니다.

   

    

엘리먼트의 구분

·         배치 관련된 스타일로 웹 문서에 삽입되는 요소들은 크게 블록 레벨 요소와 인라인 레벨 요소로 나눠집니다.

·         block-level element는 inline-level element를 포함할 수 있지만 반대의 경우는 불가능합니다.

·         block-level과 inline-level의 차이를 확실하게 알고 있어야 CSS를 전문적으로 사용할 수 있습니다.

 

구분	설명
블록레벨 엘리먼트 (Block level element)	·         단독으로 한 줄 전체를 차지하는 요소 ·         블록처럼 쌓여 가면서 항상 새로운 줄로 줄바꿈하여 표시됩니다. ·         너비값은 브라우저 화면에 100% 꽉차게 표시 ·         따라서 블록 레벨 요소는 해당 요소의 왼쪽이나 오른쪽에 다른 요소가 올 수 없습니다. ·         block-level element가 한줄을 다 차지하지만 자신을 포함한 element가 허용하는 범위내에서 차지하게 됩니다. 만일 테이블의 셀안에 들어간다면 그 셀의 크기가 허용하는 범위내에서만 width를 차지하게 됩니다. ·         <p>, <h1>~<h6>, <ul>, <ol>, <div>
인라인레벨 엘리먼트 (Inline level element)	·         콘텐츠 만큼만 영역을 차지하는 요소 ·         줄바꿈을 하지 않아 같은 줄 안에서 다른 요소를 이어서 표시할 수 있습니다. (한 줄에 여러 개의 인라인 레벨 요소 표시 가능) ·         너비값은 요소가 가지고 있는 값만큼만 표시됩니다. ·         <em>, <sub>, <span>, <img>, <strong>