제목 : HTML 문서 태그 공부하기 - 4편
3편 주소
https://codecreature.tistory.com/219
이 글을 작성하는 이유 :
웹 페이지 개발에 있어 포텐셜을 높이기 위해, 웹 제작에 사용되는 태그들을 "모두" 익히고자
시작한 프로젝트이다. 카테고리별로 나누어진 태그들을 "모두" 배우고 이를 실현 해 보며,
나중에 어떻게 사용할지도 생각하며 작성하고 있다.
솔직히 말해서
이렇게까지 오래 걸릴 줄은 몰랐다.. 한 길어야 3 편 정도를 작성하겠지? 했는데
아마 현재 작성하고 있는 4 편까지 포함해서, 5 편까지 나올 것 같다..
현재까지 작성 완료한 카테고리 목록은
- Basic HTML - 기본적인 HTML 태그들
- Formatting - 형식 조작 태그들
- Forms and Input - 폼과 입력 태그들
- Frames - 프레임
- Images - 이미지 관련 태그
- Audio / Video - 오디오와 비디오 관련 태그
- Links - 문서 링크 관련 태그
그리고, 아직 남은 카테고리 목록은
- Lists - 배열 태그
- Tables - 테이블 형식 태그
- Styles and Semantics - 스타일 태그와 시멘틱 태그들
- Meta Info - 문서의 메타데이터 선언 관련 태그들
- Programming - 문서 프로그래밍 관련 태그들
지금까지 "모든" HTML 태그들에 대해서 다룬 기억을 더듬어 보자면,
내가 지금 짐작하는 세밀함보다 조금만 더 디테일하게 작성한다면, 6 편 까지 나올 것 같다.
따라서, JS 라이브러리나 JS 코드에 의해 쉽게 대체 될 수 있는 속성이나 기능 설명들은
조금씩 생략을 하면서 구현 할 생각이다.
예를 들어서, 현재 작성중인 글은 블로그 내부의 아티클로 들어가는데,
동일한 문서에 <head> 를 다시 넣을 수는 없다.
이러한 경우, 간단한 예제를 제시하고, "실제 구현 결과" 는 생략 할 것이다.
Category - Lists (배열)
menu
비-정렬 배열 대체 태그를 정의한다.
보통, 우리는 HTML 태그에서 크게 2 가지 종류의 리스트(배열) 을 사용한다.
첫 번째는 "정렬 배열" 이며, 두 번째는 "비-정렬 배열" 이다.
여기서 "비-정렬 대체 태그" 라는 것은, <ul>(UnOrdered List) 와 동일한 역할을 하지만,
역할을 구분해야 할 때, 사용할 수 있는 태그라는 것이다. (동일한 CSS 스타일을 지니기에.)
예시 :
<menu>
<li>Markdown - 마크다운</li>
<li>Latex - 라텍스</li>
<li>HTML</li>
</menu실제 표현 결과 :
<menu> 기본 CSS 설정 :
menu {
display : block;
list-style-type: disc;
margin-block-start : 1em;
margin-block-end : 1em;
margin-inline-start : 0px;
margin-inline-end : 0px;
padding-inline-start : 40px;
}여기서 <menu> 의 태그는 블록 형식으로 렌더링 된다.
이 때, 내부에 들어가는 <li> 의 스타일을 정할 수 있다.
margin-block-start: 위 엘리먼트와의 마진 설정margin-block-end: 아래 엘리먼트와의 마진 설정margin-inline-start: 내부 리스트가 왼쪽에서 몇 픽셀 떨어져 있는지.margin-inline-end: 내부 리스트가 오른쪽에서 몇 픽셀 떨어져야 하는지.padding-inline-start: 리스트 엘리먼트 전부가 왼쪽에서 몇 픽셀 떨어진 위치에서 시작하는지.
즉, margin-inline-start 의 렌더링 결과는,
padding-inline-start + margin-inline-start 인 것이다.
ul
비-정렬 배열을 정의한다.
순서가 정해져 있는 리스트가 아니라, 순서가 중요하지 않은 요소들을 나열하기 위해 정의하는 태그이다.
예시 :
<p>기본적인 UnOrdered 배열</p>
<ul>
<li>요소 1</li>
<li>요소 2</li>
<li>요소 3</li>
</ul>
<p>비정렬 스타일링 요소가 원형인 경우</p>
<ul style="list-style-type:circle">
<li>요소 1</li>
<li>요소 2</li>
<li>요소 3</li>
</ul>
<p>비정렬 스타일링 요소가 원형이며, 색상이 차 있는 형태</p>
<ul style="list-style-type:disc">
<li>요소 1</li>
<li>요소 2</li>
<li>요소 3</li>
</ul>
<p>비정렬 스타일링 요소가 정사각형인 경우</p>
<ul style="list-style-type:square">
<li>요소 1</li>
<li>요소 2</li>
<li>요소 3</li>
</ul>
<ul>
<li>요소1</li>
<ul>
<li>내부 요소1</li>
<li>내부 요소2</li>
</ul>
<li>요소2</li>
</ul>
<p>기본 스타일인 상태에서, 비-정렬 리스트 내부에 다시 비-정렬 리스트가 들어갈 경우</p>
<ul>
<li>요소1</li>
<ul>
<li>내부 요소1</li>
<li>내부 요소2</li>
</ul>
<li>요소2</li>
</ul>실제 표현 결과 :
기본적인 UnOrdered 배열
- 요소 1
- 요소 2
- 요소 3
비정렬 스타일링 요소가 원형인 경우
- 요소 1
- 요소 2
- 요소 3
비정렬 스타일링 요소가 원형이며, 색상이 차 있는 형태
- 요소 1
- 요소 2
- 요소 3
비정렬 스타일링 요소가 정사각형인 경우
- 요소 1
- 요소 2
- 요소 3
기본 스타일인 상태에서, 비-정렬 리스트 내부에 다시 비-정렬 리스트가 들어갈 경우
- 요소1
- 내부 요소1
- 내부 요소2
- 요소2
<ul> 기본 CSS 설정 :
ul {
display : block;
list-style-type : disc;
margin-top : 1em;
margin-bottom : 1em;
margin-left : 0;
margin-right : 0;
padding-left : 40px
}<ul> 태그의 대체제로서 <menu> 를 사용할 수 있다고 해서 동일한 디폴트 스타일을 가질 줄 알았는데,
생각 외로 내부 설명자가 달라서 당황했다.
사실, 기존에 사용하던 스타일링 속성에 익숙해서 더 좋긴 하다.
결국, 이러한 속성들의 의미를 생각 해 보면, ul, menu 둘 다 의미는 동일하긴 하다.
ol
정렬된 배열을 정의한다.
기본 스타일은 숫자 증강 형태로 나타난다.
그렇다면, ul, ol 의 차이는 무엇일까?
ul 은 위에서 보다시피, 네모, 원형 등등 동일한 형태의 이미지 혹은 컨텐츠를 지닌다.
그러나, ol 은 내부의 li 만큼 증강시킨 식별자를 부여해야 한다.
숫자, 알파벳, 로마숫자 등등이 있다.
예시 :
<p>기본 스타일</p>
<ol>
<li>요소1</li>
<li>요소2</li>
<li>요소3</li>
</ol>
<p>시작 숫자를 15 로 지정</p>
<ol start="15">
<li>요소1</li>
<li>요소2</li>
<li>요소3</li>
</ol>
<p>시작 숫자는 25 지만, 거꾸로 진행</p>
<ol start="25" reversed>
<li>요소1</li>
<li>요소2</li>
<li>요소3</li>
</ol>
<p>type 요소로 직접 '1' 숫자 을 선언</p>
<ol type="1">
<li>요소1</li>
<li>요소2</li>
<li>요소3</li>
</ol>
<p>타입 요소로 직접 'A' 대문자 선언</p>
<ol type="A">
<li>요소1</li>
<li>요소2</li>
<li>요소3</li>
</ol>
<p>타입 요소로 'a' 소문자 선언</p>
<ol type="a">
<li>요소1</li>
<li>요소2</li>
<li>요소3</li>
</ol>
<p>로마 표기법 대문자 선언</p>
<ol type="I">
<li>요소1</li>
<li>요소2</li>
<li>요소3</li>
</ol>
<p>로마 표기법 소문자 선언</p>
<ol type="i">
<li>요소1</li>
<li>요소2</li>
<li>요소3</li>
</ol>
<p>스타일로 직접 "로마 대문자" 지정</p>
<ol style="list-style-type:upper-roman">
<li>요소1</li>
<li>요소2</li>
<li>요소3</li>
</ol>
<p>스타일로 직접 "알파벳 소문자" 지정</p>
<ol style="list-style-type:lower-alpha">
<li>요소1</li>
<li>요소2</li>
<li>요소3</li>
</ol>
실제 표현 결과 :
기본 스타일
- 요소1
- 요소2
- 요소3
시작 숫자를 15 로 지정
- 요소1
- 요소2
- 요소3
시작 숫자는 25 지만, 거꾸로 진행
- 요소1
- 요소2
- 요소3
type 요소로 직접 '1' 숫자 을 선언
- 요소1
- 요소2
- 요소3
타입 요소로 직접 'A' 대문자 선언
- 요소1
- 요소2
- 요소3
타입 요소로 'a' 소문자 선언
- 요소1
- 요소2
- 요소3
로마 표기법 대문자 선언
- 요소1
- 요소2
- 요소3
로마 표기법 소문자 선언
- 요소1
- 요소2
- 요소3
스타일로 직접 "로마 대문자" 지정
- 요소1
- 요소2
- 요소3
스타일로 직접 "알파벳 소문자" 지정
- 요소1
- 요소2
- 요소3
<ol> 기본 CSS 설정 :
ol {
display : block;
list-style-type : decimal;
margin-top : 1em;
margin-bottom : 1em;
margin-left : 0;
margin-right : 0;
padding-left : 40px;
}li
배열 내부에 들어갈 아이템을 정의한다.
<menu>, <ul>, <ol> 모두, 이 태그가 없다면 아이템을 표현 할 수 없다.
예시 :
<ol>
<li style="list-style-type:lower-alpha">요소1</li>
<li>요소1</li>
<li>요소1</li>
</ol>
<ul>
<li style="list-style-type:square">요소1</li>
<li>요소1</li>
<li>요소1</li>
</ul>실제 표현 결과 :
- 요소1
- 요소1
- 요소1
- 요소1
- 요소1
- 요소1
<li> 기본 CSS 설정 :
li {
display : list-item;
}dl
설명 배열(목록) 을 정의한다.
위에서 정의한 <ul>, <ol> 과 비슷한 형태이긴 하나,
이 태그는 정보 구조화에 좀 더 초점이 맞춰져 있다.
Q&A, FAQ, 쌍을 이루는 Key, Value 에 알맞는 태그이다.
여기서 <dl> 은, Description List 의 약자로,
<dt>, <dd> 를 내부에 사용하게 된다.
예시 :
<dl>
<dt>설명할 용어</dt>
<dd>용어를 설명</dd>
<dt>Markdown이란?</dt>
<dd>HTML 용어들을 쉽게 작성하게 해 주는 일종의 문법</dd>
</dl>실제 표현 결과 :
- 설명할 용어
- 용어를 설명
- Markdown이란?
- HTML 용어들을 쉽게 작성하게 해 주는 일종의 문법
<dl> 기본 CSS 설정 :
dl {
display : block;
margin-top : 1em;
margin-bottom : 1em;
margin-left : 0;
margin-right : 0;
}dt
설명 할 목록에서 용어, 혹은 이름을 정의한다.
위에서 보았듯이, <dl> 은 내부 설명 리스트를 정의하는 일종의 구역이라고 볼 수 있고,
<dt> 는, 어떤 용어를 설명하거나, 어떤 문장 혹은 이름을 정의한다.
<dt> 는, Description Term 의 약자로, Description Name 으로 불리기도 한다.
예시 :
<dl>
<dt>설명 용어, 혹은 설명할 이름</dt>
<dd>용어, 혹은 이름을 설명</dd>
<dt>dt 란?</dt>
<dd>Discription Term 의 약자이다.</dd>
</dl>실제 표현 결과 :
- 설명 용어, 혹은 설명할 이름
- 용어, 혹은 이름을 설명
- dt 란?
- Discription Term 의 약자이다.
<dt> 기본 CSS 설정 :
dt {
display : block;
}dd
설명 목록에 있는 용어/이름에 대한 설명
위의 설명을 보면 추리 할 수 있듯이,
Description list of Discription 이 아닐까 생각된다.
즉, 이 과정에서 dd 가 되지 않았을까? 조심껏 추리해 본다.
예시 :
<dl>
<dt>
정말로 모든 HTML 태그를 다룹니까?
</dt>
<dd>
예 죽을 맛입니다..
</dd>
</dl>실제 표현 결과 :
- 정말로 모든 HTML 태그를 다룹니까?
- 예 죽을 맛입니다..
<dd> 기본 CSS 설정 :
dd {
display : block;
margin-left : 40px;
}category - Tables (테이블)
table
테이블을 정의한다.
드디어 HTML 태그에서 굉장히 중요하다고 할 수 있는 table 에 대해 다루게 되었다.
table 의 형식은 일종의 Excel 형식 처럼 보인다.
이에 대한 길이와 지정 속성, 지정 값을 이용하여 동적인 테이블을 구현 할 수 있다.
<table> 태그는 여러가지 태그를 내부에서 사용할 수 있는데,
아주 기본적인 요소 :
<tr>: 테이블 내부의 row(줄)<th>: 테이블의 줄 내부의 Head 요소 (맨 위 속성으로 자주 사용)<td>: 테이블 줄 내부의 하나의 요소
그 외 집합 요소와 텍스팅 요소 :
<thead>: 테이블의 헤더 부분을 그룹핑<tbody>: 테이블의 몸체 부분을 그룹핑<tfoot>: 테이블의 footer(밑 부분) 을 그룹핑<caption>: 테이블의 캡션 (제목) 을 정의 - 텍스트 표시됨<colgroup>: 내부<col>을 그룹핑 - 컬럼 별 스타일링 가능
예시 :
<p>아주 간단한 Table 예시</p>
<table>
<tr>
<th>X</th>
<th>+</th>
<th>Y</th>
<th>X + Y</th>
</tr>
<tr>
<td>1</td>
<td>+</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>10</td>
<td>+</td>
<td>12</td>
<td>22</td>
</tr>
<tr>
<td>첫 번째 수</td>
<td>기호</td>
<td>두 번째 수</td>
<td>결과</td>
</tr>
</table>
<p>그룹핑 태그를 통해 각 태그를 구별</p>
<table>
<thead>
<th>X</th>
<th>+</th>
<th>Y</th>
<th>X + Y</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>+</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>10</td>
<td>+</td>
<td>12</td>
<td>22</td>
</tr>
</tbody>
<tfoot>
<td>첫 번째 수</td>
<td>기호</td>
<td>두 번째 수</td>
<td>결과</td>
</tfoot>
</table>실제 표현 결과 :
아주 간단한 Table 예시
| X | + | Y | X + Y |
|---|---|---|---|
| 1 | + | 2 | 3 |
| 10 | + | 12 | 22 |
| 첫 번째 수 | 기호 | 두 번째 수 | 결과 |
그룹핑 태그를 통해 각 태그를 구별
| X | + | Y | X + Y |
|---|---|---|---|
| 1 | + | 2 | 3 |
| 10 | + | 12 | 22 | 첫 번째 수 | 기호 | 두 번째 수 | 결과 |
헤더 단일 요소에 `colspan` 속성으로 칸을 차지하기
| X | + | Y | X + Y |
|---|---|---|---|
| 1 | + | 2 | 3 |
| 10 | + | 12 | 22 | x 와 y 의 함수 | 결과 |
<table> 기본 CSS 설정 :
table {
display : table;
border-collapse : separate;
border-spacing: 2px;
border-color : gray;
}우리가 보통 보던 테이블의 경계선은 예제를 보다시피, 하나의 줄로 만들어져 있다.
내가 블로그 CSS 를 어느정도 Custom 화 시켰기에 기본적으로 "collapse" 로 합쳐져 있는데,
만약, style 속성에 border-collapse : separate(분리) 를 선언하면,
각각의 요소들이 조금씩 떨어져 있는 것을 확인 할 수 있다.
또한, 요소들의 간격은 border-spacing 으로 정할 수 있다.
caption
테이블의 캡션(제목) 을 정의한다.
이 제목(캡션) 은 왼, 우, 아래, 위에 배치시킬 수 있다.
<caption> 태그는 테이블 태그 내부의 가장 하단에 배치하더라도,
맨 위에 뜬다. 따라서, 우리는 캡션이 원하는 위치에 뜨도록 만들고 싶다면,
style 을 통해서 이를 해결 해 주어야 한다.
예시 :
<table>
<caption>Caption Test</caption>
<thead>
<th>th1</th>
<th>th2</th>
<th>th3</th>
</thead>
<tbody>
<tr>
<td>td1</td>
<td>td2</td>
<td>td3</td>
</tr>
<tr>
<td>td1</td>
<td>td2</td>
<td>td3</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>td1</td>
<td>td2</td>
<td>td3</td>
</tr>
</tfoot>
</table>
<table>
<caption style="text-align:left">Caption Test</caption>
<thead>
<th>th1</th>
<th>th2</th>
<th>th3</th>
</thead>
<tbody>
<tr>
<td>td1</td>
<td>td2</td>
<td>td3</td>
</tr>
<tr>
<td>td1</td>
<td>td2</td>
<td>td3</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>td1</td>
<td>td2</td>
<td>td3</td>
</tr>
</tfoot>
</table>
<table>
<caption style="caption-side:bottom; text-align:right">Caption Test</caption>
<thead>
<th>th1</th>
<th>th2</th>
<th>th3</th>
</thead>
<tbody>
<tr>
<td>td1</td>
<td>td2</td>
<td>td3</td>
</tr>
<tr>
<td>td1</td>
<td>td2</td>
<td>td3</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>td1</td>
<td>td2</td>
<td>td3</td>
</tr>
</tfoot>
</table>실제 표현 결과 :
| th1 | th2 | th3 |
|---|---|---|
| td1 | td2 | td3 |
| td1 | td2 | td3 |
| td1 | td2 | td3 |
| th1 | th2 | th3 |
|---|---|---|
| td1 | td2 | td3 |
| td1 | td2 | td3 |
| td1 | td2 | td3 |
| th1 | th2 | th3 |
|---|---|---|
| td1 | td2 | td3 |
| td1 | td2 | td3 |
| td1 | td2 | td3 |
caption 의 줄에서, 왼쪽 오른쪽 부착 형태를 정의하고 싶다면, text-align
caption 이 form 에서 위, 혹은 아래를 정하고 싶다면, caption-side:bottom 을 사용한다.
<caption> 기본 CSS 설정 :
caption {
display : table-caption;
text-align : center;
}th
테이블 내부의 헤더 Cell 을 정의한다.
<thead> 는 그룹핑을 수행하기도 하지만,
<tr> 의 역할을 수행하기도 한다.
<th> 는 헤더 cell 로서, <thead> 에 들어가기도 하지만,
단순히 <tr> 내부에도 선언 될 수 있다.
예시 :
<p>단순 <code>tr</code> 태그로 <code>th</code>태그를 넣을 경우
<table>
<tr>
<th>사원번호</th>
<th>이름</th>
<th>부서이름</th>
</tr>
<tr>
<td>14359272</td>
<td>공담형</td>
<td>AllOps</td>
</tr>
</table>
<p><code>thead</code> 를 통한 태그로 헤더 선언, 그룹핑 태그로 묶기</p>
<table>
<caption>사원 정보</caption>
<thead>
<th>사원번호</th>
<th>이름</th>
<th>부서이름</th>
</thead>
<tbody>
<tr>
<td>14359272</td>
<td>공담형</td>
<td>AllOps</td>
</tr>
</tbody>
</table>실제 표현 결과 :
단순 tr 태그로 th태그를 넣을 경우
| 사원번호 | 이름 | 부서이름 |
|---|---|---|
| 14359272 | 공담형 | AllOps |
thead 를 통한 태그로 헤더 선언, 그룹핑 태그로 묶기
| 사원번호 | 이름 | 부서이름 |
|---|---|---|
| 14359272 | 공담형 | AllOps |
<th> 태그 특수 속성들 :
abbr- Text : 헤더 셀에 있는 컨텐츠를 설명하는 약어.(마우스를 올리면 1초 있다가 설명탭이 뜸)colspan- Number : 현재 선언할 헤더 셀을 얼마나 크게 합칠 것인지.headers- ID : 헤더 셀과 연관된 또 다른 셀을 지정한다.rowspan- Number : 헤더 셀이 얼만큼의 줄을 확장해야 하는지scope: 자신이 속한 그룹 혹은 셀이 무엇인지 지정한다.colcolgrouprowrowgroup
<th> 기본 CSS 설정 :
th {
display : table-cell;
vertical-align : inherit;
font-weight : bold;
tet-align: center;
}tr
테이블의 한 줄(row) 를 정의한다.
테이블에서 하나의 줄(row) 를 정의할 때, 가장 대표적으로 사용되는 태그이다.
예를 들어, 맨 위의 헤더 정보는 하위에 존재하는 줄들의 정보를 설명하는 중요한 Cell 들이다.
따라서, 줄 하나를 스타일링하여 강조할 수 있다.
예시 :
<table>
<tr style="background-color : #234">
<th>header1</th>
<th>header2</th>
<th>header3</th>
</tr>
<tbody>
<tr>
<td>요소1</td>
<td>요소2</td>
<td>요소3</td>
</tr>
</tbody>
</table>실제 표현 결과 :
| header1 | header2 | header3 |
|---|---|---|
| 요소1 | 요소2 | 요소3 |
| 수직 요소 | 요소2 | 요소3 |
| 요소2 | 요소3 | |
<tr> 기본 CSS 설정 :
tr {
display : table-row;
vertical-align: inherit;
border-color: inherit;
}td
테이블의 하나의 셀(Cell) 을 정의한다.
테이블 태그 내부의 속성을 구성하는 가장 작은 단위의 태그이다.
하나의 줄(<tr>) 에, <th> or <td> 가 들어가서 구성한다는 것은 잘 알 것이다.
따라서, 이번 예제는 한번 colspan, rowspan 속성을 통해 상하좌우 통합하는 방식을 학습하자.
예시 :
<table>
<thead>
<th colspan="4"><code>colspan</code>, <code>rowspan</code> 예제</th>
</thead>
<tbody>
<tr>
<td rowspan="4">1</td>
<td colspan="3">2</td>
</tr>
<tr>
<td rowspan="3">3</td>
<td colspan="2">4</td>
</tr>
<tr>
<td rowspan="2">5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
</tr>
</tbody>
</table>실제 표현 결과 :
colspan, rowspan 예제 |
|||
|---|---|---|---|
| 1 | 2 | ||
| 3 | 4 | ||
| 5 | 6 | ||
| 7 | |||
위와 같이 colspan, rowspan 속성으로 수직, 수평 병합을 실시하여 자유롭게 셀을 통합할 수 있다.
그러나, 꼭 유의해야 할 점이, rowspan 은 줄을 몇 개를 사용하느냐를 정의하는 만큼,
그 다음 <tr> 태그에서 작성해야 할 <td> 요소가 하나씩 줄어든다는 것을 명심하자.
<td> 기본 CSS 설정 :
td {
display : table-cell;
vertical-align : inherit;
}thead
테이블의 헤더 컨텐츠를 정의한다.
물론 위에서 <thead>, <tbody>, <tfoot> 에 대한 태그를 간단히 다루었다.
이는 줄들을 카테고리화 (그룹핑) 하는 태그인데,
이러한 태그가 쓸모없어 보이더라도, 내부 스타일링에 있어 중요한 역할을 하며,
추후 개발 시 테이블 내에서 특정 영역이 어떤 부분에 속하는지 쉽게 알 수 있다.
예시 :
<table>
<!-- 테이블의 헤더 부분을 정의 -->
<thead style="background-color : #567">
<tr>
<th>헤더 1</th>
<th>헤더 2</th>
<th>헤더 3</th>
</tr>
</thead>
<!-- 테이블의 몸통 부분을 정의 -->
<tbody style="background-color : #765">
<tr>
<td>몸체 1</td>
<td>몸체 2</td>
<td>몸체 3</td>
</tr>
<tr>
<td>몸체 4</td>
<td>몸체 5</td>
<td>몸체 6</td>
</tr>
</tbody>
<!-- 테이블의 마무리 or 마지막 부분을 정의 -->
<tfoot style="background-color : #666">
<tr>
<td>마무리 1</td>
<td>마무리 2</td>
<td>마무리 3</td>
</tr>
</tfoot>
</table>실제 표현 결과 :
| 헤더 1 | 헤더 2 | 헤더 3 |
|---|---|---|
| 몸체 1 | 몸체 2 | 몸체 3 |
| 몸체 4 | 몸체 5 | 몸체 6 |
| 마무리 1 | 마무리 2 | 마무리 3 |
<thead> 기본 CSS 설정 :
thead {
display : table-header-group;
vertical-align : middle;
border-color : inherit;
}tbody
테이블의 몸체 부분을 정의한다.
<thead> 와 비슷하게,
테이블 내부에 들어가는 <tr> (table row) 들의 그룹을 정의한다.
예시 :
<table>
<caption>xxx 부대 의료진단자</caption>
<thead>
<tr>
<th>1월</th>
<th>2월</th>
<th>3월</th>
</tr>
</thead>
<tbody>
<tr>
<td>1,027 명</td>
<td>892 명</td>
<td>569 명</td>
</tr>
</tbody>
</table>실제 표현 결과 :
| 1월 | 2월 | 3월 |
|---|---|---|
| 1,027 명 | 892 명 | 569 명 |
<tbody> 기본 CSS 설정 :
tbody {
display : table-row-group;
vertical-align : middle;
border-color : inherit;
}tfoot
테이블의 마지막(밑부분) 컨텐츠를 그룹화한다.
엑셀 프로그램을 예시로 들어보면,
여러 내부 컨텐츠에 대한 요약화 (평균) 을 정의하거나,
총 비용, 총 인원을 계산하여 보여주는 역할로 종종 사용된다.
예시 :
<table>
<caption>xx 학원 언어별 사용자 현황</caption>
<thead>
<tr>
<th>C++</th>
<th>Java</th>
<th>JavaScript</th>
<th>Python</th>
<th>그 외의 언어</th>
</tr>
</thead>
<tbody>
<tr id="tfoot-datas">
<td>10</td>
<td>31</td>
<td>25</td>
<td>22</td>
<td>5</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>총 인원 :</td>
<td colspan="4" id="tfoot-result"></td>
</tr>
</tfoot>
</table>
<script>
const dataRowDOM = document.getElementById("tfoot-datas");
const resultDOM = document.getElementById("tfoot-result");
const datas = dataRowDOM.children;
let result = 0;
for(let i = 0; i < datas.length; i++) {
const num = parseInt(datas[i].innerText);
result += num;
}
resultDOM.innerText = result;
</script>
<table>
<caption>학원 별 언어 사용자 현황</caption>
<thead>
<tr>
<th>학원 이름</th>
<th>C++</th>
<th>Java</th>
<th>JavaScript</th>
<th>Python</th>
<th>그 외의 언어</th>
</tr>
</thead>
<tbody id="tfoot-tbody">
<tr>
<td>xx 학원</td>
<td>10</td>
<td>31</td>
<td>25</td>
<td>22</td>
<td>5</td>
</tr>
<tr>
<td>yy 학원</td>
<td>20</td>
<td>15</td>
<td>41</td>
<td>32</td>
<td>9</td>
</tr>
</tbody>
<tfoot style="background-color : #765">
<tr id="tfoot-results">
</tr>
</tfoot>
</table>
<script>
const bodyDOM = document.getElementById("tfoot-tbody");
const tfootResultDOM = document.getElementById("tfoot-results");
const rowDOMs = bodyDOM.children;
const colRength = rowDOMs[0].children.length;
let calculatedHTML = "";
// 0 번째는 "xx 학원" 또는 "yy 학원" 이다.
for(let i = 1; i < colRength; i++) {
// 하나의 언어에 대한 인원을 담을 예정
let tempNum = 0;
// 각 줄을 번갈아서 실행
for(let j = 0; j < rowDOMs.length; j++) {
// 하나의 줄을 가져옴
const row = rowDOMs[j].children;
tempNum += parseInt(row[i].innerText);
}
calculatedHTML = calculatedHTML + "<td>" + tempNum + "</td>";
}
const resultHTML = "<td>언어 사용자 총합</td>" + calculatedHTML;
tfootResultDOM.innerHTML = resultHTML;
</script>실제 표현 결과 :
| C++ | Java | JavaScript | Python | 그 외의 언어 |
|---|---|---|---|---|
| 10 | 31 | 25 | 22 | 5 |
| 총 인원 : | ||||
| 학원 이름 | C++ | Java | JavaScript | Python | 그 외의 언어 |
|---|---|---|---|---|---|
| xx 학원 | 10 | 31 | 25 | 22 | 5 |
| yy 학원 | 20 | 15 | 41 | 32 | 9 |
사실, 내가 이러한 방식으로 <script> 를 선언하여 사용하는 것은 절대로 좋은 코드가 아니다.
나는 블로그에서 제한된 JS 를 우회하기 위해, 가져와야 할 데이터 태그와, 결과 태그에 id 를 붙여
다른 방식으로 계산하고 있다.
위와 같은 방식으로 진행한다면, 나중에 table 에 <input> 태그를 넣을 때,
굉장히 곤란 해 질 수도 있다.
<tfoot> 기본 CSS 설정 :
tfoot {
display : table-footer-group;
vertical-align : middle;
border-color : inherit;
}col
<colgroup> 그룹 요소 내부에 선언되는데, 각각의 컬럼의 속성을 지정한다.
나는 처음에 이걸로 <tr> 이 아니라, <col> 로 수직 방향의 데이터를 정하는 줄 알았는데,
그것이 아니고, 각 컬럼에 속하게 되는 <td> 와 <th> 의 속성을 정하게 되는 것이었다..
예시 :
<table>
<colgroup>
<col style="color : yellow"/>
<col span="3" style="background-color : #765" />
</colgroup>
<caption>xx 학원 언어별 사용자 현황</caption>
<thead>
<tr>
<th>C++</th>
<th>Java</th>
<th>JavaScript</th>
<th>Python</th>
<th>그 외의 언어</th>
</tr>
</thead>
<tbody>
<tr>
<td>10</td>
<td>31</td>
<td>25</td>
<td>22</td>
<td>5</td>
</tr>
</tbody>
</table>실제 표현 결과 :
| C++ | Java | JavaScript | Python | 그 외의 언어 |
|---|---|---|---|---|
| 10 | 31 | 25 | 22 | 5 |
<col> 기본 CSS 설정 :
col {
display : table-colmn;
}colgroup
테이블의 형식에 대한 하나 혹은 그 이상의 컬럼들의 그룹을 지정한다.
위에서 보다시피, 우리가 각 컬럼을 어떤 스타일과 속성을 지정 할 것인지
설명하는 <col> 태그들을 그룹화 하는 태그이다.
예시 :
<table>
<colgroup>
<col style="color : yellow"/>
<col span="3" style="background-color : #765"/>
<col style="background-color : #567"
</colgroup>
<caption>xx 학원 언어별 사용자 현황</caption>
<thead>
<tr>
<th>C++</th>
<th>Java</th>
<th>JavaScript</th>
<th>Python</th>
<th>그 외의 언어</th>
</tr>
</thead>
<tbody>
<tr>
<td>10</td>
<td>31</td>
<td>25</td>
<td>22</td>
<td>5</td>
</tr>
</tbody>
</table>실제 표현 결과 :
| C++ | Java | JavaScript | Python | 그 외의 언어 |
|---|---|---|---|---|
| 10 | 31 | 25 | 22 | 5 |
<colgroup> 기본 CSS 설정 :
colgroup {
display : table-column-group;
}이번 글을 작성하며 배운 것
이번 글에는 Lists 배열 관련 태그들과,
Tables 테이블과 내부 태그에 대한 정보들을 습득했다.
습득하는 것에서 멈추지 않고, 항상 실제 예제를 사용하여 표현하고 있으며,
<script> 태그 내부에 코드를 작성하여 동적 예제 또한 첨부하고 있다.
이번 글을 압축해서 말하자면, "정보 블록 표현 형식" 을 배웠다고 말할 수 있다.
내 블로그의 글 쓰기와, 미리보기 기능으로 스크립트 기능이 동작하는지 살펴보는 과정에서,
특정 태그의 스타일링이 약간 모자르거나,
리스팅 과정에서 표현되는 Marker (앞부분) 이 이상해서 몇 가지를 커스텀 할 수 있었다.
그리고 항상 느끼는 거지만, 블로그 아티클 내부에서 금지된 중요 기능들이 존재한다. (XSS 방지)
이 때문에 우회하여 JS 스크립트를 작성하는 과정에서, 노드에 대한 속성과 정보를 알게 되었다.
참고 사이트
W3Schools HTML Element Reference
'Web-Server > 웹 지식' 카테고리의 다른 글
| HTML 문서 정식 태그 "전부" 공부하기 - 마무리 편 (코드 작성 및 구현까지) (0) | 2025.06.01 |
|---|---|
| HTML 문서 정식 태그 "전부" 공부하기 - 3편 (코드 작성 및 구현까지) (1) | 2025.05.28 |
| HTML 문서 정식 태그 "전부" 공부하기 - 2편 (코드 작성 및 구현까지) (0) | 2025.05.26 |
| HTML 문서 정식 태그 "전부" 공부하기 - 1편 (코드 작성 및 구현까지) (0) | 2025.05.24 |
| 웹 서버는 무엇이고 Local, Production 의 차이는 무엇일까? (0) | 2025.05.13 |
