CSS입문

CSS_박스띄우기(실습3)_22.04.12(Tue)

양빵빵 2022. 4. 12. 14:42

 

<!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>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css">

    <style>
        .container {
            background: gray;
            border: 4px double #000;
            width: 80%;

            margin: 50px 0 0 50px;
            box-sizing: border-box;
                        
        }

        .container h1 {
            background: lightgray;
            text-align: center;
            font-family: '궁서체', serif;
            font-size: 3em;
        }

        .container h2 {
            background: #ABB;
            text-align: center;
            font-size: 1.2em;
        }

        .container .yellow {
            color: yellow;

        }

        .clearfix::after {
            content: '';
            display: block;
            clear:both;
        }


        li {
            background: orange;
            border: 1px solid #000;
            width: 200px;
            height: 200px;
            float:left;
            margin-left: 20px;
            padding: 10px;
            box-sizing: border-box;
        }

        .img-box {
            
            width: 100px;
            height: 100px;
        }

        p{
            background: white;
            width: 100px;
            height: 100px;
        }

      
       
        #hobak>.img-box {
        
            background: url('../../img/hobak.jpg') no-repeat center / cover;
                 
        }
  
        #sunflower>.img-box {
            
            background: url('../../img/sunflower.jpg') no-repeat center / cover;
        }

        #tulip>.img-box {
            background: url('../../img/tulip.jpg') no-repeat center / cover;
        }

        #jebi>.img-box {
            background: url('../../img/jebi.jpg') no-repeat center / cover;
        }
          


    </style>

</head>

<body>
    <div class="container clearfix">

        <h1>나의 아름다운 정원</h1>

        <h2 class="intro">사람들은 아마 자신에게 <span class="yellow">자신감을 북돋워 주는</span> 표정 있는 꽃들을 선호할 것이다.</h2>

        <ul class="gallery clearfix">
            <li id="tulip">
                <div class="img-box"></div>
                <p>
                    너무 화려하지 않으며 고귀한 느낌을 가지고 있다.
                    붉은 색이 단연 으뜸이며 한 송이만 있어도 빼어나다.
                </p>
            </li>
            <li id="jebi">
                <div class="img-box"></div>
                <p>
                    드물게 푸른색을 띠고 있으며 작지만 시원해 보이는
                    어린 꽃이라고 할 수 있다. 여럿이 함께 있을 때 더욱 아름답다.
                </p>
            </li>
            <li id="hobak">
                <div class="img-box"></div>
                <p>
                    색도 모양도 화려하며 이름과 걸맞지 않게 아름다운 꽃으로
                    매우 완숙한 이미지를 풍기는 꽃이다.
                </p>
            </li>
            <li id="sunflower">
                <div class="img-box"></div>
                <p>
                    태양만 바라보는 일편단심의 꽃으로 얼굴이 큰 편에
                    속하며 송이가 적어야 제격이다.
                </p>
            </li>
        </ul>

    </div>
</body>

</html>
            

 

<!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>

    <style>

        /* util */
        .clearfix::after {
            content: '';
            display: block;
            clear: both;
        }

        /* layout */
        .container {
            width: 800px;
            margin: 20px auto 0;
            border: 3px double #123456;
            font-size: 14px;
            color: #333;
        }
        .container h1 {
            font-size: 42px;
            font-weight: 500;
            font-family: cursive;
            text-align: center;
            background: #ccc;
            padding: 20px 0;
        }
        .container .intro {
            font-size: 18px;
            text-align: center;
            background: #332f2f;
            color: #fff;
            padding: 10px 0;
            border-bottom: 3px solid #888;
        }
        .container .intro .yellow {
            color: #ff0;
            font-size: 1.1em;
        }

        .container .gallery {
            background: #6e6a6a;
            padding: 20px 0;
        }
        .container .gallery li {
            border: 1px solid #ccc;
            box-sizing: border-box;

            width: 23.75%;
            height: 330px;
            background: #fff;
            float: left;
            margin-right: 1%;
            padding: 5px;          
        }
        .container .gallery li:first-child {
            margin-left: 1%;
        }
        .container .gallery li .img-box {
            height: 150px;
            border: 1px solid #888;
        }
        .container .gallery li p {
            font-size: 17px;
            font-weight: 700;
            line-height: 1.4;
            color: #424242;
            text-align: justify;
            margin-top: 20px;
            padding: 0 10px;
        }

        #tulip {
            background: #d31515;
        }

        #tulip .img-box {
            background: url('../../img/tulip.jpg') no-repeat center / cover;
        }

        #jebi {
            background: #e941f9;
        }
        #jebi .img-box {
            background: url('../../img/jebi.jpg') no-repeat center / cover;
        }
        #hobak {
            background: #fe692b;
        }
        #hobak .img-box {
            background: url('../../img/hobak.jpg') no-repeat center / cover;
        }
        #sunflower {
            background: #f3ea33;
        }
        #sunflower .img-box {
            background: url('../../img/sunflower.jpg') no-repeat center / cover;
        }

    </style>
</head>
<body>
   
    <div class="container">
       
        <h1>나의 아름다운 정원</h1>

        <h2 class="intro">사람들은 아마 자신에게 <span class="yellow">자신감을 북돋워 주는</span> 표정 있는 꽃들을 선호할 것이다.</h2>

        <ul class="gallery clearfix">
            <li id="tulip">
                <div class="img-box"></div>
                <p>
                    너무 화려하지 않으며 고귀한 느낌을 가지고 있다.
                    붉은 색이 단연 으뜸이며 한 송이만 있어도 빼어나다.
                </p>
            </li>
            <li id="jebi">
                <div class="img-box"></div>
                <p>
                    드물게 푸른색을 띠고 있으며 작지만 시원해 보이는
                    어린 꽃이라고 할 수 있다. 여럿이 함께 있을 때 더욱 아름답다.
                </p>
            </li>
            <li id="hobak">
                <div class="img-box"></div>
                <p>
                    색도 모양도 화려하며 이름과 걸맞지 않게 아름다운 꽃으로
                    매우 완숙한 이미지를 풍기는 꽃이다.
                </p>
            </li>
            <li id="sunflower">
                <div class="img-box"></div>
                <p>
                    태양만 바라보는 일편단심의 꽃으로 얼굴이 큰 편에
                    속하며 송이가 적어야 제격이다.
                </p>
            </li>
        </ul>

    </div>

</body>
</html>

'CSS입문' 카테고리의 다른 글

CSS_position(relative)_22.04.12(Tue)  (0) 2022.04.12
CSS_position_22.04.12(Tue)  (0) 2022.04.12
CSS_박스띄우기(실습2)_22.04.12(Tue)  (0) 2022.04.12
CSS_박스띄우기(실습)_22.04.12(Tue)  (0) 2022.04.12
CSS_박스나열(중첩,마진 계산하기)_연습문제_22.04.11(mon)  (0) 2022.04.11

'CSS입문'의 다른글

  • 현재글CSS_박스띄우기(실습3)_22.04.12(Tue)

관련글

티스토리툴바