position 뜻 float과 position 모두 "띄운다" 는 뜻인데 float 을 사용했을 때 왼쪽, 오른쪽으로만 배치가 가능했다면, position 을 사용하면 자유롭게 좌표값에 따라 위치를 조절하여 배치가 가능하다. position 종류 static : 기본값 (좌표설정안됨, 원래 위치) relative : 자기 자신 기준으로 좌표 설정 absolute : 웹 브라우저 왼쪽 상단 기준으로 좌표 설정 (부모 relative 있으면 부모 기준) fixed : 웹 브라우저 왼쪽 상단 기준으로 좌표 설정 + 스크롤시 위치 고정 sticky : relative 처럼 배치 → 스크롤시 fixed 처럼 작동 좌표 top, bottom, left, right position : relative 현재 내 위치에서 위치 조정 a b
![[css 8.] position 으로 요소 배치하기 + 고정하기](https://mblogthumb-phinf.pstatic.net/MjAyNDA0MjJfNzkg/MDAxNzEzNzQ1MTg2NTgz.Hs3JkMw6EV_ITzn9ZjvniHcL7gCmx2jECR1K1wthL_og.2PTxWBF8NjpGAIhpyoazRQvsltJrNGqHtR2UjiTqXIEg.JPEG/%C1%A6%B8%F1%C0%BB-%C0%D4%B7%C2%C7%D8%C1%D6%BC%BC%BF%E4__%BA%B9%BB%E7%BA%BB-019.jpg?type=w2)
#
cssposition
#
position차이
#
position속성기준
#
position속성
#
position고정
#
positionsticky활용법
#
positionfloat
#
positionfixed
#
positionabsolute기준
#
header고정시키는법
#
zindex쓰는방법
![[공유] notion 으로 10분만에 포트폴리오 사이트 제작하기 (+단축키)](https://mblogthumb-phinf.pstatic.net/MjAyNDA0MTBfMTgz/MDAxNzEyNjc3NzM1MDE4.vA0_InQlDJeni-nGubGS7FANRfLvgyNFZyjwue6fILcg.Xc00TChWowWOBwMbn6S6HI0nd4bN19fBiUNGA2rFbU8g.JPEG/%C1%A6%B8%F1%C0%BB-%C0%D4%B7%C2%C7%D8%C1%D6%BC%BC%BF%E4__%BA%B9%BB%E7%BA%BB-003.jpg?type=w2)
![[css 11.] transform 속성으로 이동, 회전, 확대, 기울이기 효과 (+다중사용)](https://mblogthumb-phinf.pstatic.net/MjAyNDA0MjNfMTEw/MDAxNzEzODMxNjc3Mjk4.R70Svy0_XiZsJQPx5ep3tEZLytnK4Y6ligewY4e3a38g.Fa04tZJEZz-s7AYHdqNRwTF93BRwbV1oZFSuOstxcnUg.JPEG/%C1%A6%B8%F1%C0%BB_%C0%D4%B7%C2%C7%D8%C1%D6%BC%BC%BF%E4__%BA%B9%BB%E7%BA%BB-022.jpg?type=w2)
![[css 12.] js 없이 animation(애니메이션) 적용방법, 속성, @keyframe 설정](https://mblogthumb-phinf.pstatic.net/MjAyNDA0MjRfODIg/MDAxNzEzOTMyMDUxOTY5.wkJHtsOve9_v4D7UTXY5yocSszZ5FD51eYR7ajBXj3kg.uOHwfMo7AvomJDNsY6q4xWml1V223H3S_6J9zgmva9Ag.JPEG/%C1%A6%B8%F1%C0%BB-%C0%D4%B7%C2%C7%D8%C1%D6%BC%BC%BF%E4__%BA%B9%BB%E7%BA%BB-023.jpg?type=w2)
![[ITQ] 시험 원서접수 & 합격기준 & 기출문제 (OA MASTER란?)](https://mblogthumb-phinf.pstatic.net/MjAyNDA1MDVfMjgz/MDAxNzE0OTExNTEyODUx.WgfXm1QlW2imKULuHPpbwAaNaH2k_TwA7MuqymPIKIsg.snVmBKoGY2NjrmVL2-odzOkXfac7woDs55ZCRjr7ezog.JPEG/%C1%A6%B8%F1%C0%BB_%C0%D4%B7%C2%C7%D8%C1%D6%BC%BC%BF%E4__%BA%B9%BB%E7%BA%BB_%281%29-002_%281%29.jpg?type=w2)
![[javascript 10.] 자바스크립트 함수 종류 (콜백, 즉시실행, 타이머)](https://mblogthumb-phinf.pstatic.net/MjAyNDA2MjBfMTgg/MDAxNzE4ODg4NDQ2MDg0.xSB2hZ_FPzyZYu_e6Lr1rUGL47tO-evI0z7D0PzjL5wg.0Oe6Jc7hQZMAy9RMLpP2Y5R2QXaD98VK1oJVTauCzt8g.JPEG/%C1%A6%B8%F1%C0%BB-%C0%D4%B7%C2%C7%D8%C1%D6%BC%BC%BF%E4__%BA%B9%BB%E7%BA%BB-_1_-010.jpg?type=w2)