이 포스팅은 PC로 작성되었습니다.
모바일로 보시는 분들에게는 가끔
줄 바꿈이 어색하게 보일 수 있습니다.
지난 포스트
CSS 포지션 absolute
이 포스팅은 PC로 작성되었습니다. 모바일로 보시는 분들에게는 가끔 줄 바꿈이 어색하게 보일 수 있습니다. 지난 포스트 CSS 포지션 static과 relative 이 포스팅은 PC로 작성되었습니다. 모바일로
gogogameboy.tistory.com
지난 포스트에 이어 이번에도 CSS의 포지션과 관련된 공부를 하겠습니다.
이번에 배울 것은 fixed입니다.
position: fixed
위의 소스 코드는 PC에서 드래그 후,
ctrl+x로 잘라내서 다른 곳으로 붙여넣기가 가능합니다.
ctrl+c(복사)는 불가능합니다.
CSS에 position 값을 fixed로 주면 html 페이지 전체를 기준으로 박스의 위치를 지정할 수 있습니다.
그리고 웹페이지 화면에 스크롤을 이동해도 fixed로 고정된 박스는 움직이지 않습니다.
또, 부모 태그가 있다는 가정하에, position: absolute를 쓸 때처럼 position: fixed를 쓰면 부모의 소속이 아니게 됩니다.
absolute 때와 마찬가지로 부모와의 관계성이 끊기면서 id 값 me는 자신의 컨텐츠 만큼으로 크기가 작아집니다.
크기를 지정하고 싶으면 width와 height로 값을 넣어줍시다.
다음 포스트
CSS 웹사이트 레이아웃 기초
이 포스팅은 PC로 작성되었습니다. 모바일로 보시는 분들에게는 가끔 줄 바꿈이 어색하게 보일 수 있습니다. 지난 포스트 CSS 포지션 fixed 이 포스팅은 PC로 작성되었습니다. 모바일로 보시는 분
gogogameboy.tistory.com
이 글이 도움이 됐다면 하단의 ♡ 공감 버튼을 꾹 눌러서
빨간 하트♥로 만들어주세요.
(비로그인도 가능합니다!!)
지인에게 보여주고 싶은 글이었다면
공감 버튼 옆을 클릭해서 SNS에 공유해주세요.
댓글은 블로그 운영에 큰 힘이 됩니다.
'front-end > css' 카테고리의 다른 글
| CSS, flex-basis와 grow 그리고 shrink (0) | 2021.01.03 |
|---|---|
| CSS 웹사이트 레이아웃 기초 (0) | 2021.01.03 |
| CSS 포지션 absolute (0) | 2021.01.02 |
| CSS 포지션 static과 relative (0) | 2021.01.02 |
| CSS 마진 겹침 (0) | 2021.01.01 |
댓글