<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<!-- reset css -->
<style>
h1 {
font-size: 2em;
font-weight: bold;
margin: 20px;
}
.menu {
background: lightgray;
width: 80%;
margin-left: 10px;
padding: 10px;
}
.menu h2 {
/* background: orange; */
font-size: 1.2em;
margin: 20px 0;
padding: 8px;
width: fit-content;
}
.menu h2 a {
color: #fff;
font-weight: bold;
/* a태그의 밑줄 제거 */
text-decoration: none;
/* x축그림자길이 y축길이 블러효과크기 색상 */
text-shadow: 2px 2px 10px black;
padding: 10px;
}
.menu h2 a:hover {
background: skyblue;
color: yellow;
}
</style>
</head>
<body>
<h1>메뉴 만들기</h1>
<section class="menu">
<h2>
<a href="#">[주문] 긴급재난지원금을 쿠X에서 사용할 수 있나요?</a>
</h2>
<h2>
<a href="#">다슬기를 키우고 싶은데 어떤 환경이 필요한가요?</a>
</h2>
<h2>
<a href="#">달팽이가 집을 나갔습니다. 어떻게 하죠??</a>
</h2>
</section>
</body>
</html>
'CSS입문' 카테고리의 다른 글
| CSS_BOX속성(overflow)_22.04.11(mon) (0) | 2022.04.11 |
|---|---|
| CSS_BOX속성(box-sizing,display,opacity)_22.04.11(mon) (0) | 2022.04.11 |
| CSS_연습문제 (0) | 2022.04.08 |
| CSS_손쉽게 초기 디자인 reset 하기_22.04.08(Fri) (0) | 2022.04.08 |
| CSS_Box관련속성(border-box-sizing)_22.04.08(Fri) (0) | 2022.04.08 |