본문 바로가기
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;
}
저작자표시 비영리 동일조건 (새창열림)

'Front > CSS' 카테고리의 다른 글

Bootstrap - 주요 기능  (0) 2021.12.07
Bootstrap  (0) 2021.12.06
CSS - 반응형 웹  (0) 2021.12.06
CSS - 속성  (0) 2021.12.05
CSS - 정의, 선택자  (0) 2021.12.05

관련글

티스토리툴바