<!DOCTYPE html>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<style>
.table-menu {
font-size: 14px;
border-collapse: separate;
border: 5px solid red;
text-align: center;
}
.table-menu td {
width: 100px;
border: 3px solid #4b9c42;
padding: 7px 10px;
background-color:#ff8d57;
cursor: pointer;
cursor: hand;
}
.menuType{
margin: 0px 0px 10px 0px;
font-size:20px;
font-weight:600;
}
.menuItem{
margin: 0px 0px 0px 0px;
font-style: italic;
font-weight: 500;
}
</style>
</head>
<body>
<div style="display: flex; justify-content: center;align-items: center">
<table class="table-menu">
<tr>
<td>
<p class="menuType">한식</p>
<p class="menuItem">김치찌개</p>
<p class="menuItem">된장찌개</p>
<p class="menuItem">부대찌개</p>
</td>
<td>
<p class="menuType">일식</p>
<p class="menuItem">초밥</p>
<p class="menuItem">라멘</p>
<p class="menuItem">돈부리</p>
</td>
<td>
<p class="menuType">중식</p>
<p class="menuItem">짜장</p>
<p class="menuItem">짬뽕</p>
<p class="menuItem">탕수육</p>
</td>
<td>
<p class="menuType">분식</p>
<p class="menuItem">떡볶이</p>
<p class="menuItem">튀김</p>
<p class="menuItem">순대</p>
</td>
<td>
<p class="menuType">음료</p>
<p class="menuItem">콜라</p>
<p class="menuItem">사이다</p>
<p class="menuItem">밀키스</p>
</td>
</tr>
</table>
</div>
</body>
반응형
'Dev_Tip > CSS_Tip' 카테고리의 다른 글
| [CSS_Tip] 버튼을 타원으로 만들기 (0) | 2021.08.04 |
|---|---|
| [CSS_Tip] 마우스 오버시 커서 손모양으로 바꾸기 (0) | 2021.02.17 |