반응형웹 소개와 실습(3)

🔸 학습내용-Full screen

1. Full Screen?

• 풀스크린이란 브라우저 크기가 확대되어도 스크롤이 생기지 않고 스크린을 꽉 채울 수 있도록 하는 것

• 오늘 수업에서는 background에 image를 적용하여 실습을 해보았다

• background를 사용할 때 size는 따로 적어줘야하고, 작성 순서도 size를 나중에 적어줘야 적용이 되었음

  /* 첫번째 방법 */
  html{
     background-image: url("../image/5.jpg");
     background-repeat: no-repeat;
     background-position: center center;
     background-attachment: fixed;
     background-size: cover;}
  
  /* 두번째 방법 */
  html{
  	background: url("../image/5.jpg") no-repeat center center fixed;
  	background-size: cover;}

  [결과]
  브라우저를 확대해도 배경이미지의 사이즈는 바뀌지 않고 스크롤도 생기지 않음

  

🔸 어려웠던 점

🔸 해결방법

🔸 학습소감

오늘 수업에서 full screen 이외에 (아직 완성하지 않아서 학습내용에는 포함하지 않았지만) 반응형 웹 디자인을 기반으로 한 블로그 제작 실습을 했다. 결과적으로 아직 html코드 작성과 css적용 시 어려움이 많았다.^^
수업을 거듭할수록 html의 중요성을 느끼고 있다!!!!!(역시 기본이 중요한 듯)
또 자잘한 실수들이 은근 애먹이는 경우가 있음을 간혹 느끼는 중이다!
예를 들면 css코드를 작성할 때 클래스 이름의 오타가 많았고 속성값을 적용할 때 (,)를 빼먹어서 적용이 되지 않기도 했다.