🔵 CSS - position

jea_i·2022년 2월 7일
목록 보기
12/19
<body>
    <!-- <div class="parent">
        <div class="child">
            TEXT
        </div>
    </div> -->
    <div class="box">
        <div class="item i1"></div>
        <div class="item i2"></div>
        <div class="item i3"></div>
    </div>
    <h2>위치와 좌표속성 알아보기</h2>
    <p>
        형제요소끼리 중첩되어야 하는 상황일때 포지션을 사용하는게 좋습니다.
        <br>여러 변수가 있기 때문에 신중하게 사용하고 레이아웃을 만드는 목적으로 사용하시면 안됩니다.
    </p>
    
    <h2>Position 관련 속성 알아보기</h2>
    <p>
        position은 역할적 위치를 의미하며 실제 좌표적 위치는 좌표속성을 통해 결정합니다.
        <hr>지정된 역할적 위치가 무엇이냐에 따라 같은 좌표값이라도 다른 위치에서 표현되기도 합니다.
        <hr>position은 레이아웃을 만드는 용도로 사용하지 말고 형제 요소간의 중첩이나, 고정된 영역에서 위치를 만들때만 position을 적용합시다.
    </p>
    <hr>
    <h3>position: absolute;</h3>
    <p>
        절대위치속성이라 하며 특정요소를 기준으로 좌표를 적용합니다.
        <br>특정요소를 지정하지 않으면 뷰포트를 기준으로 좌표가 적용됩니다.
        <br>좌표를 정하기 위한 기준을 특정하려면 "부모요소"에게 posr가 적용거나
        부모요소에게 pos의 값이 적용되어 있어야 합니다.
    </p>
    <ul>
        <li>abs는 레벨을 부유시키는 속성입니다. 요소가 부유되면 부모높이에 영향을 주지 않습니다.</li>
        <li>rel는 컨텐츠만 부유시키는 속성입니다. 요소가 부유되더라도 부모높이에 영향을 주고 있습니다.</li>
    </ul>
    <h3>position: relative;</h3>
    <p>
        상대위치속성이라 하며 현재위치를 기준으로 좌표를 적용합니다.
        <br>관계위치속성으로도 적용되는데 이때는 자식요소의 position:absolute의 기준이 되기도 합니다.
        <br>다른요소 위로 중첩되어야 할 때 rel를 적용합니다.
    </p>
    <hr>
    <div class="box">
        <div class="item yellow"></div>
        <div class="item orange"></div>
        <div class="item red"></div>
    </div>
</body>
<style>
div.parent{
    background-color: #ccc;
    width: 300px;
    /* 모든자식요소가 pos로 부유하게 된면 height를 적용해야 합니다. */
    height: 100px;
}
div.parent>.child{
    width: auto;
    width: 100px;
    height: 100px;
    background-color: #fc0;
    /* user agent */
    position: static;
    /*
    posa - 요소를 부유시키면서 최소너비상태로 만듭니다.
    posa를 적용하면 width, height를 적용해야 합니다.q   a
    */
    position: absolute;
}

div.box{
    background-color: #ccc;
    width: 600px;
    height: 400px;
    margin: 0 auto;
    position: relative;
}
div.box>.item{
    width: 200px; height: 200px;
}
div.box>.i1{
    background-color: #fc0;
    position: absolute;
    /* 좌표값 적용하기 */
    /* 특정요소 위쪽에서 100px 이동 */
    top: 100px;
    /* 특정요소 오른쪽에서 100px 이동 */
    right: 100px;
    /* 
    특정요소가 정해지지 않으면 뷰포트를 기준으로 정렬합니다. 
    position:relative가 부모를 기준으로 위치를 정하게 됩니다.
    */
}
div.box>.i2{
    background-color: #f90;
    position: absolute;
}
div.box>.i3{
    background-color: #f30;
    position: absolute;
}

div.box{
    outline: 2px solid #000;
    width: 600px;
    margin: 0 auto;
    position: relative;
}
div.box>.item{
    width: 100px;
    height: 100px;
}
div.box>.yellow{
    background-color: #fc0;
    position: absolute;
    /* uesr agent 그대로 */
    top: auto; bottom: auto; left: auto; right: auto;
    /* 둘 중 하나만 적용됨 ; 하나를 aoto로 지정 */
    top: auto; bottom: 50px;
    /* -를 주면 부모요소 밖으로 빠져나감 */
    top: auto; bottom: -50px;
}
div.box>.orange{
    background-color: #f90;
}
div.box>.red{
    background-color: #f00;
    position: relative;
}
</style>
jea_i
열정열정열정🔥
이전 포스트
🔵 CSS - 자식필터 선택자

다음 포스트
🔵 CSS - position

CSS

🔵 CSS - 자식필터 선택자

🔵 CSS - main page

0개의 댓글

관련 채용 정보
