[포스코X코딩온] CSS_04 position & backgound

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= 

인시퀀스

 

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 정리