[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 24회차 미션
position
- 요소의 위치 지정 방법의 유형(기준)을 설정
- 속성 값
- static : 유형(기준) 없음 / 배치 불가능 (기본값)
- relative : 요소 자신을 기준으로 배치
- absolute : 위치 상 부모 요소를 기준으로 배치
- fixed : 브라우저 (뷰포트) 를 기준으로 배치
- sticky : 스크롤 영역 기준으로 배치
top
- 요소의 position 기준에 맞는 '위쪽'에서의 거리 (위치)를 설정
- auto : 브라우저가 계산 (기본값 : auto)
- 단위 : px, em, cm 등 단위로 지정 (기본값 0)
- % : 부모 (위치 상의 부모(조상)) 요소의 세로 너비의 비율로 지정 (음수 값 허용)
bottom
- 요소의 position 기준에 맞는 '아래쪽' 에서의 거리(위치)를 설정
- auto : 브라우저가 계산 (기본값 : auto)
- 단위 : px, em, cm 등 단위로 지정 (기본값 0)
- % : 부모 (위치 상의 부모(조상)) 요소의 세로 너비의 비율로 지정 (음수 값 허용)
left
- 요소의 position 기준에 맞는 '왼쪽' 에서의 거리(위치)를 설정
- auto : 브라우저가 계산 (기본값 : auto)
- 단위 : px, em, cm 등 단위로 지정 (기본값 0)
- % : 부모 (위치 상의 부모(조상)) 요소의 가로 너비의 비율로 지정 (음수 값 허용)
right
- 요소의 position 기준에 맞는 '오른쪽' 에서의 거리(위치)를 설정
- auto : 브라우저가 계산 (기본값 : auto)
- 단위 : px, em, cm 등 단위로 지정 (기본값 0)
- % : 부모 (위치 상의 부모(조상)) 요소의 가로 너비의 비율로 지정 (음수 값 허용)
position 속성 값 - relative
- 요소 자기 자신을 기준으로 배치
- 주변에 있는 형제 요소에 영향을 받으므로 조심해서 사용해야 함
- 실제로는 원래 있었던 위치에 있으며, 이동한 요소는 홀로그램이라고 생각하면 됨
div {
position: relative;
top: 20px; /* 자신의 위치에서 위에서 20px */
left: 50px; /* 자신의 위치에서 왼쪽에서 50px */
}
position 속성값 - absolute
- 위치 상 부모 요소를 기준으로 배치
- HTML의 부모요소 (구조 상 부모요소) 와 상관이 없고, 기준이 될 부모요소에 position 속성을 추가해줘야 자식 요소의 absolute가 인식을 하고, 이를 기준으로 움직이게 됨.
- 만약, 기준이 될 부모요소에 position을 정하지 않았다면, body, html 쪽으로 점점 올라가서 window(뷰포트)를 기준으로 삼게 되고, 위치가 화면에서 고정이 된다.
- 주로 요소를 배치할 때 absolute를 사용하는 것을 권장함.
<div class="parent">
<div class="child"></div>
</div>
.parent {
position: relative /* 꼭 기준을 설정하려면 position을 써야함 (static 제외) */
}
.child {
position: absolute; /* 공중에 붕 뜬다. */
top: 50px; /* 부모 요소에서 위쪽에서 50px 배치 */
left: 50px; /* 부모 요소에서 왼쪽에서 50px 배치*/
}
프론트엔드 올인원 패키지 바로가기 -> https://bit.ly/3m0t8GM
Author And Source
이 문제에 관하여([패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 24회차 미션), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@ji-yeong/패스트캠퍼스-수강-후기-프론트엔드-인강-100-환급-챌린지-24회차-미션저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)