네이버 클론코딩 common.css

common.css

/* .blind 클래스에 스타일을 적용합니다. */
.blind {
  position: absolute; /* 절대 위치 지정 */
  width: 1px; /* 너비 설정 (화면에 렌더링되지 않게 1px로 설정) */
  height: 1px; /* 높이 설정 (화면에 렌더링되지 않게 1px로 설정) */
  overflow: hidden; /* 내용이 넘칠 때 숨김 처리 */
  clip: rect(0, 0, 0, 0); /* 클리핑 영역 설정 (실제 내용을 보이지 않게 함) */
  margin: -1; /* 마진을 이용하여 레이아웃에 영향을 주지 않도록 함 */
}

/* 여러 요소에 배경 이미지를 추가합니다. */
/* 이들 요소는 특정 이미지 파일인 sp-bg.png를 배경 이미지로 사용합니다. */
.widget .group-content .content-dictionary .dictionary-search::after,
.art-dailyStock .group-header .btn.refresh::before,
.art-dailyStock .group-board .stockView .stockCompany-item .stockname .stockCompany-price .priceUp-ic,
.art-dailyStock .group-board .stockView .stockCompany-item:nth-child(4) .stockname::after,
.sc-news .group-issue .issue-area .invertedtriangle,
.whalebrowser .whale-link .ic-whale,
.widget .group-link .moretomobile .mobilemain::after,
.widget .group-link .moretomobile .mobilemain::before,
.widget .group-naverclip .naverclip-header .ic-naverclip,
.widget .group-content .content-papago .papago-link::before,
.widget .group-content .content-papago .ic-papago,
.art-dailyStock .group-board .stockView .priceUp-ic::after,
.art-dailyStock .group-header .refresh::before,
.art-dailyStock .group-header .btn-stockinfo::before,
.art-dailyWeather .group-header .dailyWeather-link .dailyWeather-compare::before,
.sc-login .link-login::before,
.header .util-area > *::after,
.header .group-nav .nav-item [class*="ic-"]::after,
.header .group-nav .nav-item [class*="ic-"]::before,
.header .group-search button::before {
  background-image: url(../images/sp-bg.png); /* 배경 이미지 설정 */
  background-repeat: no-repeat; /* 배경 이미지 반복 설정 없음 */
  background-size: 435px auto; /* 배경 이미지 크기 설정 */
}

/* 메인 이미지에 배경 이미지를 추가합니다. */
/* 이들 요소는 특정 이미지 파일인 sp_weather.png를 배경 이미지로 사용합니다. */
.art-dailyWeather .currWeather .currTemp .curr-icon::before,
.art-dailyWeather .weatherBoard .todayBoard .weatherBoard-item:nth-child(3) .ic-weacther:before,
.art-dailyWeather .weatherBoard .todayBoard .weatherBoard-item:nth-child(4) .ic-weacther:before,
.art-dailyWeather .weatherBoard .todayBoard .weatherBoard-item:nth-child(5) .ic-weacther:before,
.art-dailyWeather .weatherBoard .todayBoard .weatherBoard-item .ic-weacther::before {
  background-image: url(../images/sp_weather.png); /* 배경 이미지 설정 */
  background-size: 641px 587px; /* 배경 이미지 크기 설정 */
  background-repeat: no-repeat; /* 배경 이미지 반복 설정 없음 */
}

/* 화살표 이미지에 배경 이미지를 추가합니다. */
/* 이들 요소는 특정 이미지 파일인 sp_main.png를 배경 이미지로 사용합니다. */
.sc-news .group-control .control-area .btn-prev::before,
.sc-news .group-control .control-area .btn-next::before,
.sc-shopping .group-control .control-area .btn-next::before,
.sc-shopping .group-control .control-area .btn-prev::before {
  background-image: url(../images/sp_main.png); /* 배경 이미지 설정 */
  background-repeat: no-repeat; /* 배경 이미지 반복 설정 없음 */
  background-size: 134px 121px; /* 배경 이미지 크기 설정 */
}

이 CSS 코드는 여러 요소에 배경 이미지를 추가하고, 해당 이미지를 렌더링할 위치와 크기를 설정합니다. 배경 이미지는 각 요소에 다른 이미지 파일을 사용하며, 반복 없이 크기와 위치가 조절되어 특정 그래픽을 보여줍니다.