공간 분할 태그
- 태그 자체의 특별한 의미나 기능은 없다.
- 단지 페이지 공간 불한의 단위로 사용.
- 같은 공간에 위치할 엘리먼트들을 담는 컨테이너의 역할
- 대표적인 것:
<div>와 <span> <div>와 <span>태그로 그룹화된 공간을 하나의 단위로 하여 스타일을
적용하면 웹문서 전체의 레이아웃을 쉽게 구성할 수 있음.<div>- 공간 분할을 위해 가장 많이 사용되는 태그.
- 태그들을 묶어 그룹화하는 컨테이너
- 전체 문서를 구조화함
- 스타일시트와 결합하면 그룹에 속한 태그들을 한번에 모두 같은 스타일로 적용가능.
- 블록 형식
<span>- 내용 일부를 다른 엘리먼트들과 분리하고자 할 때 사용.
- 내용을 각조하거나 각기 다른 스타일을 적용 가능
공간 분할 형식
블록형식
| 형식 | 태그 | 기능 |
|---|---|---|
| 블록 형식 | div tag | 블록 형식으로 공간을 분할하는 영역을 정의 |
| 영역 공간이 매번 줄바꿈이 되어 새로운 행에 생성되는 방식 | ||
| 하위에 다른 블록 형식 태그나 인라인 형식 태그 포함가능 | ||
| 일반태그 | tag : div, h1~h6, p, table, ul, ol, li, form | |
| 인라인 형식 | span tag | 인라인 형식으로 공간을 분할하는 영역을 정의 |
| 영역공간이 입력 내용의 길이만큼만 차지하면서 줄바꿈없이 같은 줄에 계속 추가되는 방식 | ||
| 반드시 블록 형식 태그의 하위에 포함, 하위에 블록 형식 태그 포함 불가 | ||
| 일반태그 | tag : span, img, a, input, i, b, strong, small, sub, sup, ins, del (단, HTML5안에서는 a태그 내부에 h1~h6, p, ul, ol 등의 블록 형식 태그를 포함할 수 있음.) |
- 보통 블록 형식 태그들을 하나로 묶어 감쌀 때는
<div> - 내부에 인라인 형식 태그들을 감쌀 때는
<span>
TIP
블록 형식 태그는 자유롭게 스타일 정의할 수 있지만 인라인 형식 태그는 표현에 제한이 있다. 인라인 형식 태그는 태그 안의 내용을 기준으로 너비와 높이가 결정된다. 따라서 별도로 크기를 조절할 수 없으며 오직 좌/우 바깥 여백만 설정 가능.
오늘의 후기
마크업이라 표 형식으로 보여주면 괜찮겠구나 해서 table 태그 해봤는데 미리보기 보면서 colspan rowspan 속성에 tr, td 태그 갯수 맞추고 인라인 css도 적용하며 했는데...
그냥 td개수만 맞추면 알아서 이 블로그의 테이블 템플릿으로 나온다... 아 나의.. 녹은 시간들이여.. 그럴 거면 미리보기에서 적용되지 말지.. 지식 1 늘었다...
'하루를 참고 인내하면 열흘을 벌 수 있고 사흘을 참고 견디면 30일을, 30일을 견디면 3년을 벌 수 있다.'