mingg IT

[CSS] 네이버 사이트 기본 CSS 본문

기타

[CSS] 네이버 사이트 기본 CSS

mingg123 2021. 10. 23. 16:32 
@charset "UTF-8";
.blind {
  position: absolute;
  clip: rect(0 0 0 0);
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
}

body,
button,
dd,
dl,
dt,
fieldset,
form,
h1,
h2,
h3,
h4,
h5,
h6,
input,
legend,
li,
ol,
p,
select,
table,
td,
textarea,
th,
ul {
  margin: 0;
  padding: 0;
}
body,
button,
input,
select,
table,
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  line-height: inherit;
}

button,
input {
  -webkit-border-radius: 0;
  border-radius: 0;
  border: 0;
}
button {
  background-color: transparent;
}
fieldset,
img {
  border: 0;
}

#header.ani_fixed .search_area {
  -webkit-transform: translate(-255px, -4px);
  transform: translate(-255px, -4px);
}
#header.ani_fixed .search_area:before {
  position: absolute;
  top: 22px;
  bottom: 23px;
  left: 59px;
  content: "";
  width: 1px;
  background-color: #e8ecee;
}
#header.ani_fixed .search_area .input_text {
  width: 584px;
  font-size: 21px;
  letter-spacing: -0.4px;
  -webkit-transform: translateY(2px);
  transform: translateY(2px);
}
#header.ani_fixed .search_area .input_text::-webkit-input-placeholder {
  color: #e4e4e4;
  font-weight: 400;
}
#header.ani_fixed .search_area .input_text::placeholder {
  color: #e4e4e4;
  font-weight: 400;
}
#header.ani_fixed .search_area .input_text:-ms-input-placeholder {
  color: #e4e4e4;
  font-weight: 400;
}
#header.ani_fixed .search_area .green_window {
  width: 721px;
  height: 60px;
  padding-left: 59px;
  margin-top: 3px;
  border: 1px solid transparent !important;
}
#header.ani_fixed .search_area .green_window.window_focus {
  -webkit-box-shadow: none;
  box-shadow: none;
}
#header.ani_fixed .search_area .green_window.atcp_open {
  border-color: #e4e7e8 !important;
  border-bottom: 0;
  -webkit-border-radius: 6px 6px 0 0;
  border-radius: 6px 6px 0 0;
  -webkit-box-shadow: 0 2px 3px 0 rgba(0, 1, 3, 0.08);
  box-shadow: 0 2px 3px 0 rgba(0, 1, 3, 0.08);
}
#header.ani_fixed .search_area .reatcmp {
  width: 782px;
  -webkit-transform: translateY(9px);
  transform: translateY(9px);
}
#header.ani_fixed .search_area .btn_submit {
  background-color: transparent !important;
}
#header.ani_fixed .search_area .btn_submit .ico_search_submit {
  display: inline-block;
  width: 24px;
  height: 24px;
  background-position: -420px -82px;
  background-repeat: no-repeat;
  vertical-align: top;
  -webkit-transform: translateX(-3px);
  transform: translateX(-3px);
  visibility: visible;
}
#header.ani_fixed .search_area .btn_arw {
  -webkit-transform: translateX(13px);
  transform: translateX(13px);
}
#header.ani_fixed .search_area .btn_keyboard {
  -webkit-transform: translateX(11px);
  transform: translateX(11px);
}
#header {
  position: relative;
  background-color: #fff;
  z-index: 2000;
}
#header .special_bg {
  position: relative;
  height: 160px;
  background-color: #fff;
  border-bottom: 1px solid #e4e8eb;
}
#header .special_bg.special_hidden .green_window {
  border-color: transparent;
}
#header .special_bg.special_hidden .btn_submit,
#header .special_bg.special_hidden .input_text {
  background-color: transparent;
}

#header .group_flex {
  position: relative;
  width: 1130px;
  height: 100%;
  margin: 0 auto;
  padding: 0 30px;
}
#header .logo_area {
  position: relative;
  height: 100%;
}
#header .logo_default {
  position: absolute;
  top: 50%;
  left: -9px;
  margin-top: -32px;
}

#header .logo_special {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: -100px;
}

#header .search_area {
  position: absolute;
  top: 50%;
  left: 268px;
  margin-top: -28px;
}

#header .search_area .input_text {
  width: 444px;
  height: 24px;
  padding: 13px 15px;
  margin: 1px;
  background-color: #fff;
  font-size: 18px;
  line-height: 24px;
  color: #000;
  font-weight: 700;
  outline: 0;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <link rel="stylesheet" href="search.css" />
  </head>
  <body>
    <div id = "wrap">
        <div id="header" role="banner">
        <div
          class="special_bg special_hidden"
          data-search-window-color="#ebad35"
        >
          <div class="group_flex">
            <div class="logo_area">
              <h1 class="logo_special">
                <img
                  src="https://s.pstatic.net/static/www/mobile/edit/20211022/mobile_1359412796.gif"
                  width="1230"
                  height="160"
                  class="special_img"
                  alt="상강"
                />
                </a>
              </h1>
            </div>
            <div id="search" class="search_area" data-clk-prefix="sch">
            
            </div>
          </div>
        </div>

        <!--EMPTY-->
        <div id="gnb">
          <div id="NM_FAVORITE" class="gnb_inner">
           
          </div>
        </div>
      </div>
    </div>

  </body>
</html>

'기타' 카테고리의 다른 글

[기타] firebase로 react 프로젝트 배포하기  (0) 2021.11.11
[기타] 로컬 페이지 외부 url로 띄우기  (0) 2021.10.31
Hyperdata에 MySql DataSource로 등록하기  (0) 2021.09.28
[DataSet] DATE type 데이터셋  (0) 2021.09.09
[Cron] Cron 표현식 유효성검사 라이브러리 cron-validate VS cron-expression-validator  (0) 2021.09.08
'기타' Related Articles more
Comments