inf 4

26 Apr 2022

WEB service style 수정

demo1.html

목표

• 기존 page의 style 수정하기
• CSS Selector 직접 다루기
• WEB browser에 code추가하여 직접수정
• image hosing 이해하기

• NAVER 상단 광고 없애기
  stylus 확장앱
  개발자 도구 / Ctr+Shif+C 원하는 부분 code검색
  element(요소) - style(스타일) : diplay: none;
  ID와 속성을 stylus에 코드로 입력하면 영구 적용
  

  • 특정 사이트 광고차단 app들이 이런형식으로
    css선택자를 통해 WEBpage를 제어하는 듯

• 미리수업에서 만들 완성작 소개하기
  그냥 자기꺼 보여줌

• 원하는 배경화면 고르기
  wallpaperscraft 에서 사진고름

• image hosting 개념 이해
  image를 별도의 서버에 저장하고
  그 링크를 통해 사용함으로써
  용량걱정없이 사용할 수 있는 상태
  강의에선 image지정을 쉽게 하기 위해서 사용

• image hosting website를 이용 직접해보기
  iFH 서비스 이용 - 사진고르고 hosting

• Google homepag에 배경사진 넣기 개발자도구에서 body tag확인
  stylus에서 작성
  

  • background-image : url(주소);
    
  • background-position : center;
    
  • backgrount-size : cover;
    

  Google site에 적용 완료 넘모 신기함

front-end에 대해 배울 때 마다 실제로 적용하거나

이미 만들어진 site의 구성을 제대로 살펴 볼 수 있는 능력이

생긴느낌