[CSS] - display / position / inline-block / static / relative / absolute / fixed / sticky

See the Pen css block / inline by hbkuk (@hbkuk) on CodePen.

 

 

 

div 태그와 span 태그의 display 타입을 각각 반대로 변경한다면?

div {
    background-color: red;
    display: inline;
}



span {
    background-color: blue;
    display: block;
}

 

 

div 태그의 display: inline-block으로 변경한다면? 

// block element가 한줄에 한개씩
display: block;

// block element가 한줄에 다 배치
display: inline-block;

한줄에 하나씩 배치되지 않고 1줄에 배치

 

---

 

 

See the Pen Untitled by hbkuk (@hbkuk) on CodePen.

 

 

 

container에 아래와 같이 지정해도 바꾸지 않는 이유는 

position의 기본 값인 static으로 설정되어 있어서 left와 top의 숫자만큼 이동하지 않음. 

 

.container{
    background-color:yellow;
    left:20px;
    top:20px;
}

 

position의 값을 relative로 변경해보자.

.container{
    background-color:yellow;
    left:20px;
    top:20px;
    position:relative;
}

 

 

파란색 박스도 position의 값을 relative를 통해 옮겨보자.

원래 있던 위치에서 top, left를 지정해준 값만큼 이동한 것을 확인.

.box {
    background-color: blue;
    left: 20px;
    top: 20px;
    position: relative;
}

 

파란색 박스도 position의 값을 absolute로 변경해보자.

 

상위에 있는 요소를 기준으로, 가장  가까있는 박스를 기준으로

 

top, left를 지정해준 값만큼 이동한 것을 확인.

 

 

파란색 박스도 position의 값을 fixed로 변경해보자.

 

웹 브라우저를 기준으로

 

top, left를 지정해준 값만큼 이동한 것을 확인. (스크롤을 내려도 같이 이동)

 

 

파란색 박스도 position의 값을 sticky로 변경해보자.

 

top, left를 지정해준 값을 무시하고

 

원래 자리에서 스크롤을 내려도 같이 이동