html & css/개념
CSS 적용 방법
by Doo Hee
2023. 7. 4.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="./css/style.css" />
<style>
/* .table {
border: 1px solid black;
border-collapse: collapse;
width: 100%;
}
.table thead th,
.table tr td {
border: 1px solid black;
border-collapse: collapse;
}
.striped-table tbody tr:nth-child(2n + 1) {
background-color: greenyellow;
} */
.table {
border: 1px solid black;
border-collapse: collapse;
width: 100%;
}
/* 상위의 선택자와 같은 이름으로 정의하여 스타일을 지정하면 두 선택자가 합쳐진다. */
/* 같은 속성이 정의된 경우 밑의 선택자로 대체된다. */
</style>
</head>
<body>
<!-- CSS 적용하는 방법 3가지 -->
<!-- 1. inline style - HTML 시작 태그에 style 속성을 통해서 지정하는 방법 -->
<!-- 2. internal style - head 태그 안에 <style> 태그에 스타일을 지정 -->
<!-- 3. external style - 별도의 CSS 파일을 만들고 <head> 태그 안에 CSS 파일을 삽입해서 사용(가장 많이 사용한다.) -->
<table class="table">
<thead>
<tr>
<th>이름</th>
<th>연락처</th>
<th>이메일</th>
</tr>
</thead>
<tbody>
<tr>
<td>강두희</td>
<td>010-0000-0000</td>
<td>kdh@gmail.com</td>
</tr>
<tr>
<td>강구월</td>
<td>010-0000-0000</td>
<td>kdh@gmail.com</td>
</tr>
<tr>
<td>채상혁</td>
<td>010-0000-0000</td>
<td>kdh@gmail.com</td>
</tr>
</tbody>
</table>
<br />
<table class="table striped-table">
<thead>
<tr>
<th>이름</th>
<th>연락처</th>
<th>이메일</th>
</tr>
</thead>
<tbody>
<tr>
<td>강두희</td>
<td>010-0000-0000</td>
<td>kdh@gmail.com</td>
</tr>
<tr>
<td>강구월</td>
<td>010-0000-0000</td>
<td>kdh@gmail.com</td>
</tr>
<tr>
<td>채상혁</td>
<td>010-0000-0000</td>
<td>kdh@gmail.com</td>
</tr>
</tbody>
</table>
</body>
</html>
