2023.07.20 모각코 3회차 결과
-목록태그
<ol>태그 - 순서가 있는 목록을 표현할 때 사용한다.
<ul>태그 - 순서가 없는 목록을 표현할 때 사용한다.
<li>태그 - 목록 하위 태그이며, <ul>태그 또는 <ol>태그의 하위에 위치한다.
<dl>태그 - 정의 목록의 약자로, 사전처럼 용어를 설명하는 목록을 만듭니다.
<dt>태그 - 정의 용어의 약자로, 정의되는 용어의 제목을 넣을 때 사용합니다.
<dd>태그 - 정의 설명의 약자로, 용어를 설명하는데 사용합니다.
주의사항으로는 dl태그는 하나이상의 dt,dd쌍의 태그를 갖고 있어야한다, 단 반드시 dt,dd가 하나의 짝으로 지어져야 하는 것은 아니다.
li,dt-dd태그는 밖에서 독립적으로 사용할 수 없다.(li태그는 ul,ol 태그, dt-dd태그는 dl태그 하위에 있어야함)
ul태그 하위요소로는 li태그가 위치해야한다.
실제로 vscode에서 ol태그를 이용 시 웹페이지에 목록이 1,2,3 순으로 표현되지만 순서가 상관없는 ul태그를 이용시 아이템들이 - 기호로 구분된다.
table(표) 태그
1.기본 태그
<table>태그 - 표를 만드는 태그로써, 표 전체를 감싸는데 사용한다.
<caption>태그 - 표의 제목이나 설명을 작성하는는 태그
<tr>태그 - 행을 의미하는 태그로, 자식태그로 <th>태그나 <td>태그가 반드시 있어야한다.
<th>태그 - 제목 열을 의미하는 태그로, 부모인 <tr>태그 안에 있어야한다.
<td>태그 - 일반 열을 의미하는 태그로, 부모인 <tr>태그 안에 있어야한다.
위 코드에서는 table태그로 표를 감싸고, 내부에는 caption을 이용해 프로필 테이블이라는 표의 제목을 작성하였따.
또한 tr태그 내부에 th태그로는 이름,취미,특기 라는 제목 열을,
td태그로는 th태그 항목에 맞는 내용을 작성하였다.
th태그와 td태그는 조건에 맞게 tr태그 내부에 존재하는 것을 확인할 수 있다.
2.table 그룹 관련 태그
<tfoot>태그 - 표의 하단 영역을 묶는 그룹태그
<tbody>태그- 표의 일반적인 영역을 묶는 태그
<thead>태그 - 표의 제목열을 묶는 태그
<colgroup> 태그- 열을 그룹으로 묶을 수 있도록 해주는 태그
위 표는, tfoot,thead,tbody를 통하여 표의 제목,내용,하단을 구분하였다.
colgroup 태그를 활용하여, 1열의 넓이도 조정해보고, 2열의 색깔도 바꿔보았다.
3.table태그 관련 속성
colspan - 열을 병합하는 속성 ex) <th colspan="2">
rowspan - 행을 병합하는 속성 ex) <th rowspan="2">
본래는 4개의 행과 5개의 열로 이루어진 표였지만, rowspan과 colsapn을 이용하여 열과 행을 적절하게 병합해보았다.