'수많은 수많은 속성' 태그의 글 목록

수많은 수많은 속성

네이버 클로바(Naver Clova copy) -사이트 카피 header 2020.05.18

네이버 클로바(Naver Clova copy) -사이트 카피 header

pavk96 2020. 5. 18. 15:41

2020. 5. 18. 15:41

우리는 초기화를 통해 css속성을 적용할 준비를 마쳤다.

Header를 카피해보도록 하자.

※포토샵을 사용하면 가이드라인을 잡을 수 있다.

가이드라인은 공간의 위치를 잡을 때 필요하다.

포토샵이 없다면 페이지 검사를 통해 공간의 크기와 위치를 알 수 있다.

포토샵이 있어도 이 기능은 사용해야 한다.

먼저 이미지 파일로 재료들을 첨부하겠다.

작업 전

밑의 작업 후 와 비교해볼 때 어떤 속성을 적용해야 할지 생각해보자

1. header의 공간이 생겼다, 배경색이 적용되었다.

=> 기본 공간, margin, padding을 조사하고 값을 적용해 주고 background색을 지정해준다.

2. 공간들의 위치를 지정해 준다.

=> margin 또는 padding으로 가능한 것은 그것으로 지정해준다.

그 외의 것은 position, line-height 등을 적용해준다.

3. 텍스트 색, 크기, 간격이 적용되었다.

=> color, font-size, letter-spacing을 지정해준다.

4. 메뉴들마다 마우스를 갖다 대면 글자색, 밑줄, 배경색이 바뀐다.

=> a:hover를 이용하여 바꾸어 주도록 한다.

color, text-decoration, background-color

작업 후

원본과 비교

id값 지정 및 선택자 적기

html의 header부분

<div id="headerWrap"> <!--header를 중앙 정렬하기위해 div태그로 감싸준다.-->
    <header id="header"><!--header에 id header값을 주었다. -->
      <h1 id="logo"><a href="https://clova.ai/ko">Naverclova</a></h1><!--id logo -->
      <nav id="gnb"><!--id gnb 메뉴 네비게이션-->
        <h2 class="hidden">menu</h2>
        <ul>
          <li><a href="https://clova.ai/ko/aisolutions/">기술 &#183; 솔루션</a></li>
          <li><a href="https://clova.ai/ko/products/">제품</a></li>
          <li><a href="https://clova.ai/ko/platform/">플랫폼</a></li>
          <li><a href="https://clova.ai/ko/ko-partner.html">파트너</a></li>
          <li><a href="https://clova.ai/ko/research/research-areas.html">리서치</a></li>
        </ul>
      </nav>
      <nav id="customermenu"><!--id customermenu 2번째 메뉴(고객센터처럼 따로 있는 메뉴들) -->
        <h2 class="hidden">customer menu</h2>
        <ul>
          <li id="bis"><a href="https://www.ncloud.com/product/aiService" target="_blank">
              Biz Start</a></li><!--id bis 서로 다른 크기를 가지므로 나눠준다. -->
          <li id="biz"><a href="https://www.navercorp.com/naver/proposalRegister?joinSiteCd=NVR&joinTypeCd=CLP#proposalGuideLine" target="_blank">비즈니스 문의</a></li><!--id biz -->
        </ul>
      </nav>
    </header>
  </div>

css의 header부분

/*선택자들을 모두 적었다가 안쓰는 부분은 지워주는 방향이 좋다.*/
/*header전체부분*/
#headerWrap {} 
#header {}
/*logo*/
#logo {}
#logo a {}
/*gnb*/
#gnb {}
#gnb ul {}
#gnb ul li {}
#gnb ul li a {}
#gnb ul li a:hover {}
/*customermenu*/
#customermenu {}
#customermenu ul li {}
#customermenu ul li a {}
#bis a {}
#biz a {}
#bis a:hover {}
#biz a:hover {}

1. header의 공간이 생겼다, 배경색이 적용되었다.

작업 전/후

작업 후가 더 엉망진창으로 보이지만 공간이 설정된 것이다.

/*header전체부분*/
#headerWrap {  width: 100%;  height: 86px;  background: rgba(0, 0, 0, 0.4);}
#header {  width: 1140px;  height: 100%;  }
/*logo*/
#logo {  width: 145px;  height: 22px;}
#logo a {  display: block;  width: 145px;  height: 22px;
background: url(images/logo.png) no-repeat;}
/*gnb*/
#gnb {  width: 602.98;  height: 86px;}
#gnb ul {}
#gnb ul li {}
#gnb ul li a {}
#gnb ul li a:hover {}
/*customermenu*/
#customermenu {}
#customermenu ul li {}
#customermenu ul li a { }
#bis a {  display: block;  width: 48px;  height: 14px; }
#biz a {  display: block;  width: 68.531px;  height: 14px;}
#bis a:hover {}
#biz a:hover {}

작업 내용(모든 공간들은 원본 페이지에서 참고할 수 있다.)

width와 height를 사용하여 기본 공간을 지정해 주었다. (a요소에 공간을 지정하려면 display:block;잊으면 안 된다.)
background를 사용하여 이미지가 들어갈 부분(logo)은 경로를 색이 들어갈 부분은 색 단위를 통해 색 코드를 넣어준다.

2. 공간들의 위치를 지정해 준다.

작업 후

이제 좀 형태를 띠는 것 같아 보인다.

#headerWrap {
  width: 100%;
  height: 86px;
  background: rgba(0, 0, 0, 0.4);
}

#header {
  position: relative;
  width: 1140px;
  height: 100%;
  margin: 0 auto;
}

/*logo*/
#logo {
  float: left;
  width: 145px;
  height: 22px;
  margin-top: 32px;
}

#logo a {
  display: block;
  width: 145px;
  height: 22px;
  background: url(images/logo.png) no-repeat;
}

/*gnb*/
#gnb {
  overflow: hidden;
  width: 602.98;
  height: 86px;
}

#gnb ul {
  margin-left: 123px;
}

#gnb ul li {  float: left;}

#gnb ul li a {
  display: block;
  padding: 34px 36px;
}

#gnb ul li a:hover {}

/*customermenu*/
#customermenu {
  position: absolute;
  top: 32px;
  right: 0;
}

#customermenu ul li {
  float: left;
}

#customermenu ul li a {}

#bis a {
  display: block;
  width: 48px;
  height: 14px;
  padding: 8px 13px;
}

#biz a {
  display: block;
  width: 68.531px;
  height: 14px;
  padding: 8px 13px;
  margin-left: 8px;
}

#bis a:hover {}

#biz a:hover {}

작업 내용

margin값을 찾아서 각 요소에 적용해 주었다.

(header에는 margin:0 auto;를 주어 중앙 정렬이 되게 했다.)

(bis와 biz사이에 8px만큼의 공간이 있어 margin-left값을 주었다.)
padding값을 찾아서 각 요소에 적용해 주었다.

(gnb의 각 a 요소들은 내부 공간을 가지고 있다.)

(마찬가지로 bis, biz도 내부 공간을 주었다.)
float를 사용하여 가로 정렬해주도록 한다.

(로고와 각 메뉴의 li요소에 float:left;를 주어 가로 정렬하도록 한다.

float를 해제해야 할 경우 부모 요소에 overflow:hidden;을 적용하여준다.)
position을 사용하여 복잡한 위치를 지정해준다.(customermenu)

(customermenu의 위치는 header의 오른쪽에 딱 붙어 있으며 위로 32px만큼 떨어져 있다.)

3.&4. 텍스트 색, 크기, 간격이 적용되었다. 메뉴들마다 마우스를 갖다 대면 글자색, 밑줄, 배경색이 바뀐다.

작업 후

header부분이 완성되었다.

/*header전체부분*/
#headerWrap {
  width: 100%;
  height: 86px;
  background: rgba(0, 0, 0, 0.4);
}

#header {
  position: relative;
  width: 1140px;
  height: 100%;
  margin: 0 auto;
}

/*logo*/
#logo {
  float: left;
  width: 145px;
  height: 22px;
  margin-top: 32px;
}

#logo a {
  display: block;
  width: 145px;
  height: 22px;
  background: url(images/logo.png) no-repeat;
  text-indent: -9999px;
}

/*gnb*/
#gnb {
  overflow: hidden;
  width: 602.98;
  height: 86px;
}

#gnb ul {
  margin-left: 123px;
}

#gnb ul li {
  float: left;
  font-size: 16px;
  font-weight: 700;
}

#gnb ul li a {
  display: block;
  padding: 34px 36px;
  letter-spacing: -2px;
  color: rgba(255, 255, 255, 0.6);
}

#gnb ul li a:hover {
  text-decoration: underline;
  color: #fff;
}

/*customermenu*/
#customermenu {
  position: absolute;
  top: 32px;
  right: 0;
}

#customermenu ul li {
  float: left;
}

#customermenu ul li a {
  border: 1px solid #fff;
  border-radius: 3px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 12px;
  white-space: nowrap;
}

#bis a {
  display: block;
  width: 48px;
  height: 14px;
  padding: 8px 13px;
}

#biz a {
  display: block;
  width: 68.531px;
  height: 14px;
  padding: 8px 13px;
  margin-left: 8px;
  text-indent: -3px;
}

#bis a:hover {
  color: #000;
  background-color: #fff;
}

#biz a:hover {
  color: #000;
  background-color: #fff;
}

작업 내용

color와 font-size를 이용해 각각의 요소에 적용해 주었다.
logo의 경우 영역은 필요하지만 텍스트가 있으면 배경 이미지와 겹친다.

(text-indent:-9999px;을 이용해서 텍스트를 화면 밖으로 멀리 날려 버린다.)
원본의 gnb 텍스트들은 간격이 좁다 (폰트가 적용되어서 그런 것 같다.)

(우리는 폰트가 따로 없으므로 일단은 letter-spacing:-2px;로 간격을 좁혀주었다.)
biz의 텍스트는 가운데가 아니라 살짝 오른쪽으로 치우쳐져 있다.

(text-indent:-3px;을 이용해서 왼쪽으로 옮겨주었다.)
border를 사용해서 customermenu에 테두리를 주었다.

(border: 1px solid #fff;테두리를 주고 border-radius:3px; 모서리를 둥글게 했다.)
a:hover선택자를 이용해서 마우스를 갖다 대었을 때 배경이나 글자색이 변경되도록 했다.

header부분을 마무리해 보았다.

공감 또는 훈수 부탁드립니다.(내가 그걸 모를 꺼 같니?? 라던가 응 아니야~이거야~ 해주세요)

그럼~ 앙 제바

'IT아카데미 > 정적 웹사이트 만들기(실습)' 카테고리의 다른 글

네이버 클로바(Naver Clova copy) -사이트 카피 slider (0)	2020.05.20
네이버 클로바(Naver Clova copy) -사이트 카피 css 초기화 (0)	2020.05.17
네이버 클로바(Naver Clova copy) -사이트 카피 (0)	2020.05.14

PREV 이전 1 NEXT 다음

제발 제 코드에 훈수하세요