7. 색상과 배경

색상 - HEX(16진수), rgb, rgba

• keyword: 이미 지정된 문자열 > red, blue, transparent(투명) …
• 키워드 외의 것을 사용하고 싶다면?
• #16진수 표기법(HEX color 표기법) : 0~9 + A~F
• # _ _ _ _ _ _ : 검정 f : 흰색
• rgb : 0, 0, 0 (0 ~ 255) : rgb(0,0,0), rgb(255,255,255)
• rgba(0, 0, 255, 0.5) : 기본값 1, 마지막 요소에 투명값 추가
• rgba(0, 0, 200, .5) 도 가능

opacity

• 요소의 불투명도를 설정
• 기본값 == 1
• 0.0 ~ 1.0 까지 가능
• 1 은 투명도가 전혀 없는 상태
• 0.0 은 보이지 않는 상태
• 0% ~ 100% 도 가능하지만 보통 숫자를 사용
• opacity: 0 !== display: noen;
• background-color: rgba(100, 100, 100, 0.5)와 opacity: 0.5 의 차이는
• rgba는 배경색만 0.5 투명해지고 컨텐츠는 그대로지만
• opacity는 컨텐츠까지 투명해진다.

background-color, background-iamge

• image가 color 보다 앞에 뜬다. (like z-index)
• png 파일이라면 투명부분에 color 가 보인다.
• background-image: url("../../media/mxamples.png") 와 같이 url 사용 가능
• 공간이 이미지보다 크면 여러개의 이미지가 바둑판식 배열로 배치된다.

background-repeat

• background-repeat: repeat (default > 크기에 맞게 반복 / x + y )
• repeat-x : 가로축으로만 반복, 세로축으로는 반복x
• repeat-y : 세로축으로만 반복, 가로축으로는 반복x
• no-repeat : 반복하지 않는다. 이미지 본연의 크기에 맞게 딱 한번만

background-position

• background image 의 위치를 조절
• 지정안하면 (0,0)
• background-position: x축, y축;
• 이미지의 왼쪽 상단 꼭짓점의 위치가 (x, y) 좌표로 이동하는 것
• background-position: 150px 200px;
• keyword 도 사용 가능 (top, center, left, right, bottom)
• 키워드로 하면 (x축, y축) 순서 상관 없어진다.
• background-position: top, center
• 키워드 하나만 사용 가능 (나머지는 center로 자동 처리)

background-origin

• 배경의 원점을 border, padding, content를 기준으로 지정하는 것
• background-origin: padding-box (default)
• content-box
• border-box

background-size : contain, cover

• 배경이미지의 크기를 지정
• auto (default) : 이미지의 원래 크기
• 더 작으면 이미지가 잘리고, 더 크면 반복된다.
• 늘이거나, 줄이거나, 공간에 맞출 수 있다.
• cover : 이미지가 찌그러지지 않는 상태에서 가로나 세로에 맞춘다. (잘라지긴 한다.) / 요소에 딱 맞춰진다.
• contain : 더 작은 쪽에 비율을 맞추게 된다. (빈 공간이 생긴다.)
• 둘 다 이미지의 비율은 유지된다.
• <lenght> : 100px 100px; 과 같이 사용 가능 / 비율 깨진다.
• 하나만 입력하면 width 값에 맞춰서 비율 유지된다.
• <percentage>
• cover와 100%는 다르다 (100%는 빈공간이 나옴)

background (shorthand)

• 스페이싱으로 구분한다.
• color, image, origin, position, repeat, size (attachment, clip) 사용 가능
• background : green
• background: border-box red;
• background: no-repeat center/80% url(“../img/image.png”)
• color는 있다면 가장 마지막이어야 한다.
• size는 position 뒤에 / 로 위치해야 한다.

초기값

• background-image: none;
• background-position: 0% 0%;
• background-size: auto auto;
• background-repeat: repeat;
• background-origin: padding-box;
• background-clip: border-box;
• background-attachment: scroll;
• background-color: trnasparent

나의 회고 🤫

background-repeat 사용해서 배경이미지를 여러분 줄 수 있는 것을 처음 알았다.!
기존 movester 로그인 화면이 로고가 여러번 반복되는데, 이걸 구현하려고 이미지를 여러번 추가했는데
바로 적용해서 써먹어봐야겠다!
css는 알면 알수록 노가다가 줄어드는 마법같다.
정말 아는 만큼 쓸 있다. good!! 👍👍