오봉이와 함께하는 개발 블로그

CSS 예제 본문

FE/CSS

CSS 예제

오봉봉이 2021. 12. 6. 21:02
728x90

FrontEnd_day3 정리 (2021.12.06 월요일)

CSS 예제

cssEx1.html(테이블 사용)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>CSS 예제</title>
        <link href="cssEx1.css" rel="stylesheet">
    </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>

cssEx1.css(테이블 사용)

@charset "UTF-8";

#wrap {
    margin:0 auto; /* 내가 가운데 정렬 */
    width:800px;  /* 가운데 정렬하기 위해서는 width 값 있어야 함 */
    text-align:center; /* 내 안에 들어 있는 요소를 가운데 정렬  */
}

#mainMenuBox {
    height:35px;
    line-height:35px; /*  줄 간격 - 수직으로 가운데 정렬 효과 */
    background-color:#555;
    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;    
}

cssEx2.html(div 사용)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>CSS 예제</title>
        <link href="cssEx2.css" rel="stylesheet">
    </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 class="product">
                <div>
                    <img src="image/fashion1.png"><br>
                    <span class="prdName">캐주얼화<br>스니커즈</span><br>
                    <span class="prdPrice">35,000원</span>
                </div>
                <div>
                    <img src="image/fashion2.png"><br>
                    <span class="prdName">미니크로스<br>여성 가방</span><br>
                    <span class="prdPrice">20,000원</span>
                </div>
                <div>
                    <img src="image/fashion3.png"><br>
                    <span class="prdName">페이퍼플레인<br>겨울 신발</span><br>
                    <span class="prdPrice">25,800원</span>
                </div>
            </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>

cssEx2.css(div사용)

@charset "UTF-8";

#wrap {
    margin:0 auto; /* 내가 가운데 정렬 */
    width:800px;  /* 가운데 정렬하기 위해서는 width 값 있어야 함 */
    text-align:center; /* 내 안에 들어 있는 요소를 가운데 정렬  */
}

#mainMenuBox {
    height:35px;
    line-height:35px; /*  줄 간격 - 수직으로 가운데 정렬 효과 */
    background-color:#555;
    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;    
}
728x90
저작자표시

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

Bootstrap - 적용방법, Container  (0) 2021.12.06
CSS - 반응형 웹  (0) 2021.12.06
외부 CSS 파일 HTML에 적용  (0) 2021.12.03
CSS 속성  (0) 2021.12.03
CSS 선택자  (0) 2021.12.03
'FE/CSS' Related Articles more
Comments