[CSS] display & position

---

display

inline

안에 내용의 size에 맞게 변환 한줄에 나옴, 안에 내용이 없으면 안나옴
기본 <span>가 이에 해당한다.

<!-- Block level -->
<!-- 한줄에 하나 -->
    <div></div>
    <div></div>
    <div></div>

<!-- Inline level -->
<!-- 한줄에 여러개 -->

    <span></span>
    <span></span>
    <span></span>

		div, span{
            width: 80px;
            height: 80px;
            margin: 20px;
            color: white;
        }

        div {
            background: red;
        }
        span{
            background: blue;
        }

span에 숫자를 넣으면 나옴.

• html

    <div></div>
    <div></div>
    <div></div>

    <span>1</span>
    <span>2</span>
    <span>3</span>

block

안에 내용의 size에 상관없이 box가 나옴. 한줄에 하나만 나옴.
일반적인 <div> 를 이야기 한다.

• html

	<div></div>
    <div></div>
    <div></div>

• css

		div{
            width: 80px;
            height: 80px;
            margin: 20px;
            color: white;
        }

        div {
            background: red;
        }

inline-block

안에 내용의 size에 상관없이 box가 나옴.. 한줄에 다 나옴

    <div></div>
    <div></div>
    <div></div>

    <span>1</span>
    <span>2</span>
    <span>3</span>

		div, span{
            width: 80px;
            height: 80px;
            margin: 20px;
            color: white;
        }

        div {
            background: red;
            display: inline-block;
        }
        span{
            background: blue;
            display: inline-block;
        }

css에 display 속성을 바꿔서 <div>를 <span>처럼, <span>을 <div>처럼 사용도 가능하다.

---

position

static

기본값으로 html상에 표시된 대로 보여지는 기본 value값이다. position을 별도로 명기 안해주면 static 이다.

• html

    <div></div>
    <div></div>
    <div></div>


    <span></span>
    <span></span>
    <span></span>

<article class="container">
    <div></div>
    <div class="box">I'm box</div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</article>

• css

		.container{
            background: yellow;
            left: 20px;
            top: 20px;
            position: static;
        }
        .box{
            background: blue;
            left: 20px;
            top: 20px;
        }

relative

내가 원래 있어야할 자리에서 상대적으로 이동하는 것

• html

<article class="container">
    <div></div>
    <div class="box">I'm box</div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</article>

• css

		.container{
            background: yellow;
            left: 20px;
            top: 20px;
        }
        .box{
            background: blue;
            left: 20px;
            top: 20px;
            position: relative;
        }

absolute

내가 담겨있는 가장 가까운 box 안(상위항목)에서 위치 이동. 절대 좌표

• html

    <div></div>
    <div></div>
    <div></div>


    <span></span>
    <span></span>
    <span></span>

<article class="container">
    <div></div>
    <div class="box">I'm box</div>
    <div></div>
    <div></div>
</article>

• css

		.container{
            background: yellow;
            left: 20px;
            top: 20px;
            position: relative;
        }
        .box{
            background: blue;
            left: 20px;
            top: 20px;
            position: absolute;

주의할점

직접 해보니까 바로 상위 항목에 position 지정이 없으면 계속 올라가서 지정되는듯 하다. container에 position을 입력 안하니까 아래 그림처럼 전체 화면에서 absolute가 발생한다.

fixed

상자에서 완전히 벗어나서 윈도우 페이지 안에서 움직이는 것.

• html

    <div></div>
    <div></div>
    <div></div>


    <span></span>
    <span></span>
    <span></span>

<article class="container">
    <div></div>
    <div class="box">I'm box</div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</article>

• css

		.container{
            background: yellow;
            left: 20px;
            top: 20px;
            position: relative;
        }
        .box{
            background: blue;
            left: 20px;
            top: 20px;
            position: fixed;

sticky

원래 있던 자리에 위치해 있는데 스크롤링해도 원래 있던 자리에 붙이있는 것을 말한다.

• html

    <div></div>
    <div></div>
    <div></div>


    <span></span>
    <span></span>
    <span></span>

<article class="container">
    <div></div>
    <div class="box">I'm box</div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</article>

• css

		.container{
            background: yellow;
            left: 20px;
            top: 20px;
            position: relative;
        }
        .box{
            background: blue;
            left: 20px;
            top: 20px;
            position: sticky;

출처

https://www.youtube.com/watch?v=jWh3IbgMUPI