HTML / CSS - Position

devmoonsh·2020년 7월 13일
0

HTML/CSS

목록 보기
1/5
post-thumbnail

위코드의 첫번째 과제인 자기소개 페이지를 만들다가 css의 position 속성이 헷갈려서 다시 한번 정리해야겠다는 생각이 들었다. 여기서 다룰 position의 속성은 static, relative, absolute, fixed, sticky이다.

1. static

!codepen[sang-ho-moon/embed/MWKBVXa?height=400&theme-id=dark&default-tab=html,result]

기본적으로 모든 태그들은 position: static;인 상태이다. 따라서 css에 position 값을 따로 지정하지 않아도 된다.

div tag는 block 속성이므로 위에서 아래로,
span tag는 inline 속성이므로 왼쪽에서 오른쪽으로 쌓인다.


2. relative

!codepen[sang-ho-moon/embed/xxZJWyr?height=400&theme-id=dark&default-tab=html,result]

이번에는 css에서 박스 전체를 감싸고 있는 노란색 container와 I'm box라고 씌여있는 파란색 박스 속성에 다음과 같은 코드를 동일하게 추가했다.

left: 20px;
top: 20px;
position: relative;

둘 다 원래 있던 자리에서, 왼쪽에서 20px, 위에서 20px만큼 이동해 있는 모습을 볼 수 있다.
여기서 position 값을 relative로 지정하지 않으면 left, top 20px은 먹히지 않는다.


3. absolute

!codepen[sang-ho-moon/embed/VweBXOd?height=400&theme-id=dark&default-tab=html,result]

다음으로, I'm box의 position을 absolute로 변경해 보았다.

위 화면을 보면, 원래 있어야 할 자리가 기준이 아니라, I'm box를 감싸고 있는 부모요소, container를 기준으로 위에서 20px, 왼쪽에서 20px만큼 이동한 것을 볼 수 있다.

position이 relative였을 때는 원래 있어야할 자리만큼의 영역이 유지되었으나, absolute로 바꾸는 순간 원래 있어야할 자리의 영역이 없어진 것도 확인할 수 있었다.


4. fixed

!codepen[sang-ho-moon/embed/vYLajEV?height=400&theme-id=dark&default-tab=html,result]

그리고 I'm box의 position 속성을 fixed로 변경해 보았다.

위 화면에서 보이는 대로, I'm box의 위치는 container의 위치와 상관없이, window 내에서 왼쪽으로 20px, 위에서 20px 만큼 떨어져 있다.

또 스크롤을 내려보면 항상 같은 자리에 고정되어 있는 것을 볼 수 있다.


5. sticky

!codepen[sang-ho-moon/embed/abdjGdV?height=400&theme-id=dark&default-tab=html,result]

마지막으로 sticky는 container 안에 들어오면서, 스크롤을 내려도 원래 위치에 고정되는 특성을 가진다.



css는 이렇게 쉬운 예제로 정리하면 참 쉽게 느껴지는데, 막상 실전에서 코드를 작성하다 보면 뒤죽박죽 되어버리는 느낌이다..


Ref.
https://www.zerocho.com/category/CSS/post/5864f3b59f1dc000182d3ea1
https://www.youtube.com/watch?v=jWh3IbgMUPI

profile
Junior front-end developer

0개의 댓글