[스파르타코딩 무료강의] 2022년도 덕담 공유 패키지 완강 도전! (7강) - 배경 채우기

조하! 조이 하고 싶은 것 다하는 블로그입니다!

제가 예전부터 해보고 싶고 도전해보고 싶던 코딩에 처음으로 입문을 합니다! 첫 입문으로는 스파르타코딩에서 진짜 찐! 무료강의로 진행되는 2022년도 덕담 공유 패키지에 도전을 하고자 합니다! 실은,, 제가 2021년도에도 수강신청을 했는데 완주를 못해서 다시 재도전입니다! 응원 부탁드립니다 >_< ! 

 

• 1. 그림으로 배경 채우기
  2. 준비된 그림으로 배경을 채워봅니다!
     • [코드스니펫] 배경 이미지
     • <https://2022-01-newyear.s3.ap-northeast-2.amazonaws.com/bg_default.png>

     .background {
         background-color: green;
         width: 400px;
         height: 800px;
     
         background-image: url('<https://2022-01-newyear.s3.ap-northeast-2.amazonaws.com/bg_default.png>');
         background-position: center;
         background-size: cover;
     }
     

  3. 배경을 가운데로 옮겨봅시다!
  4. .background { background-color: green; width: 400px; height: 800px; background-image: url('<https://2022-01-newyear.s3.ap-northeast-2.amazonaws.com/bg_default.png>'); background-position: center; background-size: cover; margin: auto; }
  5. 모바일로 보기!
  6. → 350 x 700 으로 맞춰서 보기!
  7. 배경을 화면에 꽉 차게 해보기
  8. .background { background-color: green; width: 100vw; height: 100vh; background-image: url('<https://2022-01-newyear.s3.ap-northeast-2.amazonaws.com/bg_default.png>'); background-position: center; background-size: cover; margin: auto; }
  9. 가로 길이 : 늘어나는 최대치를 주기
  10. .background { background-color: green; max-width: 450px; width: 100vw; height: 100vh; background-image: url('<https://2022-01-newyear.s3.ap-northeast-2.amazonaws.com/bg_default.png>'); background-position: center; background-size: cover; margin: auto; }
  11. body의 짜투리 여백을 없애기→ 오늘 쓸 h1태그, p태그도 함께 여백을 없애줄게요!
  12. body, h1, p { margin:0; padding:0; }
  13. → HTML 태그의 기본적인 여백을 없애줘야 편하답니다!
  14. 완성!

내가 직접 정리하는 덕담 공유 패키지 7강 

 

웹사이트 배경을 이미지로 변경하고 싶으면! 

아래 코드를 사용할 것! 드디어 배경 완성!! 짜릿! 

 

background-image: url('');

            background-position: center;

            background-size: cover;

 

 width: 100vw;

            height: 100vh;

 

-> 화면을 꽉차게! 

-> 한 없이 늘어나면 이상하니 max로! 

 

꼭..! 에어팟 당첨되고 싶다!

태어나 처음듣는 문과생의 코딩무료수업추천! 

조하! 조이 하고 싶은 것, 코딩 도전기!