Front/CSS
CSS 연습문제
by Hyeon_
2021. 12. 6.
CSS 연습문제
- 메뉴 항목에 마우스 올렸을 때 글자색 빨간색, 밑줄 표시
테이블 사용
cssEX.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS 예제</title>
</head>
<body>
<div id="wrap">
<div id="mainMenuBox">
<ul id="menuItem">
<li><a href="#">패션잡화</a></li>
<li><a href="#">주방용품</a></li>
<li><a href="#">생활건강</a></li>
<li><a href="#">DIY가구</a></li>
</ul>
</div>
<div id="product">
<table>
<tr><td><img src="image/fashion1.png"></td>
<td><img src="image/fashion2.png"></td>
<td><img src="image/fashion3.png"></td></tr>
<tr id="prdName"><td>캐주얼화<br>스니커즈</td>
<td>미니크로스<br>여성 가방</td>
<td>페이퍼플레인<br>겨울 신발</td></tr>
<tr id="prdPrice"><td>35,000원</td>
<td>20,000원</td>
<td>25,800원</td></tr>
</table>
</div>
<div id="info">
<div class="box">
<h4>공지사항</h4>
<a href="#">[배송] : 무료배송 변경 안내 2021.08.25</a><br>
<a href="#">[전시] : DIY 가구 전시 안내 2021.09.01</a><br>
<a href="#">[판매] : 11월 특가 상품 안내 2021.11.01</a><br>
</div>
<div class="box">
<h4>커뮤니티</h4>
<a href="#">[레시피] : 살 안찌는 야식 만들기</a><br>
<a href="#">[가구] : 헌집 새집 베스트 가구</a><br>
<a href="#">[후기] : 배송이 잘못 됐어요 ㅠㅠ</a><br>
</div>
</div>
</div>
</body>
</html>
cssEx.css
#wrap {
margin:0 auto; /* 내가 가운데 정렬 */
width:800px; /* 가운데 정렬하기 위해서는 width 값 있어야 함 */
text-align:center; /* 내 안에 들어 있는 요소를 가운데 정렬 */
}
#mainMenuBox {
height:35px;
line-height:35px; /* 줄 간격 - 수직으로 가운데 정렬 효과 */
background-color:#333;
margin-top:30px;
margin-bottom:30px;
}
#mainMenuBox ul {
padding-left:0;
margin:0;
list-style:none; /* type 없음 */
}
#mainMenuBox ul li { /* #mainMenuBox li */
float:left; /* 한 줄로 정렬 */
text-align:center;
width:25%; /* 항목 4개를 동일한 너비로 */
}
#mainMenuBox a { /* #mainMenuBox ul li a */
text-decoration:none; /* <a> 태그 밑줄 없애기 */
color:white; /* 글자색 흰색 */
display:block; /* 여백 */
font-size:14px;
font-weight:bold;
}
#mainMenuBox a:hover {
color:red;
text-decoration:underline; /* <a> 태그 밑줄 보이기 */
background-color:black;
}
table {
margin:0 auto;
width:600px;
margin-bottom:30px;
}
#prdName{
color:blue;
font-weight:bold;
}
#prdPrice{
color:red;
}
.box {
display: inline-block; /* 옆으로 나란히 배치 */
border:solid 1px grey;
width:320px;
height:150px;
font-size:small;
border-radius:10px;
padding-left:20px;
padding-right:20px;
margin:10px;
text-align:left;
}
.box a:hover {
color:red;
}
div 사용
cssEx-1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS 예제</title>
<link rel="stylesheet" href="css/cssEx1.css">
</head>
<body>
<div id="wrap">
<div id="mainMenuBox">
<ul id="menuItem">
<li><a href="#">패션잡화</a></li>
<li><a href="#">주방용품</a></li>
<li><a href="#">생활건강</a></li>
<li><a href="#">DIY가구</a></li>
</ul>
</div>
<div id="product">
<div>
<img src="image/fashion1.png"><br>
<span class="prdName">캐주얼화<br>스니커즈</span>
<span class="prdPrice">35,000원</span>
</div>
<div>
<img src="image/fashion2.png"><br>
<span class="prdName">미니크로스<br>여성 가방</span>
<span class="prdPrice">20,000원</span>
</div>
<div>
<img src="image/fashion3.png"><br>
<span class="prdName">페이퍼플레인<br>겨울 신발</span>
<span class="prdPrice">25,800원</span>
</div>
<div id="info">
<div class="box">
<h4>공지사항</h4>
<a href="#">[배송] : 무료배송 변경 안내 2021.08.25</a><br>
<a href="#">[전시] : DIY 가구 전시 안내 2021.09.01</a><br>
<a href="#">[판매] : 11월 특가 상품 안내 2021.11.01</a><br>
</div>
<div class="box">
<h4>커뮤니티</h4>
<a href="#">[레시피] : 살 안찌는 야식 만들기</a><br>
<a href="#">[가구] : 헌집 새집 베스트 가구</a><br>
<a href="#">[후기] : 배송이 잘못 됐어요 ㅠㅠ</a><br>
</div>
</div>
</div>
</div>
</body>
</html>
cssEx1.css
#wrap {
margin:0 auto; /* 내가 가운데 정렬 */
width:800px; /* 가운데 정렬하기 위해서는 width 값 있어야 함 */
text-align:center; /* 내 안에 들어 있는 요소를 가운데 정렬 */
}
#mainMenuBox {
height:35px;
line-height:35px; /* 줄 간격 - 수직으로 가운데 정렬 효과 */
background-color:#333;
margin-top:30px;
margin-bottom:30px;
}
#mainMenuBox ul {
padding-left:0;
margin:0;
list-style:none; /* type 없음 */
}
#mainMenuBox ul li { /* #mainMenuBox li */
float:left; /* 한 줄로 정렬 */
text-align:center;
width:25%; /* 항목 4개를 동일한 너비로 */
}
#mainMenuBox a { /* #mainMenuBox ul li a */
text-decoration:none; /* <a> 태그 밑줄 없애기 */
color:white; /* 글자색 흰색 */
display:block; /* 여백 */
font-size:14px;
font-weight:bold;
}
#mainMenuBox a:hover {
color:red;
text-decoration:underline; /* <a> 태그 밑줄 보이기 */
background-color:black;
}
#product{
margin-bottom: 30px;
}
#product div{
display: inline-block;
margin: 10px;
}
#prdName{
color:blue;
font-weight:bold;
}
#prdPrice{
color:red;
}
.box {
display: inline-block; /* 옆으로 나란히 배치 */
border:solid 1px grey;
width:320px;
height:150px;
font-size:small;
border-radius:10px;
padding-left:20px;
padding-right:20px;
margin:10px;
text-align:left;
}
.box a:hover {
color:red;
}
