배경 속성

ODaram 2022. 9. 30. 12:20

스타일 시트 속성
1. 박스 속성
2. 글자 속성
3. 위치 속성
4. 배경 속성

배경 속성 : background

· background:색상(background-color) 이미지(background-img) 반복형태(background-repeat) 위치(background-position)
> 네가지 속성이 같이 쓰임
· background-size 속성
· background-attachment 속성

1. background-color 속성

· 박스(요소)의 배경색
배경색 : 색상코드, rgb(0,0,0), rgba(255,255,255,0~1) (rgb는 사용빈도 낮음)

2. background-image 속성

· 박스의 배경 이미지를 지정한다.
url ('상대경로')

3. background-repeat 속성

· 박스의 배경 이미지의 반복 형태를 지정한다.
background-repeat:no-repeat; >> 반복하지 않음 (사용빈도 높음)
background-repeat:repeat-x; >> 좌우로 반복하겠다.
background-repeat:repeat-y; >> 상하로 반복하겠다.
background-repeat:repeat; >> 상하좌우로 반복하겠다. (사용빈도 보통)

4. background-position 속성

· 배경 이미지의 위치를 지정한다.
첫번째 값 : 좌우배치
두번째 값 : 상하배치

5. background-size 속성

· 배경 이미지의 크기를 지정한다.
단위 : px, %
이미지는 가로/세로 비율을 항상 유지하는 성격이 있다.
따라서 가로 크기만 변경하면 세로 크기는 자동으로 비율에 맞추어 작아진다. (크게하면 이미지 깨짐)
키워드 : cover 는 배경 이미지를 지정한 박스의 크기에 맞게 확대 또는 축소한다. (사용빈도 높음)

6. background-attachment 속성

· 배경 이미지의 부착 형태를 지정
fixed : 고정시킨다. (사용빈도 높음)

첫번째 미션 : 풀 스크린 배경 구현 (풀 스크린 : 이미지로 꽉 채우겠다는 의미)

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>배경속성_ex2</title>
  <style>
    *{margin:0; padding:0; box-sizing:border-box;}
    body {
      height:100vh;
      background:url('imgs/batman.jpg') no-repeat center center;
      background-size:cover;
    }
  </style>
</head>
<body>
  
</body>
</html>

두번째 미션 : cloud 텍스트를 브라우저의 중앙에 배치하고 clo는 흰색, ud는 아쿠아색으로 변경하세요.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>배경속성_ex2</title>
  <style>
    *{margin:0; padding:0; box-sizing:border-box;}
    body {
      height:100vh;
      background:url('imgs/batman.jpg') no-repeat center center;
      background-size:cover;
    }
    h2 {
      position:absolute; top:50%; left:50%;                     /*h2 박스 중앙 정렬*/
      width:200px; height:200px; margin:-100px 0 0 -100px;  /*h2 박스 중앙 정렬*/
      text-align:center; line-height:200px; /*텍스트 중앙 정렬*/
      /* background:orange; */
      color:white;
      /* 내가 따로 준 텍스트 속성*/
      text-shadow:1px 1px 3px #000;
      font-size:72px;
    }
    h2 .aqua {color:aqua;}
  </style>
</head>
<body>
  <h2>clo<span class="aqua">ud</span></h2>
</body>
</html>

※세번째 미션 : 풀 스크린 배경을 활용하여 SPA(Single Page Application)를 구성하세요.

(attachment : fixed 사용하기)

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>배경속성_ex2</title>
  <style>
    *{margin:0; padding:0; box-sizing:border-box;}
    body {
      height:100vh;
      background:url('imgs/batman.jpg') no-repeat center center;
      background-size:cover;
    }
    h2 {
      position:absolute; top:50%; left:50%;                     /*h2 박스 중앙 정렬*/
      width:200px; height:200px; margin:-100px 0 0 -100px;  /*h2 박스 중앙 정렬*/
      text-align:center; line-height:200px; /*텍스트 중앙 정렬*/
      /* background:orange; */
      color:white;
      /* 내가 따로 준 텍스트 속성*/
      text-shadow:1px 1px 3px #000;
      font-size:72px;
    }
    h2 .aqua {color:aqua;}
    .attachment {
      position:absolute;
      width:100px; height:100px;
    }
    .attachment {
      position:absolute; left:0; top:50%;
      width:100%; height:300px; margin:-150px 0 0 0px;
      background:url('imgs/batman.jpg') no-repeat center center;
      background-size:cover;
      background-attachment:fixed;
    }
  </style>
</head>
<body>
  <div class="attachment">
  <h2>clo<span class="aqua">ud</span></h2>
</div>
</body>
</html>