우리는 초기화를 통해 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/">기술 · 솔루션</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 |