WEB FE/CSS

[CSS] background / position (z-index)

heehminh 2023. 1. 29. 21:59
반응형

1- background

a. background-color

요소의 배경에 색상을 지정한다.

background-color: #f12db0 | rgb(122,122,123);

b. background-image

요소의 배경 이미지를 한 개, 혹은 여러개 지정한다.

background-image: url("이미지 경로");

이미지 중첩하기

background-image: url(”이미지 경로”), url(”이미지 경로”);

백그라운드 이미지는 한개만 지정할 수도 있지만, 여러개의 이미지를 중첩시키는 것도 가능하다. 앞에 있는 것이 가장 위에 깔리고, 뒤에 있는 것이 아래에 깔리게 된다.

 

그라데이션 배경 만들기 (linear-gradient, radial-gradient, conic-gradient)

/* 방향(생략가능), 시작색상, 종료색상 */
background-image: liner-gradient(to left, #ebfc80, #00807e);

c. background-position

요소의 배경 이미지의 위치를 지정한다.

사용할 수 있는 키워드 - top bottom left right center

/* 키워드 다섯가지를 조합해서 위치를 지정한다 */
background-position: center;
background-position: top right;
background-position: left;
background-position: bottom center;

/* x축과 y축의 수치를 직접 입력한다 */
background-position: 50px 24px; (공백으로 띄워줌);

d. background-repeat

요소의 배경 이미지의 반복 여부와 반복 방향을 지정한다.

background-repeat: no-repeat | repeat(기본값) | repeat-x | repeat-y;

e. background-size

요소의 배경 이미지의 크기를 지정한다.

background-size: cover | auto(기본값) | contain;

/* 픽셀을 직접 입력한다 */
background-size: 200px 120px;

f. background-attachment

요소의 배경 이미지의 스크롤 여부를 지정한다.

background-attachment: fixed | scroll(기본값) | local(내부 스크롤 적용);

g. background 단축 속성

background 관련 속성들은 한번에 지정할 수 있다.

/* color imageUrl repeat position/size attachment */
background: red url("이미지 경로") no-repeat center/cover fixed;

h. object-fit

<img> 나 <video> 등 대체요소의 내용이 지정된 규격과 맞춰지는 방식을 지정한다.

object-fit: cover | fill(기본값) | contain | none;

i. object-position

<img> 나 <video> 등 대체요소의 콘텐츠 정렬 방식을 지정한다.

object-position: center top;
object-position: 100px 50px;

2- calc()

css에서도 함수를 사용할 수 있다.

calc() 라는 함수를 이용하면, 괄호 안의 사칙연산을 수행한 결과를 속성값으로 상요할 수 있다. calc() 함수 사용시 덧셈, 뺄셈 기호 앞 뒤에 반드시 공백을 주어야 한다.

.item1 {
	background: red;
	width: calc(50px + 50px);
	height: 50px;
}

3- position

positon이란 HTML 요소가 배치되는 방식을 결정하는 속성이다.

속성값 (어떤 속성값을 입력했느냐에 따라 top, left, bottom, right 속성을 이용해 좌표값을 변경하는 방식이 달라진다.)

a. position의 속성값

  1. position: staitc (기본값): 문서상 원래 있어야 하는 위치에 배치된다. 위치 조정이 불가능한 기본 HTML 요소의 상태이다. top, left, bottom, right 속성을 사용할 수 없다.
  2. position: relative: 원래 있던 자리를 기준으로 요소의 위치를 조정할 수 있다. top, left, bottom, right 속성을 사용할 수 있다.
  3. position: absolute: 대상 요소의 부모 중 relative가 적용된 요소를 찾아서 절대 좌표의 기준으로 삼는다. 만약 relative가 적용된 요소가 없다면, HTML의 바디 전체를 기준으로 잡는다. top, left, bottom, right 속성을 사용할 수 있다. 절대 좌표를 기준으로 요소의 위치를 조정할 수 있다.
  4. position: fixed: viewport를 기준으로 요소의 위치를 조정할 수 있다. 스크롤을 내려도 사라지지 않고 화면 어딘가에 고정할 수 있다. top, left, bottom, right 속성을 사용할 수 있다.
  5. position: sticky: 부모 요소의 좌표 기준으로 요소의 위치를 조정할 수 있다. 스크롤이 내려가지 않았을 때는 static처럼 작동하다가 해당 요소의 위치 아래로 스크롤이 내려가면 지정한 좌표에 고정시켜준다.

b. z-index

position을 이용해 요소의 위치를 옮기다 보면 여러개의 요소가 겹쳐지는 경우가 생긴다. 이런 경우 2차원 공간을 3차원으로 확장해 z축을 만들어 사용한다.

z-index: auto(기본값)
z-index: 1
z-index: 9990

position이 지정되어 있지 않거나 static인 경우 z-index를 사용할 수 없다.

반응형