Multi Developer SuHo

CSS 배경에 적용할 수 있는 속성(Background-Style) 본문

html5+CSS3

CSS 배경에 적용할 수 있는 속성(Background-Style)

Dreaming Developer Student 2024. 2. 29. 17:39
SMALL

안녕하세요~ 며칠간 글이 빈번하게 올라오는 점 양해부탁드립니다. 새학기를 맞이하는 겸에 회복하는 시간을 가졌습니다.  그럼 본문으로 넘어가겠습니다. 
글을 작성하기전 모든 내용은 다음과 같은 강의플랫폼을 활용하여 작성하였습니다.
https://www.inflearn.com/course/html-css-%EA%B8%B0%EC%B4%88-%EB%AC%B8%EB%B2%95-%EC%98%AC%EC%9D%B8%EC%9B%90

 

[지금 무료] HTML5 & CSS3 기초 문법 올인원 강의 - 인프런

도서 HTML5 독학백서 & CSS3 독학백서 저자 직강! 이론은 짧게 핵심만! 모던 HTML과 CSS에 입문하기 위해 꼭 알아야 하는 핵심 문법 엑기스만 정리했습니다., 핵심을 컴팩트하게! 빠르게 해치우는 HTML/

www.inflearn.com


오늘은 CSS 배경(Background)에 적용할 수 있는 속성들을 살펴보겠습니다. 

1. background-color: 배경의 색상을 지정합니다. 색상은 이름, HEX, RGB, RGBA, HSL, HSLA 등의 형식으로 지정할 수 있습니다.
2. background-image: 배경에 이미지를 설정합니다. 이미지 경로(URL)를 지정하며, 여러 이미지를 쉼표로 구분하여 설정할 수 있습니다.
3. background-repeat: 배경 이미지의 반복 방식을 지정합니다. 값으로는 'repeat', 'repeat-x', 'repeat-y', 'no-repeat' 등이 있습니다.
4. background-position: 배경 이미지의 위치를 지정합니다. 값으로는 'top', 'bottom', 'left', 'right', 'center', 또는 픽셀, 퍼센트 등으로 지정할 수 있습니다.
5. background-size: 배경 이미지의 크기를 지정합니다. 값으로는 'auto', 'cover', 'contain', 또는 픽셀, 퍼센트 등으로 지정할 수 있습니다.
6. background-attachment: 배경 이미지의 스크롤 방식을 지정합니다. 값으로는 'scroll', 'fixed', 'local' 등이 있습니다.

우선 속성들중 몇가지만 예를 들어 소스코드를 작성해보겠습니다. 
 background-color : 배경의 색상을 지정할 수 있는 속성입니다. 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS 배경 스타일 색상 적용 </title>
  <style>
      body {
       background-color: yellow;

      }
  </style>
</head>
<body>
</html>

 

 






이렇게 배경 색상이 변경된 것을 확인할 수 있습니다.

다음은 Background-image 속성입니다. 
Background-image 속성은 배경에 이미지를 적용할 수 있는 속성입니다. 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS 배경 스타일 이미지 적용 </title>
  <style>
      body {
        background-image: url("../HTML/img/length-landscape-2011238_1280.jpg");

      }
  </style>
</head>
<body>
</html>




이렇게 배경에 이미지가 적용된 것을 보실 수 있습니다.

Background-size 속성을 통해 이미지 크기를 조정해보겠습니다.
여기서 저는 background-size: cover 를 사용하여 배경 이미지가 요소의 전체 너비와 높이를 채우도록 확장되도록 화면 비율에 맞게 조정하였습니다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS 배경 이미지 크기 적용 </title>
  <style>
      body {
      background-image: url("../HTML/img/length-landscape-2011238_1280.jpg");
      background-size: cover;
      }
  </style>
</head>
<body>
</html>

 

 


이렇게 이미지 크기가 화면비율에 맞게 전체 너비와 높이를 확장하였습니다.

마지막으로 background-repeat 속성을 사용한 소스코드입니다.
background-repeat: no-repeat; 은 CSS 속성 중 하나로, 이는 배경 이미지를 반복하지 않고 한 번만 표시하라는 의미입니다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS 배경 이미지 반복 속성 적용 </title>
  <style>
      body {
      background-image: url("../HTML/img/length-landscape-2011238_1280.jpg");
      background-size: cover;
      background-repeat:no-repeat;
      }
  </style>
</head>
<body>
</html>




이상입니다. 
오늘 하루도 고생많으셨습니다.  배경에 이미지 속성과, 색상 적용, 사이즈 조정 및 반복 적용에 대해 알아보았습니다. 감사합니다.  피드백 부분이나 궁금하신점 있으신 분들은 댓글 달아주시면 확인하겠습니다!!

LIST
저작자표시

'html5+CSS3' 카테고리의 다른 글

CSS 박스 모델(Box Model) && 박스 사이즈(box-sizing)  (0) 2024.03.03
CSS 여백과 테두리 스타일 적용  (0) 2024.02.29
CSS 가상 선택자(Pseudo-selector)  (0) 2024.02.24
CSS 링크(link), 리스트 스타일(list-style)  (0) 2024.02.24
CSS 텍스트와 폰트 스타일  (0) 2024.02.23
'html5+CSS3' Related Articles more