티스토리 뷰
목록과 표
1️⃣ 목록
ul (unordered list / 비정렬 목록)
불렛 포인트로 구분하는 목록이다.
단순 나열하거나, 메뉴 요소에 적절하다.
특정 속성은 없다.
ul 태그는 중첩이 가능한데, 불렛 포인트의 모양이 달라진다.
이 불렛 포인트는 css로 변경 가능하다.
ol (ordered list / 정렬 목록)
1. 2. 3. 으로 표현되며, 레시피 순서 등에 적합하다.
li (list item)
단일 아이템이며, ol과 ul은 이 li를 묶어준다!ol안의 li는 type 속성의 기본 값이 숫자이다.
➕ ol안에 포함된 li의 속성
- type
A를 입력하면 대문자 순서,
a를 입력하면 소문자 순서,
i, I를 입력하면 로마자로 나타낸다.
- start
시작점을 변경할 수 있다.
start를 사용하지 않고 시작점을 변경하고 싶다면?value 속성값을 설정해주면 된다.
하지만 start 속성을 사용하는 것을 권장하고 있다.
- reversed
목록의 순서를 역전시켜준다.
❗ 실습해보자 ❗
ul 또는 ol 태그 안에 속한 li의 화면상 표현 차이를 알아보자.
<body>
<h1>이 중 붉은 계열 과일이 아닌 것은?</h1>
<div class="ul">
<!-- 순서가 없는 목록 -->
<ul style="list-style-type: square;">
<!-- 사각형 모양으로 나타냄 -->
<li>사과</li>
<li>바나나</li>
<li>토마토</li>
<li>자두</li>
</ul>
</div>
<p style="font-weight: bolder;">정답</p>
<div class="ol">
<!-- 순서가 있는 목록 -->
<ol type="A">
<!-- 대문자 순서로 나타냄 -->
<li>사과</li>
<li>바나나</li>
<li>토마토</li>
<li>자두</li>
</ol>
</div>
</body>
ul, ol, li에 대하여 실습해 보았다.
ul은 list-style-type으로 사각형 점 모양을,
ol은 type을 A로 지정하여 대문자 순서로 나타내도록 하였다.
2️⃣ 정의 목록
dl (definition list)
특징 : 용어를 정의하거나 설명하는 목록.
용어사전을 구현하거나 키-값 목록을 표시한다.
자식 태그들
1. dt
2. dd
dt의 용어를 dd가 설명한다고 이해하면 된다. ✔
하나의 용어에 정의가 다수라면 여러 개의 dt와 하나의 dd,
그 반대라면 하나의 dt와 여러 개의 dd를 쓰면 된다.
dt:after { content: ": "; }를 쓰면, dt와 dd의 구분 경계를 :로 할 수 있다!
3️⃣ 표
🔷 table
레이아웃 용도로 쓰기 보다는,
복잡한 데이터를 보기 좋게 만드는 것에 주력해야 한다.
🔵 tr (table row)
표의 행을 뜻한다!
하나의 tr에 th나 td들의 개수로
한 행당 열의 개수를 지정한다.
🔵 th (table header)
조금 더 굵은 글씨로 표현된다.
행/열을 통칭하는 이름들을 나타내준다.
scope라는 속성을 가질 수 있는데,
웹 접근성을 위해 이 th가 무엇을 대표하는지 명시하는 것이다.
🔵 td (table data)
단순 데이터 셀을 뜻한다.rowspan/colspan을 사용하면 셀 병합과 같은 기능을 쓸 수 있다.
웹페이지에서 header, main, footer를
나누어서 구획을 나눌 수 있듯이,table에서도 구획을 나누는 것이 가능하다.
다음 내용들을 보자.
🔴 thead, tbody, tfoot
최종 결과는 달라지지 않지만,
일관성 있는 스타일링등을 하기 용이해진다.tbody 태그는 여러 개가 가능하므로,
종류나 주제에 따른 스타일링을 할 수도 있다.
🔴 caption
말 그대로 캡션!
표에 대한 부가 설명을 해준다.
caption 태그는 table 태그의 첫 번째 자식으로만 가능하다.
caption의 위치를 변경하고 싶다면
html 파일을 변경하면 안되고, css로 지정해야 한다.
<figure>
<figcaption>
</figure>바깥에 <figure> 요소로 감싸져 있다면,
위처럼 caption 대신 figcaption을 사용하면 된다.
❗ 실습해보자 ❗
학생들의 성적과 평균 평점을 나타내는 table을 만들어보자.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>실습</title>
<style>
* {
text-align: center;
padding: 10px;
}
table {
border-collapse: collapse;
}
th,
tfoot td {
border: 2px solid grey;
}
td {
border: 1px dotted green;
}
caption {
margin-bottom: 30px;
font-weight: 700;
}
</style>
</head>
<body>
<table>
<caption>
학생들의 성적
</caption>
<thead>
<th>이름</th>
<th>과목</th>
<th>학점</th>
<th>평균 평점</th>
</thead>
<tbody>
<tr>
<td>김제로</td>
<td>전산개론</td>
<td>A+</td>
<td class="avgScore">3.2</td>
</tr>
<tr>
<td>김 원</td>
<td>컴퓨터프로그래밍</td>
<td>B+</td>
<td class="avgScore">3.86</td>
</tr>
<tr>
<td>김 투</td>
<td>소프트웨어공학</td>
<td>A+</td>
<td class="avgScore">4.42</td>
</tr>
<tr>
<td>김뜨리</td>
<td>자바프로그래밍</td>
<td>C</td>
<td class="avgScore">2.5</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>학생들의 총 평점 평균</td>
<td class="avgAll" colspan="3"></td>
</tr>
</tfoot>
</table>
<script>
const td = document.querySelectorAll(".avgScore");
const avgAll = document.querySelector(".avgAll");
let sum = 0;
for (let i = 0; i < td.length; i++) {
sum = sum + parseFloat(td[i].textContent);
}
avgAll.innerText = sum / td.length;
</script>
</body>
</html>
학생들의 이름, 과목, 학점, 평점 등을 셀에 입력하고,body 태그의 맨 아래에는 script를 삽입하여
학생들의 평균 평점을 tfoot에 나타내 보았다.(물론 과목들은 다르지만..)
위의 실습으로 기본적인 table 쓰는 방법,thead와 tbody, tfoot, caption 사용을
실습해 보았다!
'Programming Language > HTML, CSS, JavaScript' 카테고리의 다른 글
| [HTML/CSS] 폼 요소 (0) | 2022.07.30 |
|---|---|
| [HTML/CSS] 임베디드 요소 (0) | 2022.02.07 |
| [HTML/CSS] 구조를 나타내는 요소와 시멘틱 웹 (0) | 2021.11.13 |
| [HTML/CSS] 메타데이터 요소 (0) | 2021.11.10 |
| [HTML/CSS] 텍스트 요소 (0) | 2021.11.09 |
- Thanks for comming.
- 오늘은
- 명이 방문했어요
- 어제는
- 명이 방문했어요