[CSS] background, background-size

 

🚀 CSS 기본 정리

 

 

위의 내용 중 position, display, width, height, overflow는 '이 곳'에 예쁘게 정리 해 둔 것이에요.

 

    🔽  background

이름이 아주 직관적이에요. 바로 배경색을 의미하고, 값은 color 속성 포맷을 이용하는 것이에요.

Tag의 크기가 없을 경우 배경색이 표시되지 않는 다는 것은 참고해야 될 사항인 것이에요.

 

예시 코드

<style>
	#box1-1{ background-color: green; }
	#box1-2{ background-color: #FF00CC; width: 200px }
</style>
<div id="box1-1">상자상자상자1</div>
<div id="box1-2">상자상자2<br>상자상자</div>

 

출력 결과

참고 자료 : https://ofcourse.kr/css-course/background-%EC%86%8D%EC%84%B1

 

주니하랑은 해당 배경 색상을 16진수 표기법으로 

 

이렇게 준 것이에요. 그런 뒤 준비 해 둔 사진을 넣어 주고, no-repeat 속성을 주었는데, background-image로 컨테이너 보다 작은 이미지를 적용하면 이미지가 반복되어 출력할 수 있게 해주는 것이에요. 이 때, `background-repeat` 속성을 사용하면 반복 여부를 지정할 수 있는 것이에요.

 

예시 코드

<style>
	.abox{
		width: 500px;
		height: 100px;
		margin-bottom: 15px;
		background-image: url("/images/attach/android.jpg");
		border: 1px solid #AAA;
	}
	#box3-1{ background-repeat: no-repeat }
	#box3-2{ background-repeat: repeat-x }
	#box3-3{ background-repeat: repeat-y }
	#box3-4{ background-repeat: repeat }
</style>

<div id="box3-1" class="abox"></div>
<div id="box3-2" class="abox"></div>
<div id="box3-3" class="abox"></div>
<div id="box3-4" class="abox"></div>

 

 

출력 결과

참고 자료 : https://ofcourse.kr/css-course/background-%EC%86%8D%EC%84%B1

반응형

 

근데 여기서 no-repeat는 결국 반복해서 출력하지 말라는 의미인 것이에요.

 

 

 

    🔽  background-size

이 친구는 요소 배경 이미지의 크기를 설정할 수 있는 것이에요. 그대로 둘 수도 있고, 늘리거나, 줄일수도 있고, 공간에 맞출수도 있는 것이에요.

• contain : 이미지가 잘리거나, 찌그러지지 않는 한도 내에서 제일 크게 설정
• cover: 이미지가 찌그러지지 않는 한도 내에서 제일 크게 설정. 이미지의 가로 세로 비율이 요소와 다르다면 이미지를 세로 또는 가로방향으로 잘라내어 빈 공간이 생기지 않도록 설정
• auto: 배경 이미지의 원본 크기 유지
• <length>: 원본 크기의 너비 / 높이를 주어진 값으로 늘리거나, 줄니다. 음수는 입력 불가

 

예시 코드

/* 키워드 값 */
background-size: cover;
background-size: contain;

/* 단일 값 구문 */
/* 이미지 너비 (높이는 'auto'가 됨) */
background-size: 50%;
background-size: 3.2em;
background-size: 12px;
background-size: auto;

/* 두 개 값 구문 */
/* 첫 번째 값: 이미지 너비, 두 번째 값: 이미지 높이 */
background-size: 50% auto;
background-size: 3em 25%;
background-size: auto 6px;
background-size: auto auto;

/* 다중 배경 */
background-size: auto, auto; /* `auto auto`와 혼동하지 말 것 */
background-size: 50%, 25%, 25%;
background-size: 6px, auto, contain;

/* 전역 값 */
background-size: inherit;
background-size: initial;
background-size: unset;

참고 자료 : https://developer.mozilla.org/ko/docs/Web/CSS/background-size

background-size - CSS: Cascading Style Sheets | MDN