강의 대시보드 웹 서비스의 스타일을 직접 수정해봅시다
웹 서비스의 스타일을 직접 수정해봅시다
강의명 : 실용적인 웹 프로그래밍
수강 기한 : 무제한
진도율 : 0강/20강 (0%) | 시간 : 0분/95분
나가기
미수강
이전수업
다음수업

수업 목표

  • 기존 페이지의 스타일 수정하기
  • CSS Selector 직접 다뤄보기
  • 웹브라우저에 코드를 추가하여 직접 수정하기
  • 이미지 호스팅 이해하기

수업 순서

  1. 네이버 상단 광고 없애기
  2. 미리 수업에서 만들 완성작 소개하기
  3. 원하는 배경화면을 고르기
  4. 이미지 호스팅의 개념 이해하기
  5. 이미지 호스팅 웹사이트를 이용하여 직접 해보기
  6. 구글 홈페이지에 배경사진 넣어보기

네이버 상단 광고 없애기

  1. 네이버에 들어가줍니다.
  2. f12를 눌러 개발자 도구를 켜줍니다. (맥은 alt + cmd + i)
  3. 코드에서 "id = 'NM_TOP_BANNER'"를 찾거나 광고를 집어줍니다. (영상에 자세하게 나와있습니다.)
  4. 아래 코드를 넣어주세요
#NM_TOP_BANNER {
    display:none;
}

광고 차단 웹 확장으로 지우기

기본적으로 여러 광고 차단 확장 앱이 네이버 상단 베너를 지워주지 않지만, 집기 모드(Picker mode, uBlock Origin 기준)로 직접 차단할 요소를 찾아 추가할 수 있습니다.

8월 24일 수정 : 김무훈 선생님이 한국어 사이트 차단에 기여를 해서 지워주기 시작했습니다.

이 과정에서 Stylus 와 마찬가지로 CSS 선택자 개념이 쓰입니다.

구글 홈페이지에 배경사진 넣어보기

  1. 배경을 넣고 싶은 사이트에 들어가줍니다. (저는 구글을 사용했습니다)
  2. f12를 눌러 개발자 도구를 켜줍니다. (맥은 alt + cmd + i)
  3. 코드에서 body를 찾아줍니다.
  4. element.style에서 코드를 작성합니다.
  5. stylus를 활용해 이미지를 고정합니다.
.hp {
    background-image: url( );  /* url의 빈칸에 ifh.cc에서 받은 주소를 넣어주세요 */
    background-position: center;
    background-size: cover;
}

/* 이미지에 흰색 가운데 줄이 생긴다면 이 코드를 작성해주세요! */
.sfbg{
    display:none;
}

간단한 코드 설명

background-image는 url안의 이미지를 넣어주는 코드입니다.

background-position: center 는 이미지를 화면의 가운데로 올 수 있게 해주는 코드입니다.

background-size: cover 는 이미지가 화면의 크기에 맞게 확대 혹은 축소를 해주는 코드입니다.

Stylus 에서는로 위 3줄의 코드를 body 선택자로 감싸줍니다.

body {
 background-image: url("이미지 주소");
 background-position: center;
 background-size: cover;
}
    목차 커뮤니티