비전공자 개발일기

HTML & CSS -Publishing2 본문

HTML _CSS

HTML & CSS -Publishing2

HiroDaegu 2021. 10. 8. 20:48
728x90
SMALL

<!DOCTYPE html>
<html lang="ko">

<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>Publishing 3</title>
    <style>
        .commonBox {
            width: 100%;
            float: left;
            border: 2px solid;
            margin: 10px;
        }

        .commonBox>div {
            display: block;
            width: 1200px;
            margin: 0 auto;
        }

        .commonBox>div>div {
            display: block;
            width: 100%;
            float: left;
        }

        .commonBox>div>div>.blue_box {
            display: block;
            border: 2px solid #0000ff;
            margin: 10px auto;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .commonBox>div>div>.blue_box>.green_box {
            display: block;
            border: 2px solid #00ff00;
            width: 250px;
            margin: 10px auto;
            padding: 20px;
        }

        .commonBox>div>div>.blue_box>.orange_box {
            display: block;
            border: 2px solid #ffa500;
            width: 750px;
            margin: 10px auto;
        }

        .gray_box {
            display: block;
            border: 2px solid #808080;
            width: 80%;
            margin: 10px auto;
            text-align: center;
        }

        .green_box ul {
            display: block;
            list-style: none;
            margin: 10px -10px;
        }

        .green_box ul li {
            display: block;
            border: 2px solid #808080;
            margin: 0 auto;
            text-align: center;
        }

        .opt ul li {
            display: block;
            margin-right: 30px;
        }

        .orange_box ul {
            display: block;
            list-style: none;
            padding: 0;
            margin: 20px 100px;
        }

        .orange_box ul li {
            display: inline-block;
            border: 2px solid #808080;
            margin: 10px -3px;
            padding: 0 20.9px;
        }

        .write {
            display: block;
            text-align: left;
            width: 70%;
            margin: 5px;
        }

        .write p {
            display: block;
            color: #ccc;
        }

        .write span {
            color: #00ff00;
        }
    </style>
</head>

<body>
    <div class="commonBox">
        <!--검은색 상자-->
        <div>
            <div>
                <div class="blue_box">
                    <!--파란색 상자-->
                    <div class="green_box">
                        <div class="gray_box">로고</div>
                    </div>
                    <div class="orange_box">
                        <ul>
                            <li>01_menu</li>
                            <li>02_menu</li>
                            <li>03_menu</li>
                            <li>04_menu</li>
                            <li>05_menu</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="commonBox">
        <!--검은색 상자-->
        <div>
            <div>
                <div class="blue_box">
                    <!--파란색 상자-->
                    <div class="green_box opt">
                        <ul>
                            <li>01_menu</li>
                            <li>02_menu</li>
                            <li>03_menu</li>
                            <li>04_menu</li>
                            <li>05_menu</li>
                        </ul>
                    </div>
                    <div class="orange_box">
                        <div class="gray_box">
                            <div class="write">
                                <p>Culture Report.01</p>
                                <h1><span>내 일</span> 에<br> 책임을 다하는 문화</h1>
                                <h5>
                                    <p>'나 스스로 어떤 성과를 낼 것인지'에 집중하여</p>
                                    <p>개개인이 자율적으로 업무시간을 관리하고</p>
                                    <p>일에 책임지는 문화를 정착시켜나가고 있습니다.</p>
                                </h5>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="commonBox">
        <!--검은색 상자-->
        <div>
            <div>
                <div class="blue_box">
                    <!--파란색 상자-->
                    <div class="green_box">
                        <div class="gray_box">하부로고</div>
                    </div>
                    <div class="orange_box">
                        <div class="gray_box">
                            카피라이트
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>
728x90
LIST

'HTML _CSS' 카테고리의 다른 글

New HTML5 Tags with no CSS & JS  (0) 2022.01.17
HTML CSS - Dropdown menu Hover  (0) 2021.10.16
HTML & CSS -Publishing  (0) 2021.10.06
CSS BULMA, TAILWIND  (0) 2021.09.17
HTML Checkbox 2  (0) 2021.09.03
'HTML _CSS' Related Articles more