HTML 기초 정리

요소의 특징

요소가 화면에 렌더링 되는 특징으로 크게 아래 두 가지로 구분됩니다.

 

[인라인(Inline) 요소] - 글자를 만들기 위한 요소들 (ex. span 태그)

• span 태그는 대표적인 인라인 요소이며, 본질적으로 아무것도 나타내지 않는, 콘텐츠 영역을 설정하는 용도로 사용됩니다.

• 요소가 왼쪽에서 오른쪽으로 수평으로 쌓입니다..
• 연속된 인라인을 줄 바꿈 하여 작성 시 띄어쓰기가 적용됩니다.
• 가로와 높이 사이즈가 포함된 콘텐츠 크기만큼 자동으로 줄어듭니다.
• 인라인 요소는 글자를 취급하는 요소이기 때문에 가로와 세로 사이즈를 가질 수 없습니다.(CSS로 가로 / 세로 지정 불가능)
• 인라인 요소는 외부 여백(margin)과 내부 여백(padding)의 top과 bottom 적용이 불가능합니다.
• 인라인 요소의 자식 요소로 블록 요소 사용이 불가능합니다. (ex. <span><div></div></span> 사용 불가능)

 

[블록(Block) 요소] - 상자(레이아웃)를 만들기 위한 요소 (ex. div 태그)

• div 태그는 대표적인 블록 요소이며, 본질적으로 아무것도 나타내지 않는 콘텐츠 영역을 설정하는 용도로 사용됩니다.

• 요소가 위에서 아래로 수직으로 쌓입니다.
• 가로의 경우 전체 영역을 차지하려는 특징이 있으며, 세로의 경우 콘텐츠가 포함된 크기만큼 자동으로 줄어듭니다.
• 블록 요소는 상자의 개념이기 때문에 가로와 세로 사이즈를 가질 수 있습니다.(CSS로 가로 / 세로 지정 가능)
• 블록 요소는 외부 여백(margin)과 내부 여백(padding) 적용이 가능합니다.
• 블록 요소는 자식 요소로 블록 요소, 인라인 요소 사용이 가능합니다.

 

 

 

요소의 의미

html의 요소는 각각 아래와 같은 의미를 가지고 있습니다.

• div : 특별한 의미가 없는 구분을 위한 요소
• figure : 독립적인 콘텐츠를 표현하기 위한 요소 (figcaption 요소를 사용해 설명을 붙일 수 있고, 이미지와 이미지에 대한 설명을 추가하는 의미적인 부분에서 사용합니다.)
• h1 : 제목을 의미하는 요소 (Heading의 h를 따서 1~6까지의 중요도를 나타내며 숫자가 작을수록 더 중요한 제목을 의미합니다.)
• p : 문장을 의미하는 요소 (글자이지만 문장을 의미하기 때문에 블록 요소에 해당합니다.)
• img : 이미지를 삽입하는 요소 (이미지의 경우 인라인 요소에 해당합니다.)
• ul : 순서가 필요 없는 목록의 집합을 의미합니다.
• ol : 순서가 필요한 목록의 집합을 의미합니다.
• li : 목록 내 각 항목을 의미합니다.
• a : 다른 / 같은 페이지로 이동하는 하이퍼링크를 지정하는 요소 (인라인 요소이며, 속성으로 target="_blank" 설정 시 새 탭에서 페이지가 열립니다.)
• span : 특별한 의미가 없는 구분을 위한 요소 (인라인 요소에 해당합니다.)
• br : 줄 바꿈 기능을 하는 요소
• input : 사용자가 데이터를 입력하는 요소 (인라인 요소이면서 블록 요소(Inline-block)에 해당합니다. 왼쪽에서 오른쪽으로 쌓이며, 가로와 세로 사이즈 지정 및 여백 지정이 가능합니다.)

* input 요소의 속성 - disabled : 입력 요소 비활성화 / checked : 체크 박스 체크

 

 

 

 

 

전역 속성

HTML의 body 태그 안에서 사용되는 여러 태그에서 전체 영역에서 사용할 수 있는 다음과 같은 속성이 존재합니다.

(각각의 태그에서 공통으로 사용 가능한 속성)

• title : 마우스 오버 시 속성의 값으로 설정한 값이 출력됩니다. (요소의 정보나 설명을 지정)
• style : 요소에 적용할 스타일 지정이 가능합니다.
• class : 요소를 지칭하는 중복 가능한 이름을 설정합니다.
• id : 요소를 지칭하는 고유한 이름을 설정합니다. (기능 제어 시 사용)
• data-원하는 이름 : 요소에 데이터를 지정합니다. (속성의 값으로 설정하는 데이터는 기본적으로 문자 데이터로 기능 제어 시 사용)