HTML&CSS 실습6 (정리x)

728x90

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>가정용 꿀사과</title>
</head>

</html>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    main{
        width: 700px;
        border: 1px solid black;
        margin: auto; /* width 값이 있을 때만 마진 auto 적용됨 !!  */
    }
    h2{
        color: white;
        background-color: black;
    }
    h3{
        color: red;
        margin: 20px ;
    }
    span{
        display: block;
    }
    .blue{
        display: inline;
        color: blue;
    }
    #s2 div{
        text-align: center;
        font-weight: bold;
        margin: 20px 0;
    }
    #s2 span{
        margin-bottom: 30px;
    }
    .seconds{
        border-bottom: 1px solid black;
    }

    #s1{
        position: relative; /* 자식의 position 기준이 되도록 */
        height: 300px;
        margin-bottom: 20px;
        background-image: url("https://news.kbs.co.kr/data/news/2021/10/18/20211018_iYfwL8.jpg");
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        overflow: hidden;
    }
    #s1 > div{
        position: absolute; /* 부모를 기준으로 위치 잡아라 */
        padding: 10px 20px;
        width: 100%; /* 부모 가로 값이랑 똑같이 맞춰라 */
        bottom: 0; /* 내 부모의 최 하단에 붙여라 */
        background-color: rgba(0,0,0,0.8);
    }
    #s1 h1{
        color: white;
        margin-bottom: 10px;
    }
    #s1 span{
        margin: 5px 0;
    }
    #s1 p{
        color: orange;
    }

</style>
<body>
<main>
    <section id="s1">
        <div>
            <h1>가정용 꿀사과</h1>
            <p>
                <span>흠집이 있고 약간은 못생겼지만 맛과 영양은 그대로입니다</span>
                <span>질 좋은 사과를 저렴하게 즐겨보세요</span>
            </p>
        </div>
    </section>

    <section id="s2">
        <h2>확인하세요</h2>
        <div>
            <h3>주문 및 배송</h3>
            <p>
                <span><span class="blue">오후 2시 이전</span> 주문건은 당일 발송합니다</span>
                <span>2시 이후 주문건은 다음날 발송합니다(주말제외)</span>
            </p>
        </div>
        <div class="seconds">
            <h3>교환 및 환불</h3>
            <p>
                <span>불만족시 <span class="blue">100% 환불</span>해 드립니다</span>
                <span>고객센터로 전화주세요</span>
            </p>
        </div>
        <div>
            <h3>고객센터</h3>
            <p>
                <span>0000-0000</span>
                <span>상담시간: 오전 9시 ~ 오후 6시 (토/일 공휴일 휴무)</span>
            </p>
        </div>
    </section>
</main>
</body>

728x90

저작자표시 비영리 변경금지

'💜 HTML,CSS' 카테고리의 다른 글

HTML&CSS 20일차 (정리x) (0)	2024.03.23
HTML&CSS 19일차 (정리x) (0)	2024.03.23
HTML&CSS 18일차 (정리x) (0)	2024.03.23
HTML&CSS 17일차 (정리x) (0)	2024.03.23
HTML&CSS 실습5 (정리x) (0)	2024.03.23

'💜 HTML,CSS' 카테고리의 다른 글

티스토리툴바