πŸ”΅ CSS - box sizing

jea_iΒ·2022λ…„ 2μ›” 7일
CSS
0

CSS

λͺ©λ‘ 보기
9/19
post-thumbnail
<body>
    <div class="topwrap">
        <div class="top">
            <ul class="nav">
                <li><a href="">login</a></li>
                <li><a href="">join us</a></li>
                <li><a href="">member</a></li>
            </ul>
        </div>
    </div>
    <div class="hdrwrap">
        <div class="header">
            <h1><b>logo</b>HERE</h1>
            <ul class="nav">
                <li><a href="">about</a></li>
                <li><a href="">news</a></li>
                <li><a href="">portfolio</a></li>
                <li><a href="">board</a></li>
                <li><a href="">gallery</a></li>
                <li><a href="">content</a></li>
            </ul>
        </div>
    </div>
    <div class="content ct1">
        <div class="header">
            <h3>Content Title</h3>
            <p>
                Lorem ipsum dolor sit amet consectetur, adipisicing elit.
                <br>Sapiente perferendis odit magni ratione reiciendis nobis?
            </p>
        </div>
        <div class="section">
            <div class="article at1">
                <div class="image i1">이미지섀λͺ…1</div>
                <div class="texts">
                    <h4>Article Title</h4>
                    <h5>Lorem ipsum dolor sit amet.</h5>
                    <p>
                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus animi ipsam dolor modi minima ex in! Repellendus, aliquid accusantium odio soluta beatae sequi asperiores, natus nihil et, molestias doloribus a.
                    </p>
                    <nav>
                        <a href=""><i class="fab fa-facebook-square"></i></a>
                        <a href=""><i class="fab fa-instagram"></i></a>
                    </nav>
                </div>
            </div>
            <div class="article at2">
                <div class="image i2">이미지섀λͺ…2</div>
                <div class="texts">
                    <h4>Article Title</h4>
                    <h5>Lorem ipsum dolor sit amet.</h5>
                    <p>
                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora laboriosam minima nemo optio animi adipisci, aperiam expedita delectus ratione maxime ipsa nostrum at. Quisquam blanditiis nemo in placeat, quae dolore?
                    </p>
                    <nav>
                        <a href=""><i class="fab fa-facebook-square"></i></a>
                        <a href=""><i class="fab fa-instagram"></i></a>
                    </nav>
                </div>
            </div>
            <div class="article at3">
                <div class="image i3">이미지섀λͺ…3</div>
                <div class="texts">
                    <h4>Article Title</h4>
                    <h5>Lorem ipsum dolor sit amet.</h5>
                    <p>
                        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Asperiores laboriosam suscipit odio, ducimus repellat voluptate dolor illum fugit quae illo quam numquam, doloremque cumque enim necessitatibus quidem a. Laudantium, quasi.
                    </p>
                    <nav>
                        <a href=""><i class="fab fa-facebook-square"></i></a>
                        <a href=""><i class="fab fa-instagram"></i></a>
                    </nav>
                </div>
            </div>
            <div class="article at4">
                <div class="image i4">이미지섀λͺ…4</div>
                <div class="texts">
                    <h4>Article Title</h4>
                    <h5>Lorem ipsum dolor sit amet.</h5>
                    <p>
                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi hic ullam sed nihil sequi iste sint impedit, quas incidunt? Eligendi autem modi, obcaecati recusandae possimus minima corrupti quis beatae vero.
                    </p>
                    <nav>
                        <a href=""><i class="fab fa-facebook-square"></i></a>
                        <a href=""><i class="fab fa-instagram"></i></a>
                    </nav>
                </div>
            </div>
        </div>
    </div>
    <div class="banner">
        <div class="section">
            <div class="image i5">이미지섀λͺ…5</div>
            <div class="image i6">이미지섀λͺ…6</div>
            <div class="image i7">이미지섀λͺ…7</div>
            <div class="image i8">이미지섀λͺ…8</div>
            <div class="image i9">이미지섀λͺ…9</div>
            <div class="image i10">이미지섀λͺ…10</div>
        </div>
    </div>
    <div class="content ct2">
        <div class="header">
            <h3>Content Title</h3>
            <p>
                Lorem ipsum dolor sit amet consectetur, adipisicing elit.
                <br>Sapiente perferendis odit magni ratione reiciendis nobis?
            </p>
        </div>
        <div class="section">
            <div class="article">
                <div class="image i11">이미지섀λͺ…11</div>
                <div class="texts">
                    <h4>Article Title</h4>
                    <h5>Lorem ipsum dolor sit amet.</h5>
                    <p>
                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus animi ipsam dolor modi minima ex in! Repellendus, aliquid accusantium odio soluta beatae sequi asperiores, natus nihil et, molestias doloribus a.
                    </p>
                    <nav>
                        <a href=""><i class="fab fa-facebook-square"></i></a>
                        <a href=""><i class="fab fa-instagram"></i></a>
                    </nav>
                </div>
            </div>
            <div class="article">
                <div class="image i12">이미지섀λͺ…12</div>
                <div class="texts">
                    <h4>Article Title</h4>
                    <h5>Lorem ipsum dolor sit amet.</h5>
                    <p>
                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora laboriosam minima nemo optio animi adipisci, aperiam expedita delectus ratione maxime ipsa nostrum at. Quisquam blanditiis nemo in placeat, quae dolore?
                    </p>
                    <nav>
                        <a href=""><i class="fab fa-facebook-square"></i></a>
                        <a href=""><i class="fab fa-instagram"></i></a>
                    </nav>
                </div>
            </div>
            <div class="article mt20">
                <div class="image i13">이미지섀λͺ…13</div>
                <div class="texts">
                    <h4>Article Title</h4>
                    <h5>Lorem ipsum dolor sit amet.</h5>
                    <p>
                        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Asperiores laboriosam suscipit odio, ducimus repellat voluptate dolor illum fugit quae illo quam numquam, doloremque cumque enim necessitatibus quidem a. Laudantium, quasi.
                    </p>
                    <nav>
                        <a href=""><i class="fab fa-facebook-square"></i></a>
                        <a href=""><i class="fab fa-instagram"></i></a>
                    </nav>
                </div>
            </div>
            <div class="article mt40">
                <div class="image i14">이미지섀λͺ…14</div>
                <div class="texts">
                    <h4>Article Title</h4>
                    <h5>Lorem ipsum dolor sit amet.</h5>
                    <p>
                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi hic ullam sed nihil sequi iste sint impedit, quas incidunt? Eligendi autem modi, obcaecati recusandae possimus minima corrupti quis beatae vero.
                    </p>
                    <nav>
                        <a href=""><i class="fab fa-facebook-square"></i></a>
                        <a href=""><i class="fab fa-instagram"></i></a>
                    </nav>
                </div>
            </div>
        </div>
    </div>
    <div class="ftrwrap">
        <div class="footer">
            <h1><b>logo</b>here</h1>
            <p>
                Lorem ipsum dolor sit amet consectetur, adipisicing elit. Rerum corrupti nisi    <br>laboriosam quo omnis aliquam ipsum suscipit id, illum laudantium.
            </p>
        </div>
    </div>
</body>
profile
jea_i
μ—΄μ •μ—΄μ •μ—΄μ •πŸ”₯
이전 포슀트

πŸ”΅ CSS - float

λ‹€μŒ 포슀트

πŸ”΅ CSS - clearfix

0개의 λŒ“κΈ€

κ΄€λ ¨ μ±„μš© 정보