포지션

치로·2024년 8월 14일
CSS

1. 엘리먼트의 위치를 지정하는 방법

  • static
  • relative
  • absolute
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html {
            border: 1px solid gray;
        }
        div {
            border: 5px solid tomato;
            margin: 10px;
        }
        #me {
            position: relative;
            left: 100px;
            top: 100px;
        }
    </style>
</head>
<body>
    <div id="other">other</div>
        <div id="parent">
            parent
            <div id="me">me</div>
            </div>
        </div>
</body>
</html>

2. 위치 값

  • bottom vs top : top이 우선
  • right vs left : left가 우선
  • css에서 위치는 정적으로 존재, static하게 위치
  • me 기준으로 부모 엘리먼트 안에 존재해야 하기 때문에 left, top 등등의 옵션이 무시됨
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    #parent, #other, #grand {
        border: 5px solid tomato;
    }
    #me {
        background-color: black;
        color: white;
        /* absolute로 수정 시 html 태그 기준으로 절대값이 들어감 */
        position: absolute;
        left: 0px;
        top: 0px;
    }
    #grand {
        /* static이 아닌 부모가 나타날때까지 독립적으로 행동하다가, static이 아니 부모가 나타나면 다시 그 부모에 종속적임*/
        position: relative;
    }
    </style>
</head>
<body>
    <div id="other">other</div>
    <div id="grand">
        grand
        <div id="parend">
            parent
            <div id="me">me</div>
        </div>
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            padding-top: 30px;
        }
        #parent, #other{
            border: 5px solid tomato;
        }
        #large{
            height: 10000px;
            background-color: tomato;
        }
        #me{
            background-color: black;
            color: white;
            position: fixed;
            left: 0px; 
            top: 0px;
            width: 100%;
            height: 30px;
            text-align: center;

            /*bottom: 0px;
            width: 100%;
            text-align: center;*/
        }

    </style>
</head>
<body>
    <div id="other">other</div>
    <div id="parent">
        parent
        <div id="me">me</div>
    </div>
    <div id="large">large</div>
</body>
</html>

multi-column

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .column {
            column-count: 4;
            /*column-width: 200px;*/
            text-align: justify;
            column-gap: 30px;
            column-rule-style: solid;
            column-rule-color: tomato;
        }
        h1 {
            column-span: all;
        }
    </style>
</head>
<body>
    <div class="column">
        <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
        <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
        <h1>It has roots in a piece of classical Latin literature from 45 BC</h1>
        <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
        <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
        <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
        <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
    </div>
</body>
</html>
profile
치로
이전 포스트

float

다음 포스트

link와 import

0개의 댓글