과제01
링크 : pyjweb.dothome.co.kr/ex01
practice01-table
미국립약물중독연구소(Nation Institute on Drug Abuse, NIDA) 보고서 (1994) 니코틴 헤로인 코카인 알코올 카페인 대마초 의존성 6 5 4 4 2 1 금단성 4 5 3 6 2 1 내성 5 6 3 4 1 2 강화성 4 5 5 4 1 2 독성 3 6 4 6 1 3 (높
pyjweb.dothome.co.kr
상단 링크 눌러보시면 완성본이 있습니다~
음... 완벽하게 똑같이 따라 하려고 시도해봤지만,
보시다시피 font-family, font-size, background-color,
line-height, margin, padding 등 세부 요소를
정확한 수치를 모르는 상태에서 맞추긴 좀 힘들었습니다.ㅠㅠ
돋움체 사용했는데, font-weight가 원본 사진만큼 굵어지지가 않더라고요..!!
아래 내용은 소스 코드입니다~!
코드 공유는 가독성 좋게 Color Scripter로..ㅋㅋㅋ
<html 코드>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>practice01-table</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<table>
<caption>미국립약물중독연구소<br>
(Nation Institute on Drug Abuse, NIDA) 보고서 (1994)</caption>
<col span="7">
<thead>
<tr>
<th></th>
<th>니코틴</th>
<th>헤로인</th>
<th>코카인</th>
<th>알코올</th>
<th>카페인</th>
<th>대마초</th>
</tr>
</thead>
<tbody>
<tr>
<th>의존성</th>
<td>6</td>
<td>5</td>
<td>4</td>
<td>4</td>
<td>2</td>
<td>1</td>
</tr>
<tr>
<th>금단성</th>
<td>4</td>
<td>5</td>
<td>3</td>
<td>6</td>
<td>2</td>
<td>1</td>
</tr>
<tr>
<th>내성</th>
<td>5</td>
<td>6</td>
<td>3</td>
<td>4</td>
<td>1</td>
<td>2</td>
</tr>
<tr>
<th>강화성</th>
<td>4</td>
<td>5</td>
<td>5</td>
<td>4</td>
<td>1</td>
<td>2</td>
</tr>
<tr>
<th>독성</th>
<td>3</td>
<td>6</td>
<td>4</td>
<td>6</td>
<td>1</td>
<td>3</td>
</tr>
</tbody>
</table>
<p>(높은 숫자=높은 효과)</p>
</body>
</html>
|
|
<css 코드>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
@charset "utf-8";
* {margin: 5px; padding: 0;}
body {
color: inherit;
border: 1.3px solid black;
width: 540px;
text-align: center;
font-family:Dotum;
position: relative;
}
table {
border-collapse: collapse;
margin: 0 auto;
}
col {width: 75px;}
caption {
margin: 10px;
line-height: 1.5;
font-weight: bolder;
font-size: 1.1rem;
}
th {
border: 1.5px solid black;
background-color: #ece0d0;
font-weight: bolder;
height: 30px;
}
td {border: 1.5px solid black;}
p {
margin: 10px;
text-align: left;
}
|
|
'HTML, CSS 연습' 카테고리의 다른 글
| 로또복권 만들기 (0) | 2020.12.18 |
|---|