반응형
css 표 꾸미기 프로퍼티에 대하여 알아보기
네 안녕하세요, 이번 포스팅에서는 표를 꾸밀 때 쓰이는 프로퍼티에 대하여 알아보도록 하겠습니다.
우리가 웹 페이지를 볼 때 박스나 리스트 말고 또 하나의 구성 요소가 바로 표죠?
이 표도 css를 이용해서 꾸밀 수가 있습니다.
그래서 이번 포스팅에서는 표를 꾸밀 때는 어떤 프로퍼티를 쓰는지 간단히 알아보는 시간을 가져보도록 하겠습니다.
그럼 지금부터 시작하도록 하겠습니다.
1. 표 꾸미기 프로퍼티
우선 우리가 표를 꾸미기 전에 순수 html만 이용하여 표를 만들면 이렇게 나옵니다.
<!DOCTYPE html>
<html lang="ko">
<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>기본 구조를 가진 표 만들기</title>
</head>
<body>
<h3>2023 1학기 성적</h3>
<thead>
<tr><th>이름</th><th>HTML</th><th>CSS</th></tr>
</thead>
<tfoot>
<tr><th>합</th><th>175</th><th>169</th></tr>
</tfoot>
<tbody>
<tr><td>최민수</td><td>80</td><td>70</td></tr>
<tr><td>박보영</td><td>95</td><td>99</td></tr>
</tbody>
</body>
</html>
반응형
이런 식으로 작성할 수 있습니다.
그리고 결과 화면은 이렇게 나옵니다.
이제 이 표를 가지고서 꾸미는 걸 보여드릴텐데,
각각의 부분을 꾸밀 때 쓰는 프로퍼티는 아래의 표와 같습니다.
| 프로퍼티 | 설명 |
| border | 테두리 제어 |
| width/height | 폭/높이 제어 |
| text-align | 텍스트 여백 조정 |
| background | 배경색 및 테두리 효과 |
| tr:nth-child(odd|even) | 홀수/짝수 행에 적용 |
이러한 기능들이 있습니다.
여기까지 표 꾸미기 관련 프로퍼티들에 대하여 알아보았습니다.
다음 포스팅에서는 위에 작성한 html 템플릿과 프로퍼티들을 가지고 직접 제어를 해보도록 하겠습니다.
긴 글 읽어주신 독자분들께 진심으로 감사합니다~
반응형
'html, css, 자바스크립트 > css' 카테고리의 다른 글
| css width, height 프로퍼티로 표 크기 제어하기 (0) | 2023.05.01 |
|---|---|
| css border 프로퍼티로 표 테두리 제어하기 (0) | 2023.05.01 |
| css 리스트 제어 프로퍼티로 카페 메뉴 만들기 (0) | 2023.04.24 |
| css list-style 단축 프로퍼티에 대하여 알아보기 (0) | 2023.04.24 |
| css list-style-image 프로퍼티로 이미지 마커 만들기 (0) | 2023.04.24 |
댓글