내용(컨텐츠, 요소)이 화면에 출력되는 특성 2가지
1. 인라인(inline) 요소 : 글자를 만들기 위한 요소들
2. 블록(Block) 요소 : 상자(레이아웃)를 만들기 위한 요소들
1번의 인라인(inlone)의 대표적인 태그는
<span></span>이 있음.
본질적으로 아무 것도 나타내지 않는, 콘텐츠 영역을 설정하는 용도임.
인라인 요소는 보통 수평으로 쌓인다. 줄어들려는 성질을 가짐.
<span>hi<span>
<span>bob<span>
출력 화면은
hi bob
으로 띄어쓰기가 된 상태로 나옴.
단을 내리는 것 자체가 띄어쓰기로 확인되기 때문이며,
단을 안내리면 띄어쓰기가 안된다.
<span><div></div></span> - 불가
<span><span></span></span> - 가능
이유는 span은 인라인(글자) 요소인데, div는 상자(블록) 요소이기 때문이다.
2번 블록(Block)의 대표적인 태그는
<div></div> 이 있음.
본질적으로 아무 것도 나타내지 않는, 콘텐츠 영역을 설정하는 용도임.
블록 요소는 보통 수직으로 쌓인다. 가로 너비는 늘어나려하나, 세로 너비는 줄어들려함.
가로와 세로, 마진과 패딩 여백 좌우, 위아래 등 사용 가능
<div><div></div></div> - 가능
<div><span></span></div> - 가능
이유는 div는 상자(블록) 요소로서 제약 사항이 적다.
'개념 창고 > HTML & CSS' 카테고리의 다른 글
HTML 자주 사용하는 태그2 (0) | 2022.05.18 |
---|---|
HTML 자주 사용하는 태그 요소 (0) | 2022.05.18 |
HTML 빈태그 (0) | 2022.05.18 |
HTML 부모와 자식 요소 (0) | 2022.05.18 |
HTML 기본 문법 (0) | 2022.05.18 |