본문 바로가기
웹 개발

13. 웹 개발을 위한 기본 CSS 태그 모음 & 요약 정리 4

by 곽정우 2024. 4. 12.

 

 

1. z-index

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>z-index</title>
    <style>
        div#wrapper { position: relative; }
        div.box {
            position: absolute;
            width: 200px;
            height: 200px;
            border: 1px solid black;
            font-size: 25px;
        }
        
        #b1 {
            left: 50px;
            top: 50px;
            background-color: deeppink;
            z-index: 100;
        }

        #b2 {
            left: 120px;
            top: 70px;
            background-color: gold;
            z-index: 1;
        }

        #b3 {
            left: 70px;
            top: 110px;
            background-color: deepskyblue;
            z-index: 10;
        }
    </style>
</head>
<body>
    <h2>z-index</h2>
    <div id="wrapper">
        <div id="b1" class="box">1번째 div</div>
        <div id="b2" class="box">2번째 div</div>
        <div id="b3" class="box">3번째 div</div>
    </div>
</body>
</html>

2. float1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>float1</title>
    <style>
        img {
            float: left;
            margin-right: 20px;
        }
    </style>
</head>
<body>
    <h2>float1</h2>
    <img src="./gift.png" alt="선물"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique saepe a ut animi quisquam velit fuga! Odit, ipsum natus esse ut, et sed mollitia quidem cumque iusto reprehenderit sapiente quos. Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut tenetur repellat, voluptatum obcaecati laboriosam reprehenderit! Pariatur et dolor, laborum magnam, officia deserunt optio omnis deleniti voluptatibus libero porro sint facilis.
</body>
</html>

3. float2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>float2</title>
    <style>
        div {
            padding: 20px;
        }

        #box1 {
            background-color: gold;
            float: left;
            margin-right: 20px;
        }
        #box2 {
            background-color: deeppink;
            float: left;
            margin-right: 20px;

        }
        #box3 {
            background-color: greenyellow;
            float: left;
            margin-right: 20px;

        }
        #box4 {
            background-color: deepskyblue;
            float: right;
        }
    </style>
</head>
<body>
    <h2>float2</h2>
    <div id="box1">박스1</div>
    <div id="box2">박스2</div>
    <div id="box3">박스3</div>
    <div id="box4">박스4</div>
</body>
</html>

4. claer

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>clear</title>
    <style>
        body { margin: 20px 30px; max-width: 800px; }

        p {
            padding: 10px;
            text-align: center;
            font-size: 20px;
        }

        #p1 {
            float: left;
            width: 38%;
            background-color: gold;
            margin-bottom: 20px;
        }

        #p2 {
            float: right;
            width: 54%;
            background-color: deepskyblue;
        }

        #p3 {
            clear: both;
            background-color: deeppink;
        }
    </style>
</head>
<body>
    <h2>clear</h2>
    <div id="p1">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem cum ut maiores nemo mollitia placeat iure, alias natus doloribus facere harum reiciendis consectetur officia tenetur provident consequuntur molestias, sit pariatur?</p>
    </div>
    <div id="p2">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem cum ut maiores nemo mollitia placeat iure, alias natus doloribus facere harum reiciendis consectetur officia tenetur provident consequuntur molestias, sit pariatur?</p>
    </div>
    <div id="p3">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem cum ut maiores nemo mollitia placeat iure, alias natus doloribus facere harum reiciendis consectetur officia tenetur provident consequuntur molestias, sit pariatur?</p>
    </div>
</body>
</html>

5. 2단계레이아웃

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>2단 레이아웃</title>
    <link rel="stylesheet" href="./css/style.css">
</head>
<body>
    <div id="container">
        <header id="header">
            <h1>사이트 제목</h1>
        </header>
        <div id="contents">
            <h2>본문</h2>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure provident velit ullam repellendus, vel suscipit iusto error eos nostrum ab saepe voluptates eaque. Ex reprehenderit voluptate esse optio minus nulla.</p>
        </div>
        <div id="sidebar">
            <h2>사이드바</h2>
            <ul>
                <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit sit vero consequatur quidem molestiae natus. Aliquam id iure nulla enim quidem dolorem necessitatibus hic numquam temporibus eius nam, dolores voluptatem!</li>
            </ul>
        </div>
        <footer id="footer">
            <h2>푸터</h2>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt at quo sequi tenetur voluptatum ad ab aperiam adipisci, minima perferendis animi, nostrum et deleniti? Eum tempora impedit adipisci modi praesentium!</p>
        </footer>
    </div>
</body>
</html>
#container {
    width: 1000px;
    margin: 0 auto;
}

header {
    padding: 20px;
    border: 1px solid gray;
    background-color: deeppink;
    margin-bottom: 20px;
}

#contents {
    padding: 20px;
    width: 700px;
    background-color: deepskyblue;
    border: 1px solid gray;
    float: left;
}

#sidebar {
    padding: 20px;
    width: 200px;
    background-color: gold;
    border: 1px solid gray;
    float: right;
    margin-bottom: 20px;
}

#footer {
    padding: 20px;
    background-color: greenyellow;
    border: 1px solid gray;
    clear: both;
}

6. 2단계레이아웃

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3단 레이아웃</title>
    <link rel="stylesheet" href="./css/layout.css">
</head>
<body>
    <div id="container">
        <header id="header">
            <h2>사이트 제목</h2>
        </header>
        <div id="left-sidebar">
            <h2>사이드바</h2>
            <ul>
                <li>항목1</li>
                <li>항목2</li>
                <li>항목3</li>
                <li>항목4</li>
            </ul>
        </div>
        <div id="contents">
            <h2>본문</h2>
            <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Deserunt, qui iure blanditiis facilis laborum amet! Sequi voluptatem quasi dolores dolore ipsum rem vitae, dolor nam deleniti pariatur voluptates sunt vero.</p>
            <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Deserunt, qui iure blanditiis facilis laborum amet! Sequi voluptatem quasi dolores dolore ipsum rem vitae, dolor nam deleniti pariatur voluptates sunt vero.</p>
            <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Deserunt, qui iure blanditiis facilis laborum amet! Sequi voluptatem quasi dolores dolore ipsum rem vitae, dolor nam deleniti pariatur voluptates sunt vero.</p>
        </div>
        <div id="right-sidebar">
            <h2>사이드바</h2>
            <ul>
                <li>항목1</li>
                <li>항목2</li>
                <li>항목3</li>
                <li>항목4</li>
            </ul>
        </div>
        <footer id="footer">
            <h2>푸터</h2>
            <p>저작권 정보</p>
            <p>연락처 등</p>
        </footer>
    </div>
</body>
</html>


#container {
    width: 1000px;
    margin: 0 auto;
}

div {
    padding: 20px;
    border: 1px solid gray;
}

#header {
    padding: 20px;
    background-color: deeppink;
    border: 1px solid gray;
    margin-bottom: 20px;
}

#left-sidebar {
    width: 150px;
    float: left;
    background-color: gold;
    margin-right: 20px;
}

#contents {
    width: 535px;
    float: left;
    background-color: deepskyblue;
    margin-bottom: 20px;
}

#right-sidebar {
    width: 150px;
    float: right;
    background-color: gold;
}

#footer {
    padding: 20px;
    border: 1px solid gray;
    background-color: greenyellow;
    clear: both;
}

7. 다단계레이아웃

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>다단 레이아웃</title>
    <style>
        div, h2, p { margin: 0; padding: 0; }
        h2 { padding: 0 0 20px; text-align: center; }
        div.col {
            text-align: justify;
            padding: 20px;
            background-color: gold;
            border: 3px solid red;

            column-count: 3;
            column-gap: 30px;
            column-rule: 3px dashed red;
        }

        .col > h2 { column-span: all; }
    </style>
</head>
<body>
    <div class="col">
        <h2>다단 레이아웃</h2>
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Provident tempora sapiente modi aspernatur. Ea quidem inventore cupiditate illo porro possimus, cumque rem voluptatum similique eum rerum, sed consectetur natus soluta. Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam, alias vitae libero cupiditate possimus molestiae facilis quod blanditiis deserunt fugiat, exercitationem adipisci veniam dolores, non soluta velit accusantium quia cumque! Lorem, ipsum dolor sit amet consectetur adipisicing elit. Molestiae eligendi natus fugit ipsam soluta consectetur est et rem voluptate quae iste nemo, culpa atque dolores doloribus tenetur. Nihil, qui temporibus? Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repellendus qui minima corporis? Voluptates cumque, numquam culpa quidem ipsum facilis aut, iste saepe harum, totam nihil exercitationem expedita maxime laborum eligendi.</p>
    </div>
</body>
</html>

 

8. 플렉스 레이아웃1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>플렉스 레이아웃1</title>
    <style>
        #container {
            width: 1000px;
            height: 500px;
            margin: 0 auto;
            border: 3px solid red;
            display: flex;
            /* 기본값 nowrap */
            /* flex-wrap: wrap; */
            /* flex-wrap: wrap-reverse; */

            /* flex-direction: row; */
            /* flex-direction: row-reverse; */
            /* flex-direction: column; */
            /* flex-direction: column-reverse; */
            flex-flow: row-reverse nowrap;
        }

        #container > div {
            width: 400px;
            border: 1px solid black;
            background-color: gold;
        }

        span {
            font-size: 50px;
            font-weight: bold;
            padding: 20px;
        }
    </style>
</head>
<body>
    <h2>플렉스 레이아웃1</h2>
    <div id="container">
        <div id="box1"><span>1</span></div>
        <div id="box2"><span>2</span></div>
        <div id="box3"><span>3</span></div>
    </div>
</body>
</html>

9. 플렉스 레이아웃2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>플랙스레이아웃2</title>
    <style>
        .wrapper {
            width: 500px;
            height: 200px;
            margin: 0 auto;
            border: 3px solid red;
        }

        .wrapper div {
            width: 50px;
            border: 2px solid black;
            background-color: gold;
        }

        #container {
            display: flex;
            /* justify-content: flex-start; 기본값 */
            /* justify-content: flex-end; */
            /* justify-content: center; */
            /* justify-content: space-between; */
            /* justify-content: space-around; */

            /* align-items: stretch; 기본값 */
            align-items: flex-start;
            /* align-items: flex-end; */
            /* align-items: center; */
            /* align-items: baseline; */

            #box2 { align-self: center; }

            #box1 { order: 4; }
            #box2 { order: 1; }
            #box3 { order: 5; }
            #box4 { order: 2; }
            #box5 { order: 3; }
            
        }
    </style>
</head>
<body>
    <h2>플렉스레이아웃2</h2>
    <div id="container" class="wrapper">
        <div id="box1">
            <p>1</p>
        </div>
        <div id="box2">
            <p>2</p>
        </div>
        <div id="box3">
            <p>3</p>
        </div>
        <div id="box4">
            <p style="font-size: 50px;">4</p>
        </div>
        <div id="box5">
            <p>5</p>
        </div>
    </div>
</body>
</html>

10. 플렉스 레이아웃3

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>플렉스 레이아웃3</title>
    <style>
        .wrapper {
            width: 500px;
            height: 200px;
            margin: 0 auto;
            border: 3px solid red;
        }
        .wrapper div {
            width: 150px;
            border: 2px solid black;
            background-color: gold;
        }
        #container {
            display: flex;
            flex-wrap: wrap;
            /* align-content: stretch; */
            /* align-content: flex-start; */
            /* align-content: flex-end; */
            /* align-content: center; */
            /* align-content: space-between; */
            align-content: space-around;
        }
        

    </style>
</head>
<body>
    <h2>플렉스 레이아웃3</h2>
    <div id="container" class="wrapper">
        <div>
            <p>1</p>
        </div>
        <div>
            <p>2</p>
        </div>
        <div>
            <p>3</p>
        </div>
        <div>
            <p>4</p>
        </div>
        <div>
            <p>5</p>
        </div>
    </div>
</body>
</html>

'웹 개발' 카테고리의 다른 글

과제- 웹 사이트 CSS 적용 하기(뉴스기사,즐겨찾기,이력서,로그인,회원가입)  (2) 2024.04.12
14. 웹 개발을 위한 기본 CSS 태그 모음 & 요약 정리 5  (0) 2024.04.12
12. CSS레이아웃과 스타일링  (1) 2024.04.12
11.웹 개발을 위한 기본 CSS 태그 모음 & 요약 정리 3  (1) 2024.04.09
10. CSS 배경과 박스 모델  (0) 2024.04.09

관련글

티스토리툴바