<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>스타일 복습</title>
<style>
/*** 이미지에 맞게 스타일을 적용해주세요 ***/
body { background-color: black; color: white;}
h2 { text-shadow: 0px 0px 20px;}
table { margin-top: 5%; }
th { width: 10px; height: 50px; }
td { padding: 15px; }
b { text-transform: capitalize; }
.font-cyan { color: cyan; }
.red { background-color: red; }
.blue { background-color: blue; }
.green { background-color: green; }
.white { background-color: white; }
.yellow { background-color: yellow; }
.gold { background-color: gold; }
</style>
</head>
<body>
<div align="center">
<h2 class="font-cyan">Color psychology</h3>
<h3>Cheatsheet</h3>
<small>ref. <a href="https://i.pinimg.com/originals/a5/b6/90/a5b690b2e93d6eff1c04a6af500346c7.jpg">pinterest</a></small>
</div>
<table align="center">
<tbody>
<tr>
<th class="red"></th>
<td>
<b>red</b> <br>
passion, love, anger, danger, warning
</td>
<th class="blue"></th>
<td>
<b>blue</b><br>
calmness, trust, loyalty, wisdom, mystery
</td>
</tr>
<tr>
</tr>
<tr>
<th class="green"></th>
<td>
<b>green</b><br>
nature, growth, health, harmony, money
</td>
<th class="white"></th>
<td>
<b>white</b><br>
purity, innocence, cleanliness, peace
</td>
</tr>
<tr>
<th class="yellow"></th>
<td>
<b>yellow</b><br>
sunshine, happiness, joy, intellect, caution
</td>
<th class="gold"></th>
<td>
<b>gold</b><br>
luxury, wealth, success, prestige, glamor
</td>
</tr>
</tbody>
</table>
</body>
</html>
<h2 class="font-cyan">Color psychology</h2>
.font-cyan { color: cyan; }
h2 { text-shadow: 0px 0px 20px;}
h2 제목 태그로 Color psychology 기입
클래스 .font-cyan 컬러를 cyan을 준다
h2 제목 태그에 text-shadow: 0px 0px 20px
그림자가 퍼져 보이게 설정하여 텍스트에 네온 효과를 준다
<tr>
<th class="red"></th>
<td>
<b>red</b> <br>
passion, love, anger, danger, warning
</td>
<th class="blue"></th>
<td>
<b>blue</b><br>
calmness, trust, loyalty, wisdom, mystery
</td>
</tr>
table 태그에 align = "center"
표를 가운데 정렬한다
tr : 하나의 행을 정의한다
th : 표 제목 셀의 너비를 10픽셀 높이를 50픽셀로 설정한다
td : 표의 데이터 셀
table { margin-top: 5%; }
표의 상단 여백을 회면의 5%만큼 설정하여
표가 화면의 중앙에 위치하도록 합니다
Margin :
외부 여백 요소의 경계 바깥쪽에 있는 공간을 설정
해당 요소와 다른 요소들 사이의 간격을 조정한다
padding :
요소 내부에서 내용과 테두리 사이의 간격을 조절한다
h2 { text-shadow: 0px 0px 20px;}
table { margin-top: 5%; }
th { width: 10px; height: 100px; }
td { padding: 15px; }
b { text-transform: capitalize; }