[CSS] 배경과 배치

배경

1. 요소의 배경 색상 (background-color)

background-color: red;

• color처럼 rgb 등 여러 가지 방법이 있습니다.

2. 배경 이미지 삽입 (background-image)

background-image: url("경로");

• 경로 지정을 해줘야 한다.
• 요소의 크기가 이미지의 크기보다 크면 반복 출력 (바둑판식 배열)

3. 배경 이미지 반복 제어 (background-repeat)

background-repeat: no-repeat;

value

• no-repeat : 반복 없음
• repeat : 수평, 수직 반복
• repeat-x : 수평 반복
• repeat-y : 수직 반복

4. 배경 이미지 위치 (background-position)

background-position: center;

value

• top
• bottom
• left
• right
• center

5. 배경 이미지 크기 (background-size)

background-size: 100px 100px; 
/*가로 또는 세로 너비 값이 변경되며, 다시 비율을 계산하여 맞춰야 한다. */

background-size: 100px; 
/* 한쪽 사이즈만 명시하면 다른 방향은 비율에 맞게 조절됨*/

value

• auto : 이미지의 실제 크기
• cover : 비율을 유지하면서, 더 넓은 너비에 맞춰짐
• contain : 비율을 유지하면서, 더 좁은 너비에 맞춰짐
• 크기 값 : px 등

5. 배경 이미지 스크롤 (background-attachment)

background-attachment: scroll;

value

• scroll : 이미지가 함께 스크롤된다.
• fixed : 이미지는 뷰 포트에 고정(렌더링 영역)

---

배치

※ 요소를 배치할 때, 기준을 먼저 잡고, 위치를 설정해야 한다.

→ position과 함께 사용하지 않으면 위치 설정 의미가 없다.

1. position

요소의 위치를 저장할 때, 기준을 설정

position: fixed;

value

• static : 기본값
• relative : 요소가 자기 자신이 기준 (부모 요소에 주로 사용)
• absolute : 위치 상 부모 요소 기준, 위치 상 부모 요소를 기준으로 배치하기 때문에, 다른 요소와의 관계 배치와 무관
• fixed : 뷰 포트 기준 (뷰 포트로 기준이 이미 정해져 있기 때문에 부모 요소에 따로 기준을 주지  않아도 된다.)

※ relative는 정상적인 배치에 어긋나 보인다. 따라서 relative를 이용해서 개발하는 경우는 드물다.

 

※ position 속성의 값이 absolute, fixed 인 경우, display속성이 자동으로 block으로 변경

2. top, bottom, left, right

top: 10px;
bottom: 10px;
left: 10px;
right: 10px;

→ 위치를 설정하는 값

 

요소가 쌓이는 순서

※ 쌓이는 순서 : 우리가 화면에서 볼 수 있는 어떤 요소가 사용자와 더 가깝게 있는지(더 위에 쌓여있는지)

 

순서(조건)

1. 요소 position속성과 값이 있는 경우 더 위에 쌓인다.

• 단, 기본값(static) 제외

2. 모든 요소에 position속성과 값이 있는 경우, z-index 값이 높으면 더 위에 쌓인다

3. 1번과 2번 조건이 동일한 경우, HTML구조가 더 나중에 작성된 경우 더 위에 쌓인다.

▶ z-index

z-index: 1;

• 2번 조건 - 요소가 쌓이는 순서
• 숫자 작성 :  숫자가 높으면 더 위에 쌓인다.
• 기본 값은 0

- 사용시 중요한 점 : 값을 1부터 입력, 코드 관리를 위해 순차적으로 작성하는 것이 좋다.