웹 프로그래밍[4] - CSS : 배경색, 배경 이미지 삽입

📌 교내 '디지털 콘텐츠 웹 프로그래밍' 수업 내용과 'Do it 인터랙티브 웹 페이지 만들기' 유튜브 강의를 통해 공부한 내용을 정리하였습니다.

 

 

 

배경색 지정하기

 

🔶 배경색상 속성 

 

속성명	속성값	설명
background-color	영문명	영어 색상명으로 배경색 지정
	rgb(0,0,0)	RGB 표기법으로 지정
	#000000	16진수 표기법으로 지정

 

color 는 글자색! background-color 는 배경색!

 

 

 

🔶 16진수 변환방법

 

 

 

 

 

배경색 이미지 삽입

 

속성명	속성값	설명
background-image	url(이미지 경로) ◾ 이미지 경로는 ../ 로 시작해야 작성중인 css 에서 빠져나와 img 파일로 넣어진다.	배경 이미지를 삽입
background-repeat	repeat, repeat-x, repeat-y, no-repeat	배경 이미지를 반복
background-position	가로축, 세로축	배경 이미지의 위치를 지정
background-size	contain, cover	배경 이미지의 크기를 지정
background-attachment	fixed	배경 이미지가 움직이지 않게 고정

 

 

원래 pattern.png 이미지는 마름모 하나만 나타내는 이미지로, 화면상에 반복이 발생했음을 알 수 있음

 

• background-repeat 속성을 따로 지정해주지 않으면 디폴트값이 x,y 축에 자동으로 반복이됨

 

 

no-repeat 으로 지정해줘야 이미지가 반복되지 않음

 

 

가로축으로 보내버림 : 100%, 세로축에는 중앙으로 : 50%

 

 

 

 

 

 

배경 이미지 크기 조절하기 

 

👀 background-size : Contain vs Cover

 

 

• contain : 이미지 전체가 화면에 보이도록 삽입 (박스 크기에 맞추는게 아니라 여백이 남을 수 있음. 이미지의 비율과 박스의 비율이 다르기 때문)

 

• cover : 이미지의 비율이 깨지더라도 박스크기에 맞게 배치 (빈 여백 없이 삽입) 

 

두 배경 이미지를 웹 브라우저에 고정

 

👀 background-attachment : fixed

 

 

 

article 요소에 공통적으로 fixed 를 지정

 

👉 원래 정상적으로는 article 영역을 기점으로 center 에 배치되는 것이 맞으나, attachment 를 fixed 로 주게되면 이미지 위치의 기준점은 브라우저가됨