position 속성
static : 기본값
position : static; 기본값으로 position을 지정하지 않으면 요소가 차례대로 쌓인다.
absolute : 위치 상 부모 요소를 기준
부모 요소 기준으로 top, bottom, left, right 만큼의 이동할 위치가 결정된다.
이미 위치가 정해져 있는 요소의 부모가 있는 위치에서부터 위치가 움직인다고 생각하자.
relative : 요소 기준으로 지정
top, bottom, left, right 로 위치 조절이 가능하다.
static 과의 차이점은 좌표(top, bottom, left, right)의 동작 여부이다. 쉽게 static은 위치를 지정하지 않은 것이다.
fixed : 브라우저 기준
요소가 항상 고정된 위치에 있게 하는 요소이다. 스크롤을 내려도 무관하게 고정되어있고,
홈페이지에 상단 로그인 메뉴나 하단 포스트 메뉴에서 사용하는 것을 쉽게 볼 수 있다.
See the Pen Untitled by Jung ji young (@stop-zero) on CodePen.
요소 쌓임 순서
1. 요소에 position 속성의 값이 있는 경우 위에 쌓임.(기본값 static 제외)
2. 1번 조건이 같을 경우, z-index 속성의 값이 클수록 위에 쌓인다.
3. 1번과 2번의 조건까지 같은 경우, HTML의 다음 구조일 수록 위에 쌓임.
z-index : 숫자가 클수록 앞에 위치
auto : 부모 요소와 동일한 쌓임 정도
숫자 : 숫자가 클수록 위에 쌓임
See the Pen Untitled by Jung ji young (@stop-zero) on CodePen.
background-color : 배경 색상
background: linear-gradient(색1, 색2, 색3, ,,) : 그라데이션 컬러
background의 경우 띄어쓰기로 다양한 옵션을 추가할 수 있다.
background: color image reapeat position/size ...;
See the Pen background color by Jung ji young (@stop-zero) on CodePen.
background-image : 배경 이미지 삽입
추가적으로 알려주신 <img> vs <background-image>
https://inseq.co.kr/ko/bbs/i-24/show.do?seq=19&searchCl1=&searchMulti=&searchKeyword=
인시퀀스
웹 서비스 개발 전문가 그룹
inseq.co.kr
background-repeat : 배경 이미지 반복
- repeat : 수직, 수평 반복
- repeat-x : 이미지 수평 반복
- repeat-y : 이미지 수직 반복
- no-repeat : 반복 없음
See the Pen background position&repeat by Jung ji young (@stop-zero) on CodePen.
background-position : 배경 이미지 위치
- top, bottom, left, right, center 방향으로 조절 가능
- p, em, rem, 등 단위로 지정
See the Pen background-position by Jung ji young (@stop-zero) on CodePen.
background-size : 배경 이미지 크기
- auto : 실제 크기
- px, em, rem 등 단위로 지정
- cover : 넓은 너비에 맞춤
- contain : 짧은 너비에 맞춤
See the Pen background-position by Jung ji young (@stop-zero) on CodePen.
backgroun-attachment : 배경 이미지 스크롤 할 때 움직일거야 말거야
- scroll : 이미지가 같이 스크롤
- fixed : 스크롤 해도 이미지는 고정
See the Pen background-attachment by Jung ji young (@stop-zero) on CodePen.
❗다시 봐
- position 속성 쓸 때 부모 자식 관계 잘 생각하고 쓰기
- img vs background-image 정리
'[Study] FE > HTML & CSS & JS' 카테고리의 다른 글
[포스코X코딩온] CSS_06 Transition/Transform/Animation (0) | 2023.03.09 |
---|---|
[포스코X코딩온] CSS_05 flex (0) | 2023.03.07 |
[포스코X코딩온] CSS_03 속성 정리 (0) | 2023.03.06 |
[포스코X코딩온] CSS_02 선택자 (0) | 2023.03.05 |
[포스코X코딩온] CSS_01 적용 방식 (0) | 2023.03.03 |