반응형
[html 예시]
<!-- 18_exam_train.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="./css/18_exam_train.css">
</head>
<body>
<h2>열차표 예매</h2>
<table>
<tr id="table_title">
<th>열차번호</th>
<th>출발</th>
<th>도착</th>
<th>출발시간</th>
<th>특실</th>
<th>일반실</th>
<th>소요시간</th>
</tr>
<tr>
<td id="col1" class="train">199</td>
<td id="col2">수원</td>
<td id="col3">대전</td>
<td id="col4">10:00</td>
<td id="col7">01:44</td>
</tr>
<tr>
<td class="train">230</td>
<td>수원</td>
<td>대전</td>
<td>11:30</td>
<td>01:38</td>
</tr>
</table>
</body>
</html>
[CSS]
더보기
table {
/* 테이블 선 사이 붙이기 */
border-collapse: collapse;
/* 가로 크기를 고정크기로 */
/* 화면단위 : px(고정크기), %(반응형단위),
뷰포트 단위(반응형) : vw(가로), vh(세로) */
/* viewport : 모니터의 화면(PC모니터, 태블릿, 모바일 화면에 맞추어 보임 */
/* 예) 코딩 시 100vw(가로) -> PC, 태블릿 등에서 적절하게 맞추어줌 */
width: 610px;
}
/* 디자인 기본 : 디자인 적용 우선순위 -> 같은 선택자일 경우 밑으로 갈수록 우선됨 */
table, td, th{
/* 외곽선 */
border: 1px solid #cccccc;
}
tr{
/* 글자 정렬 : 중앙 */
text-align: center;
}
td, th {
/* 안쪽 여백 */
padding: 5px;
}
#table_title{
height: 30px;
background-color: #eeeeee;
}
/* 클래스 선택자 */
.train{
/* 굵은글씨 */
font-weight: bold;
/* 밑줄 */
text-decoration: underline;
color: #f1477b;
background-color: #fbdbf2;
}
/* 참고 */
#col1, #col4 {
width: 90px;
}
#col2, #col3{
width: 60px;
}
#col5, #col6{
width: 80px;
}
반응형
'CSS > CSS 실습' 카테고리의 다른 글
| [CSS] display 실습 (0) | 2023.08.10 |
|---|---|
| [CSS] 웹 폰트 적용 예제 (0) | 2023.08.09 |
| [CSS] 배경이미지 연습문제 (0) | 2023.08.08 |
| [CSS] Box 연습문제 (0) | 2023.08.08 |
| [CSS] box 속성 연습문제 (0) | 2023.08.07 |