** 영상으로 보고 싶은 분은 아래 주소를 클릭해주세요.
https://www.youtube.com/watch?v=wNOGuj5uATw
이번 강의에서는 웹컨텐츠를 직접적으로 제작해보겠습니다.
웹컨텐츠 중 표(table)를 만들어보도록 하겠습니다.
★ 제작해볼 표이미지와 소스
** 표 제목에 들어갈 이미지 소스입니다. 다운받아주세요.
** 코드 전체 확인
1. HTML 구조 확인하기!
- 첫째로는 표를 확인해서 테이블 구조를 먼저 짜야합니다.
1) 테이블 태그 작성
## 테스트 코드 : [index.html]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>표만들기</title>
</head>
<body>
<!-- border속성 구조확인용 : html작업 후 삭제 -->
<table border="1">
</table>
</body>
</html>- HTML 기본구조 작성 후 <table> 태그를 작성해줍니다.
- 이때 table태그에는 border 속성을 주는데 그 이유는 테두리가 없으면 구조 확인이 어렵기 때문입니다.
하지만 border 속성은 웹표준에 어긋나기 때문에 구조를 확인한 후에는 반드시 삭제해줍니다.
2) 표의 제목 caption태그 쓰기
## 테스트 코드 : [index.html]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>표만들기</title>
</head>
<body>
<!-- border속성 구조확인용 : html작업 후 삭제 -->
<table border="1">
<caption>위치 및 면적</caption>
</table>
</body>
</html>- 표의 제목은 <caption> 태그로 작성합니다.
- 보통 꾸며줄 때 테두리 밖에다 작성하다보니, <caption> 태그를 <table> 태그 밖에 쓰는 경우가 있는데
반드시 <table> 태그의 자손으로 작성해야합니다.
## 코드 결과
3) 여러 행을 묶어줄 행구조태그 작성
## 테스트 코드 : [index.html]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>표만들기</title>
</head>
<body>
<!-- border속성 구조확인용 : html작업 후 삭제 -->
<table border="1">
<caption>위치 및 면적</caption>
<thead></thead>
<tbody></tbody>
</table>
</body>
</html>- 보통 행구조태그는 쓰지 않아도 웹표준에 어긋나지 않습니다.
- 하지만 여러 행으로 CSS를 사용할 때 편리하므로 이번 표에는 사용하는 것이 좋습니다.
- <thead> 태그는 보통 표상단의 제목셀을 묶기 위해 사용합니다.
- <tbody> 태그는 일반데이터가 있는 행들을 묶기 위해 사용합니다.
- <tfoot> 태그는 표의 결론들이 있는 행들을 묶기 위해 사용합니다. ex) 합계, 평균 등
4) 행 태그인 tr태그 작성
## 테스트 코드 : [index.html]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>표만들기</title>
</head>
<body>
<!-- border속성 구조확인용 : html작업 후 삭제 -->
<table border="1">
<caption>위치 및 면적</caption>
<thead>
<tr></tr>
<tr></tr>
</thead>
<tbody>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
</tbody>
</table>
</body>
</html>- 제가 지금은 <tr> 태그를 미리 다 썼는데, 몇 줄 안된다면 이방식을 쓰세요.
- 하지만 행이 너무 많거나, 구조가 여러행이 비슷하면 한행씩 써서 복사하는 방식으로 작성해주세요.
5) 첫번째 줄 작성
## 테스트 코드 : [index.html]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>표만들기</title>
</head>
<body>
<!-- border속성 구조확인용 : html작업 후 삭제 -->
<table border="1">
<caption>위치 및 면적</caption>
<thead>
<tr>
<th rowspan="2">단</th>
<th colspan="2">경도와 위도의 극점</th>
<th rowspan="2">연장거리(㎞)</th>
</tr>
<tr></tr>
</thead>
<tbody>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
</tbody>
</table>
</body>
</html>- rowspan 속성은 다른 행의 셀들간의 병합에서 사용합니다.
- colspan 속성은 다른 행의 셀들간의 병합에서 사용합니다.
- 위에서 제공한 이미지를 확인해보면 첫번째 줄은 셀병합이 되어 있으므로 잘 확인해주세요!
## 코드 결과
6) 두번째 줄 작성
## 테스트 코드 : [index.html]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>표만들기</title>
</head>
<body>
<!-- border속성 구조확인용 : html작업 후 삭제 -->
<table border="1">
<caption>위치 및 면적</caption>
<thead>
<tr>
<th rowspan="2">단</th>
<th colspan="2">경도와 위도의 극점</th>
<th rowspan="2">연장거리(㎞)</th>
</tr>
<tr>
<th>지명</th>
<th>극점</th>
</tr>
</thead>
<tbody>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
</tbody>
</table>
</body>
</html>- 윗줄에서 처음과 마지막에 셀병합이 되어 있으므로 2개의 셀태그( <th> )로만 작성해줍니다.
## 코드 결과
7) 세번째 줄 작성
## 테스트 코드 : [index.html]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>표만들기</title>
</head>
<body>
<!-- border속성 구조확인용 : html작업 후 삭제 -->
<table border="1">
<caption>위치 및 면적</caption>
<thead>
<tr>
<th rowspan="2">단</th>
<th colspan="2">경도와 위도의 극점</th>
<th rowspan="2">연장거리(㎞)</th>
</tr>
<tr>
<th>지명</th>
<th>극점</th>
</tr>
</thead>
<tbody>
<tr>
<th>동단</th>
<td>탑동동(왕방산)</td>
<td>동경 127˚ 03′ 49″</td>
<td rowspan="4">
동서간 12.9㎞<br>
남북간 15.3㎞
</td>
</tr>
<tr></tr>
<tr></tr>
<tr></tr>
</tbody>
</table>
</body>
</html>- 마지막 셀은 셀병합이 4개로 처리됩니다.
- 이때 다른 행에 있는 셀 병합이므로 rowspan 속성으로 4칸을 차지 해줍니다.
- 그리고 엔터처리를 하기 위해 <br> 태그를 작성해주세요.
## 코드 결과
8) 네번째 줄 ~ 여섯번째 줄 작성
## 테스트 코드 : [index.html]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>표만들기</title>
</head>
<body>
<!-- border속성 구조확인용 : html작업 후 삭제 -->
<table border="1">
<caption>위치 및 면적</caption>
<thead>
<tr>
<th rowspan="2">단</th>
<th colspan="2">경도와 위도의 극점</th>
<th rowspan="2">연장거리(㎞)</th>
</tr>
<tr>
<th>지명</th>
<th>극점</th>
</tr>
</thead>
<tbody>
<tr>
<th>동단</th>
<td>탑동동(왕방산)</td>
<td>동경 127˚ 03′ 49″</td>
<td rowspan="4">
동서간 12.9㎞<br>
남북간 15.3㎞
</td>
</tr>
<tr>
<th>서단</th>
<td>상패동(사천리)</td>
<td>동경 127˚ 00′ 37″</td>
</tr>
<tr>
<th>남단</th>
<td>탑동동(장 림)</td>
<td>북위 37˚ 50′ 34″</td>
</tr>
<tr>
<th>북단</th>
<td>하봉암동(옥녀봉)</td>
<td>북위 37˚ 58′ 50″</td>
</tr>
</tbody>
</table>
</body>
</html>- 텍스트들을 쭉 작성합니다.
- 동단부터 북단까지는 CSS에서 스타일 적용시 <th> 태그를 사용해야 편해서 작성했습니다.
<td> 태그를 사용한다고 틀린 것은 아닙니다. 대신 스타일적용시 클래스를 써야하므로 복잡해지죠.
## 코드 결과
9) border속성 삭제
## 테스트 코드 : [index.html]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>표만들기</title>
<link rel="stylesheet" href="table.css">
</head>
<body>
<!-- border속성 구조확인용 : html작업 후 삭제 -->
<table>
<caption>위치 및 면적</caption>
<thead>
<tr>
<th rowspan="2">단</th>
<th colspan="2">경도와 위도의 극점</th>
<th rowspan="2">연장거리(㎞)</th>
</tr>
<tr>
<th>지명</th>
<th>극점</th>
</tr>
</thead>
<tbody>
<tr>
<th>동단</th>
<td>탑동동(왕방산)</td>
<td>동경 127˚ 03′ 49″</td>
<td rowspan="4">
동서간 12.9㎞<br>
남북간 15.3㎞
</td>
</tr>
<tr>
<th>서단</th>
<td>상패동(사천리)</td>
<td>동경 127˚ 00′ 37″</td>
</tr>
<tr>
<th>남단</th>
<td>탑동동(장 림)</td>
<td>북위 37˚ 50′ 34″</td>
</tr>
<tr>
<th>북단</th>
<td>하봉암동(옥녀봉)</td>
<td>북위 37˚ 58′ 50″</td>
</tr>
</tbody>
</table>
</body>
</html>- border 속성은 테이블 구조 확인용이고 웹표준에 어긋납니다. 그래서 반드시 삭제해주세요.
- html은 작성시 반드시 웹표준 검사를 해주세요.
- 웹표준검사기 : http://validator.kldp.org/
The W3C Markup Validation Service
파일 업로드로 유효성 검사 주의: Windows XP SP2 의 몇몇 IE 에서는 업로드가 되지 않을수도 있습니다. 이 경우에는, W3C QA 사이트의 information page 를 참고 하십시오. 직접 입력하여 유효성 검사
validator.kldp.org
- 그리고 작업이 다되면 CSS를 작업해야하므로 <link> 태그로 CSS문서를 연결해두었습니다.
## 코드 결과
2. CSS로 스타일 넣기
- 표 구조를 다 짰다면 스타일을 처리해줍니다.
1) 언어 인코딩 설정
## 테스트코드 : [table.css]
@charset "uft-8";
/* 언어 인코딩 처리 - 한글주석 깨지는 것 방지 */- 브라우저에서 소스볼때 한글 주석이 깨지는 것을 방지합니다.
- 영어는 깨지지 않지만 영어가 아닌 글자들은 전부 깨져보입니다.
- 그래서 8개 언어를 지원하는 인코딩 설정입니다.
- 그리고 이것을 작성한 위에는 주석이나 다른 코드를 쓰면 웹표준 에러입니다.
2) 전체여백 제거
## 테스트코드 : [table.css]
@charset "uft-8";
/* 언어 인코딩 처리 - 한글주석 깨지는 것 방지 */
/* 태그별로 다른 여백을 없애고 시작 */
*{ padding: 0; margin: 0; }- 태그는 각각의 여백이 다 다릅니다.
- 일일이 외울 수는 없으므로 보통 여백을 제거하고 작업합니다.
3) table태그에 크기와 여백 설정
## 테스트코드 : [table.css]
@charset "uft-8";
/* 언어 인코딩 처리 - 한글주석 깨지는 것 방지 */
/* 태그별로 다른 여백을 없애고 시작 */
*{ padding: 0; margin: 0; }
table{
margin: 50px; width: 800px;
}- 브라우저에 너무 붙어나와서 margin: 50px; 로 여백처리했습니다.
- 그리고 표 전체 폭은 800px이어서 width: 800px; 로 주었습니다.
## 코드 결과
4) th, td 태그에 테두리 및 여백, 글자가로 정렬 처리
## 테스트코드 : [table.css]
@charset "uft-8";
/* 언어 인코딩 처리 - 한글주석 깨지는 것 방지 */
/* 태그별로 다른 여백을 없애고 시작 */
*{ padding: 0; margin: 0; }
table{
margin: 50px; width: 800px;
}
th, td{
border: 1px solid #ccc;
padding: 15px; /* 테두리 안쪽 여백 */
text-align: center;
}- 테두리 전체를 주고, 테두리와 텍스트의 안쪽 여백 처리를 위해 padding을 처리했습니다.
- th 태그는 text-align 속성의 기본값이 center 이고, td 태그의 기본값은 left 입니다.
- 그래서 전부 가운데 처리했습니다.
## 코드 결과
5) table태그에 border-spacing처리
## 테스트코드 : [table.css]
@charset "uft-8";
/* 언어 인코딩 처리 - 한글주석 깨지는 것 방지 */
/* 태그별로 다른 여백을 없애고 시작 */
*{ padding: 0; margin: 0; }
table{
margin: 50px; width: 800px;
border-spacing: 0; /* 셀간의 여백 제거 */
}
th, td{
border: 1px solid #ccc;
padding: 15px; /* 테두리 안쪽 여백 */
text-align: center;
}- 위의 코드 결과를 보면 셀들간의 여백이 있습니다.
- border-spacing 속성의 기본값이 1로 들어가서 입니다.
- 여백 제거를 위해 border-spacing: 0; 처리해줍니다.
## 코드 결과
6) table태그에 border-collapse처리
## 테스트코드 : [table.css]
@charset "uft-8";
/* 언어 인코딩 처리 - 한글주석 깨지는 것 방지 */
/* 태그별로 다른 여백을 없애고 시작 */
*{ padding: 0; margin: 0; }
table{
margin: 50px; width: 800px;
border-spacing: 0; /* 셀간의 여백 제거 */
border-collapse: collapse; /* 셀간의 선겹침 허용 */
}
th, td{
border: 1px solid #ccc;
padding: 15px; /* 테두리 안쪽 여백 */
text-align: center;
}- 위의 코드 결과를 보면 셀들이 겹친 부분의 테두리가 2px로 보이죠?
- 그래서 선겹침을 허용해서 1px보이게 해주는 것이 border-collapse: collapse; 입니다.
## 코드 결과
- 이제 선이 1px로 보이시죠?
7) 다른 테두리 설정 및 제목셀 배경색 처리
## 테스트코드 : [table.css]
@charset "uft-8";
/* 언어 인코딩 처리 - 한글주석 깨지는 것 방지 */
/* 태그별로 다른 여백을 없애고 시작 */
*{ padding: 0; margin: 0; }
table{
margin: 50px; width: 800px;
border-spacing: 0; /* 셀간의 여백 제거 */
border-collapse: collapse; /* 셀간의 선겹침 허용 */
}
th, td{
border: 1px solid #ccc;
padding: 15px; /* 테두리 안쪽 여백 */
text-align: center;
}
thead{ border-top: 2px solid #333; }
thead th{ /* thead태그에 들어 있는 후손인 th만 선택 */
border-bottom: 1px solid #666;
}
th{ background-color: #ededed; }
tbody th{ font-weight: normal; } /* 굵지 않게 처리 */- 테두리 위쪽만 2px로 진한색이죠? 그래서 th 태그에 각각 주는 것보다 thead 태그에 주면 편합니다.
이것때문에 사실 행구조태그를 작성한 것이죠.
- 그리고 선택자를 thead th , tbody th 이렇게 작성한 것은 후손선택방식입니다.
이렇게 선택해야 위쪽만 테두리를 따로 지정, 아래쪽은 따로 굵지 않게 지정할 수 있습니다.
셀들에 일일이 클래스를 주지 않아도 되서 편하죠.
## 코드 결과
8) 캡션처리
## 테스트코드 : [table.css]
@charset "uft-8";
/* 언어 인코딩 처리 - 한글주석 깨지는 것 방지 */
/* 태그별로 다른 여백을 없애고 시작 */
*{ padding: 0; margin: 0; }
table{
margin: 50px; width: 800px;
border-spacing: 0; /* 셀간의 여백 제거 */
border-collapse: collapse; /* 셀간의 선겹침 허용 */
}
th, td{
border: 1px solid #ccc;
padding: 15px; /* 테두리 안쪽 여백 */
text-align: center;
}
thead{ border-top: 2px solid #333; }
thead th{ /* thead태그에 들어 있는 후손인 th만 선택 */
border-bottom: 1px solid #666;
}
th{ background-color: #ededed; }
tbody th{ font-weight: normal; } /* 굵지 않게 처리 */
caption{
text-align: left; /* 왼쪽 정렬로 변경 */
font-size: 24px; font-weight: bold; color: #26348b;
margin-bottom: 15px; /* 아래 동위선택자와의 간격 조정 */
}
caption::before{ /* 기호이미지 처리 */
content: url(bullet.png);
margin-right: 10px;
position: relative; top: -2px; /* 상대적이동처리 */
}- <caption> 태그의 글자 가로 정렬은 center 가 기본값이어서, left 로 변경했습니다.
- 그리고 아래 표와의 간격 설정을 위해 margin-bottom 속성을 사용했는데,
그 이유는 <thead> 태그와 <caption> 태그의 관계는 동위선택 관계이기 때문입니다.
하지만 padding-bottom 을 준다고 해서 배경색이 없기 때문에 달라보이진 않을겁니다.
그래도 동위선택자와의 간격은 margin 속성, 요소와 자손과의 간격 조정은 padding 속성으로 주는 연습을 하세요.
- 기호이미지는 <img> 태그로 작성하지 않았는데, 그 이유는 링크가 걸리는 것도 아니고,
그냥 꾸며지는 요소라서 그렇습니다. 하지만 <img> 태그로 쓴다고 틀린 것은 아닙니다.
- 예전엔 CSS로 저런 이미지 처리시에는 배경이미지로 많이 처리했는데, 요즘은 컨텐츠전후선택자인
:before 나 :after 로 많이 씁니다. url() 함수를 통해 이미지도 쉽게 컨텐츠로 가져오죠.
## 코드 결과
- 전부 완성이 되었습니다.
- 전부 완성한 후에는 역시 CSS도 웹표준 검사해주세요.
http://css-validator.kldp.org/
W3C CSS 검사 서비스
파일 업로드를 통한 검사 직접 입력을 통한 검사
css-validator.kldp.org
'웹언어 > 웹컨텐츠제작꿀팁-HTMLCSS중급편' 카테고리의 다른 글
| [웹컨텐츠제작꿀팁] 6강 Board Preview 이렇게 써라! (0) | 2022.02.02 |
|---|---|
| [웹컨텐츠제작꿀팁] 5강 Hover Effect(마우스오버효과) 이렇게 써라! (0) | 2021.10.30 |
| [웹컨텐츠제작꿀팁] 4강 로그인창 이렇게 써라! (2) | 2021.10.19 |
| [웹컨텐츠제작꿀팁] 3강 체크박스 모양변경, 이렇게 써라! (0) | 2021.10.11 |
| [웹컨텐츠제작꿀팁] 2강 텍스트네비게이션 이렇게 써라! (0) | 2021.10.11 |
