목록태그
<ul> </ul>
순서가 필요하지 않은 목록 만들때 사용
리스트 앞에 특정모양이 출력( default : • )
해당 모양은 CSS를 이용하여 수정할 수 있음.
<ol> </ol>
순서가 있는 목록 만들때 사용
속성으로 문자(abc… / ABC), 숫자(123…), 로마자(ⅠⅡⅢ..ⅰⅱⅲ..) 설정
CSS로 순서를 설정 가능
(작성방법)
<ol type=“설명문자” start=“시작순서”>
<li>내용1</li>
<li>내용2</li>
<li>내용3</li>
</ol>
<dl> </dl>
용어나 문장에 대한 정의(definition) 리스트
설정 자동으로 들여쓰기가 됨
(작성방법)
<dl>
<dt>정의제목</dt>
<dd>정의내용</dd>
<dd>정의내용</dd>
</dl>
목록태그 사용 예시
<body>
<h1>목록 관련</h1>
<!-- 순서 있는 목록 -->
<!-- start속성은 타입 상관없이 숫자로 기술할 것 -->
<!-- 속성명과 속성값이 같다면, 속성값은 생략가능 -->
<ol type="a" reversed start="9">
<li>html5</li>
<li>css3</li>
<li>javascript:ecmascript6</li>
<li>jquery</li>
</ol>
<!-- 순서 없는 목록 -->
<!-- 기본값 disc | circle | square -->
<ul type="circle">
<li>html5</li>
<li>css3</li>
<li>javascript:ecmascript6</li>
<li>jquery</li>
</ul>
<!-- 중첩해서 사용이 가능함 -->
<ul>
<li>
한국어
<ul>
<li>안녕하세요</li>
<li>잘가</li>
</ul>
</li>
<li>영어</li>
<li>일본어</li>
</ul>
<!-- 정의 목록 : dl>dt+dd -->
<!-- discription list > define term + define descriotion -->
<dl>
<dt>html5</dt>
<dd>hyper text markup language</dd>
<dd>팀 버너스리 경에 의해 개발됨</dd>
<dt>javascript</dt>
<dd>웹 페이지 동적 제어를 담당하는 언어</dd>
<dd>ecma script2015, es6 버젼이 현재 표준</dd>
</dl>
</body>
표(Table) 태그
<table> </table>
웹 문서에서 자료를 정리할 때 자주 사용
행과 열로 이루어져 있고, 행과 열이 만나는 지점을 셀이라고 함
| <tr></tr> | 한 개의 행(Row)를 만드는 태그 |
| <td></td> | 한 개의 열을 만드는 태그 |
(작성방법) 기본적인 1행 2열 테이블 작성
<table>
<tr>
<td>내용2</td>
<td>내용3</td>
</tr>
</table>
테이블 태그의 추가 옵션
| <th></th> | 열에 대한 제목을 표시하는 태그 중앙정렬 및 굵게 표시 됨 |
| <caption> </caption> | 테이블의 제목이나 내용을 추가하는 태그 다른 태그를 이용하여 Text를 꾸밀 수 있음 기본 위치는 테이블 위 중앙에 배치 |
| <figure> <figcaption> </figcaption> </figure> |
<figure>태그로 감싸서 사용하며 <caption>과 비슷한 기능 작성하는 위치에 따라 위치가 변경됨 -<table>전 테이블 위 </table>후 테이블 뒤 →<img>태그 설명에 주로 사용 |
테이블 태그의 속성
<table></table>
| border | <table>태그의 속성으로 표의 테두리 두께를 지정 |
(작성방법)
<table border=“두께”></table>
<td></td>
| rowspan | <td>태그의 속성으로 지정한 행만큼 행을 병합 |
| colspan | <td>태그의 속성으로 지정한 열만큼 열 병합 |
(작성방법)
<table>
<tr>
<td colspan=“병합할 열 갯수”> </td>
</tr>
<tr>
<td rowspan=“병합할 행 갯수”> </td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
테이블 태그의 추가 옵션
| <thead> </thead> | 테이블 구조를 나누는 태그, 테이블에 한 개만 존재 가능 |
| <tbody> </tbody> | 테이블 구조를 나누는 태그, 몸체로 테이블에 여러 개 존재 가능 |
| <tfoot> </tfoot> | 테이블 구조를 나누는 태그, <thead>태그 뒤에 있어야 하며 하나만 존재 가능 |
| <col> | 열에 대한 스타일을 적용할때 사용 위치 <caption>태그 뒤 <tr><td>태그 전 span태그를 사용하여 열을 묶을 수 있음 |
| <colgroup> </colgroup> | 열을 그룹으로 묶어서 스타일 적용할때 사용 위치 <caption>태그 뒤 <tr><td>태그 전 |
표(Table) 태그 사용예시
<body>
<h1>테이블관련</h1>
<pre>table>rt>td</pre>
<ul>
<li>table 테이블 관련 최상위태그</li>
<li>tr 테이블의 행을 나타내는 태그</li>
<li>th 헤더내용을 담은 셀</li>
<li>td 헤더가 아닌 본문내용 셀</li>
</ul>
<table border=1>
<tr>
<th>브라우져</th>
<th>제조사</th>
<th>홈페이지</th>
</tr>
<tr>
<td>IE</td>
<td>MS</td>
<td>http://www.microsoft.com</td>
</tr>
<tr>
<td>Chorme</td>
<td>Google</td>
<td>https://www.google.com</td>
</tr>
<tr>
<td>Safari</td>
<td>Apple</td>
<td>https://www.apple.com</td>
</tr>
<tr>
<td>FireFox</td>
<td>Mozilla</td>
<td>https://www.mozilla.com</td>
</tr>
</table>
<h2>행과 열 합치기</h2>
<ul>
<li>colspan 컬럼 합치기</li>
<li>rowspan 행 합치기</li>
</ul>
<table border=1>
<!-- <tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr> -->
<tr>
<th colspan=4>자기소개</th>
</tr>
<tr>
<td colspan=2 rowspan="2" width="130px" height="150px">사진</td>
<td width="80px">이름</td>
<td width="200px"></td>
</tr>
<tr>
<td>연락처</td>
<td></td>
</tr>
<tr>
<td width="70px">자기소개</td>
<td colspan="3"></td>
</tr>
</table>
<h2>테이블 헤더, 몸통, 푸터 구조</h2>
<ul>
<li>thead</li>
<li>tbody</li>
<li>tfoot</li>
</ul>
<!-- table[border=1] -->
<!-- 웹페이지 내용을 인쇄한다던가 할때 좋음 thead, tbody, tfoot -->
<table border="1">
<thead>
<tr>
<th>이름</th>
<th>나이</th>
<th>주소</th>
</tr>
</thead>
<tbody>
<tr>
<td>홍길동</td>
<td>30</td>
<td>서울시 도봉구</td>
</tr>
<tr>
<td>이순신</td>
<td>48</td>
<td>전남 여수</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">총인원</td>
<td>2명</td>
</tr>
</tfoot>
</table>
</body>'프로그래밍 > HTML' 카테고리의 다른 글
| 09.11(form) (0) | 2020.06.11 |
|---|---|
| 09.10(link, 미디어 관련 태그) (0) | 2020.06.10 |
| 06.09(div와 span, iframe) (0) | 2020.06.09 |
| 06.08(table) (0) | 2020.06.08 |
| 06.04(HTML의 기본 구조와 Text 관련 태그) (0) | 2020.06.04 |