[ Do it! HTML + CSS 웹 표준의 정석 스터디!] 09 이미지와 그러데이션 효과로 배경 꾸미기

DAY 13

🔖 오늘 읽은 범위 :

⭐️01/21(수) 진도표 알림
✅공부 내용: 09 이미지와 그러데이션 효과로 배경 꾸미기
✅ 쪽수: 289~312쪽

---

😃 **기억하고 싶은 내용 (복붙해도 상관없어!)**

이미지와 그러데이션 효과로 배경 꾸미기

• 배경 : 단순 색상 이나 이미지 사용. 그러데이션 넣기. 색 투명도 조절.

배경색과 배경 범위 지정하기

배경색 지정 : background-color

• 배경색 : backgroud-color 로 지정.
• 16진수, rgb 값, 색상 이름으로 지정 가능.
• 이 속성은 예외로서 하위 요소로 적용되지 않음.
• 모든 웹 문서 요소는 기본적으로 배경이 투명함. body 스타일로 지정한 문서 배경이 그대로 비치는 것.

배경색 적용 범위 조절 : background-clip

• 배경의 적용 범위 조절.

종류	설명
border-box	박스 모델의 가장 외곽인 테두리까지 적용. 기본값.
padding-box	박스 모델의 테두리를 뺀 패딩 범위까지 적용.
content-box	박스 모델의 콘텐츠 부분에만 적용.

<style>
  .desc {
    border:5px dotted #222;
    background-color:#ffd9a0;
    width:350px;
    padding:20px;
    margin-right:20px;
    margin-bottom: 20px;
    float:left;
  }
  /* 배경색 적용 범위 지정하기 */
  #clip-border {
    background-clip: border-box;
  }
  #clip-padding {
    background-clip: padding-box;
  }
  #clip-content {
    background-clip: content-box;
  }
</style>

배경 이미지 지정하기

• 웹 요소 이미지 넣기.
• 목록의 불릿 이미지 대신해서 아이콘 이미지 넣기.

웹 요소 배경 이미지 넣기 : background-image

background-image: url('이미지 파일 경로')

• 파일 형식은 jpg, gif, png 형식.
• 파일 경로는 작은따옴표(’), 큰따옴표(”) 로 붙임. 상대 경로 또는 http:// 시작하는 절대 경로.
• 요소보다 이미지가 작으면 가로, 세로 반복하여 배경을 채움.

<style>
  body {
    background-image: url('images/bg1.jpg');
  }
</style>

배경 이미지 반복 방법 지정 : background-repeat

• 배경 이미지를 가로와 세로 중 어느 방향으로 반복할지 지정하거나 한번만 나타나게 함.

종류	설명
repeat	가로, 세로 반복. 기본값.
repeat-x	너비에 가득찰 때까지 가로 반복.
repeat-y	높이 가득찰 때까지 세로 반복.
no-repeat	한번 표시하고 반복 안함.

배경 이미지 위치 조절 : background-position

• 배경 이미지의 수평 위치 또는 수직 위치 값 지정.

background-position: <수평 위치> <수직 위치>;
수평 위치: left | center | right | <백분율> | <길이의 값>
수직 위치: top | center | bottom | <백분율> | <길이의 값>

/* CSS */
li {
  padding-left:50px;  /* 왼쪽 패딩 (박스 모델) */
  line-height:40px;  /* 줄간격 */
  /* Do it! 목록 불릿 대신 배경 이미지 사용하기  */
  background-image: url('images/book-icon.png');
  background-repeat: no-repeat;
  background-position: left center;
}

• 속성 값 2개 지정 시, 첫번째 값은 수평 위치 값, 두번째 값은 수직 위치 값.
• 속성 값 1개 지정 시, 지정한 값은 수평 위치 값, 수직 위치 값은 center 또는 50% 간주.
• 배경 이미지 위치 지정 3가지
  • 키워드 : 수평 위치는 left, center, right. 수직 위치는 top, bottom, center.
  • 백분율 : 배경 이미지를 넣을 요소가 있는 해당 위치에서 백분율 계산.
  • 크기 : 배경 이미지 위치를 직접 지정. 배경 이미지의 왼쪽 상단 모서리를 맞춤.

배경 이미지 적용 범위 조절 : background-origin

• 박스 모델에 패딩이나 테두리가 있다면 배경 이미지를 어디까지 포함해서 할 것인지 정한다.

종류	설명
center-box	박스 모델 내용 부분에만 배경 이미지 표시.
padding-box	박스 모델 패딩까지 배경 이미지 표시. 기본값.
border-box	박스 모델 테두리까지 배경 이미지 표시.

배경 이미지 고정 : background-attachment

• 배경 이미지가 있는 웹 문서에서 스크롤 할 때, 배경 이미지를 스크롤 하거나 고정한다.
• 속성 : scroll, fixed

<style>    
  body {  
    background-image:url('images/bg2.png');  /* 문서 전체 배경 이미지 */ 
    /* Do it! 문서 전체 배경 이미지 오른쪽 상단에 고정하기 */
    background-repeat: no-repeat; /* 배경 이미지 반복 안 함 */
    background-position: right top; /* 배경 이미지를 오른쪽 상단에 위치시킴 */
    background-attachment: fixed; /* 배경 이미지 고정 */
  }
  div {
    width:400px;
    height:250px;
    padding: 20px;
    border: 20px  solid rgba(204, 204, 204, 0.493);        
    margin-bottom:20px;
    overflow:auto;
    background-image:url('images/bg3.png');  /* 텍스트 상자의 배경 이미지 */
    background-repeat:no-repeat;  /* 배경 이미지 반복 안 함 */      
    background-position:right top;  /* 배경 이미지를 오른쪽 상단에 위치시킴 */
  }
  /* Do it! #bg1 ~ #bg3 스타일을 사용해 배경 이미지 범위 지정하기 */
  #bg1 {
    background-origin: padding-box; /* 배경 이미지가 패딩 박스 영역에서 시작됨 */
  }
  #bg2 {
    background-origin: border-box; /* 배경 이미지가 보더 박스 영역에서 시작됨 */
  }
  #bg3 {
    background-origin: content-box; /* 배경 이미지가 콘텐츠 박스 영역에서 시작됨 */
  }
</style>

background 속성으로 배경 이미지 제어하기

• 지금까지의 배경 이미지 속성을 background 속성 하나로 줄여서 사용하기.

body {
  background-image: url('images/bg4.jpg');
  background-repeat: no-repeat;
  background-position: left top;
  background-attachment: fixed;
}

background:url('images/bg4.jpg') no-repeat left top;

• 속성 값이 달라서 입력 순서는 상관 없음.

배경 이미지 크기 조절 : background-size

• 배경을 채울 요소 크기 보다 이미지가 크거나 작은 경우, 배경 이미지 크기를 조절함.
• 화면에 가득 채울 때 유용함.
• 속성값은 1개라면 너비로 인식, 높이는 원래 이미지의 너비와 높이 비율에 따라 자동 계산.

종류	설명
auto	원래 배경 이미지 크기 만큼 표시. 기본값.
contain	요소 안에 배경 이미지가 들어오도록 함. 이미지 확대 또는 축소가 됨.
cover	배경 이미지로 요소를 모두 덮도록 함. 이미지 확대 또는 축소가 됨.
<크기>	이미지의 너비와 높이 지정. 값이 하나면 너비값 인식. 높이값은 자동 계산.
<백분율>	배경 이미지가 들어갈 요소의 크기 기준으로 백분율로 지정. 지정된 크기에 맞게 이미지 확대 축소.

<style>
    #bg1 {
      background-size: auto; /* 배경 이미지 원래 크기 */
    }
    #bg2 {
      background-size: 200px; /* 배경 이미지 가로 크기 200px */
    }
    #bg3 {
      background-size: 50%; /* 배경 이미지 가로 크기 50% */
    }
    #bg4 {
      background-size: 100% 100%; /* 배경 이미지 가로 세로 크기 100% */
    }
    #bg5 {
      background-size: contain; /* 배경 이미지가 박스 안에 꽉 차도록 조절 */
    }
    #bg6 {
      background-size: cover; /* 배경 이미지가 박스를 완전히 덮도록 조절 */
    }
</style>

그러데이션 효과로 배경 꾸미기

• 선형 그러데이션

    /* 방향 사용해서 만들기 */
    .grad {
        background: linear-gradient(to bottom right, blue, white);
    }
    /* 각도를 사용해 만들기 */
    .grad {
        background: linear-gradient(45deg, #f00, #fff);
    }
    /* 색상 중지점 지정하기 */
    .grad {
      background: linear-gradient(to bottom, #06f, white 30%, #06f);
    }

• 원형 그러데이션

    /* 타원형 */
    .grad1 {
        background: red;
        background: radial-gradient(white, yellow, red);
    }
    /* 원형 */
    .grad2 {
        background: red;
        background: radial-gradient(circle, white, yellow, red);
    }
  
    /* 가장 가까운 측면 */
    #div1{
        background:darkgreen;
        background:radial-gradient(circle closest-side at 30% 40%, white, yellow, green);  /* 그러데이션 중심에서 가장 가까운 측면에 닿을 때까지 */
    }
    /* 가장 가까운 꼭짓점 */
    #div2{
        background:darkgreen;
        background:radial-gradient(circle closest-corner at 30% 40%, white, yellow, green);  /* 그러데이션 중심에서 가장 가까운 꼭짓점에 닿을 때까지 */
    }
    /* 가장 먼 측면 */
    #div3{
        background:darkgreen;
        background:radial-gradient(circle farthest-side at 30% 40%, white, yellow, green);  /* 그러데이션 중심에서 가장 멀리 떨어진 측면에 닿을 때까지 */
    }
    /* 가장 먼 꼭짓점 */
    #div4{
        background:darkgreen;
        background:radial-gradient(circle farthest-corner at 30% 40%, white, yellow, green);  /* 그러데이션 중심에서 가장 멀리 떨어진 꼭짓점에 닿을 때까지 */
    }
  
    /* 원의 중심에서 20% 위치에서 시작하는 원형 그러데이션 */
    .grad {
      background: blue; /* 배경색 지정 */
      background: radial-gradient(circle at 20% 20%, white, blue);
    }
  
    /* 원형 그러데이션 색상 중지점 지정 */
    .grad1 {
        background: orange;
        background: radial-gradient(yellow, white, orange);
    }
    .grad2 {
        background: orange;
        background: radial-gradient(yellow 0%, white 10%, orange 60%);
    }

• 그러데이션 패턴 반복

    .grad1 {
        background: repeating-linear-gradient(to right, yellow, red 20px);
    }
    .grad2 {
        background: repeating-radial-gradient(circle, white, #ccc 10%);
    }

🤔 **오늘의 파트에 대한 소감 (매우 주관적주의)**

• 배경 적용 범위와 배경 이미지 적용 범위는 약간 헷갈림.
• 그러데이션은 간단하지만 복잡해보이기도 한데, 잘 정리해두면 됨.

🔎 **추가로 알게 된 것 (책 내용 +알파로 궁금한 것, 이해가 가지 않는 것 등)**

---

🤟소감 3줄 요약

• 졸립다…
• 춥다…
• 단순한 스타일은 나오는데 좀 더 멋지게 만들려면 어떻게 해야 할까??