사전 준비&페이지 header 제작(1)

이번에는 어떤 홈페이지와 유사한 페이지를 비슷하게 만들어 보는 작업을 시작하겠습니다.

(이번에는 코드 전체가 아닌 설명 중간중간 꼭 필요한 부분만 코드와 같이 쓰겠습니다.)

(현재는 해당 홈페이지의 디자인이 바뀌어 있어 해당 포스팅의 내용과의 디자인이 다릅니다.)

 

- 소개 & 사전 준비

먼저 어떤 것을 하는지에 대해 소개해 드리겠습니다.

 

이 페이지와 비슷한 페이지를 만드는 작업을 하겠습니다.

​

시작하기 전에 사전 준비로 페이지에 있는 이미지들이 필요한데, 먼저 크롬 웹스토어에서 두 가지를 다운받아 줍니다.

​

1. Full page screen capture

먼저 저 페이지는 지금 스크롤로 아래까지 내용이 있는 상태이기에 스크롤과 상관 없이 전체 페이지의 모습을 찍어주는 확장 프로그램을 설치합니다.

(굳이 GoFullPage 저 프로그램이 아니어도 Full page 스크린샷만 찍을 수 있으면 됩니다.)

​

2. image downloader

저 페이지에 있는 많은 이미지들을 다운로드 해 주는 확장 프로그램입니다.

(위와 같이 굳이 제가 다운받은 저 프로그램이 아니어도 기능만 같으면 어떤 것이든 상관 없습니다.)

​

이미지와 풀 페이지를 찍으면 합쳐서 많은 양의 이미지들이 나올 텐데, 거기서 .do 파일은 필요 없으니 다 지워버리고

남은 이미지들을 따로 폴더에 넣어 줍니다.

(저는 WAMP의 htdocs 폴더 안에 따로 webproject01이라는 폴더를 만들고, 거기에 image라는 폴더를 만들어

거기에 모아 두었습니다.)

 

- 페이지의 베너 부분 만들기

먼저 index.html 문서를 만들어 html 기본 틀을 짭니다.

그리고 html의 head 부분에 css 파일을 link 태그로 연결해 주는데, 저는 index.html과 같은 폴더의 css 폴더 안에

모아 두었습니다.

 

<link rel="stylesheet" href="css/default.css">
<link rel="stylesheet" href="css/index.css"

 

default.css는 어떤 페이지든 기본 css 틀을 만들어 둔 파일인데 내용이 길어 필요한 내용이 생길 때만 소개해

드리겠습니다.

index.css 파일은 제가 새로 만든 것인데 이제 저기와 default.css에 하나씩 추가 해 보겠습니다.

​

먼저 index.html 파일부터 작성을 하자면, 일단 베너 부분 왼쪽의 한솔홈데코 이미지, 중간의 제품정보, 시공사례 등의

내용을 작성하겠습니다.

 

<header>
      <h1><a href="#a">한솔홈데코</a></h1>
      <h2 class="hide">대메뉴</h2> 
      <nav class="lnb"> <!--nav 태그가 여러개이기 때문에 css를 위해 class값을 줌-->
        <ul>
          <li><a href="#a">제품정보</a></li>
          <li><a href="#a">시공사례</a></li>
          <li><a href="#a">고객센터</a></li>
          <li><a href="#a">기업소개</a></li>
          <li><a href="#a">사업분야</a></li>
        </ul>
      </nav>
      <h2 class="hide">관련서비스</h2>
      <nav class="spot">
        <ul>
          <li><a href="#a">제품찾기</a></li>
          <li><a href="#a">SITEMAP</a></li>
          <li><a href="#a">BLOG</a></li>
        </ul>
      </nav>
</header>

 

일단 여기서 class들은 css에서 다룰 것이기에 기억만 해두고 넘어가고, 쭉 보면 베너의 내용들을 적어놓은 것을

알 수 있습니다.

여기서 제품정보~사업분야까지 ul 리스트로 묶고, 제품찾기~BLOG까지 ul 리스트로 묶었습니다.

그리고 각각의 메뉴마다 a 태그를 달고 href="#~"을 해 주었는데 href에서 링크가 아닌 # 뒤에 붙이면 같은 페이지

내에서 해당 장소로 갈 수 있게 합니다.

​

이제 저기의 class 값을 기억한 상태에서 css를 보겠습니다.

 

.skip { position: absolute; left: 0; top: -100px; width: 100%; height: 50px; line-height: 50px;
background: #000; color: #fff; text-align: center; font-size: 14px; transition: all 0.5s;}
.skip:focus { top:0; }
.hide {position: absolute; left: -5000px}

 

먼저 default.css에 추가한 내용입니다.

일단 .skip .skip:focus .hide 이 세 가지는 다른 곳에서도 쓰일 수도 있어 default.css에 넣은 것입니다.

​

.skip을 먼저 보면 class값을 찾으면 위의 본문바로가기에 href="#content" class="skip"가 되어 있는 것을 볼 수

있습니다.

여기서 원하는 기능은 제가 마우스로 페이지의 위쪽을 focus하면 본문바로가기 메뉴가 나와 그것을 누르면 본문으로

갈 수 있는 기능인데, .skip 내용을 하나씩 보면 먼저 position: absolute로 해당 기능이 부모 태그 이런것에 영향을

받지 않고 독립적으로 움직일 수 있도록 만들어 줍니다.

​

그리고 그냥 .skip일 때에는 안 보이다가 focus가 된 상태여야 모습을 보이는 것이기에 top: -100px로 화면에서

안 보이게 해 놓았습니다.

그 외에 left: 0 ~ font-size: 14px 까지는 해당 내용의 크기라던지 색깔, 글자 크기 등을 꾸며 주는 것이기에 생략하고

마지막으로 transition: all 0.5s; 을 주어 focus 되었을 때 좀 더 천천히 나오도록 설정값을 주었습니다.

​

그 뒤에 .skip:focus 의 css로 top:0; 을 주면 기존에는 top : -100px로 인해 모습이 보이지 않던 메뉴가 focus 되었을 때 top:0으로 위에 나타나게 되는 것입니다.

​

밑의 .hide는 본문으로 가 보면 대메뉴, 관련서비스에 class="hide" 가 붙어 있는 것을 볼 수 있습니다.

이건 원래 홈페이지를 보면 없는 메뉴이지만 각 메뉴의 구분을 위해 만들어 두고 숨기는 것이 여기서 원하는

기능입니다.

​

위와 마찬가지로 position: absolute 를 주고 left:-5000px을 주었는데 -5000이란 값은 중요하지 않고 위의 top:-100px과 같이 값을 보이지 않게 하기 위한 임의의 값입니다.

여기서 css로 left:-5000px같은 방법이 아닌 display:none; 으로 안보이게 할 수도 있지만 이러면 예를 들어 시각장애인을 위한 홈페이지 스캔을 했을 때 display:none을 하면 스캔에 잡히지 않는 등 접근성 측면을 봤을 때 저렇게 한 것입니다.

​

이제 index.css로 가 보겠습니다.

​

<index.css>

 

header {height: 81px; text-align: center;}
header h1 { position: absolute; left:50px; top:0; padding: 14px 0 0;}
header h1 a {display: block; width: 110px; height: 48px; color: transparent;
            background: url(../image/sp_com.png) no-repeat -300px 0;}
header .spot { position: absolute; right:50px; top:0; }
header .lnb li {display: inline-block;}

 

위에서부터 차례대로 보겠습니다.

​

header 태그는 본문을 봤을 때 베너 내용 전체를 감싸고 있는 태그로, 전체적인 css를 꾸며 주는 단계로써

height값과 text-align값을 꾸며 주었습니다.

그리고 밑의 header 안의 h1 태그를 꾸며 주었는데 본문으로 가 보면 한솔홈데코 라는 부분입니다.

위에서 보았듯 부모 태그와 독립적으로 꾸며 주기 위해 absolute 값을 주고, left와 top 값을 주고 padding으로

위쪽에서 14px 정도 떨어뜨려 한솔홈데코의 위치를 페이지 좌상단에 놓이도록 꾸며 주었습니다.

​

다음 header h1 안의 a태그를 보면 위와 동일한 한솔홈데코를 가리키는 것을 알 수 있습니다.

보면 a태그는 기본값 display가 inline값이고, inline은 width와 height값이 무시되거나 margin, padding값의 상하 간격은 무시되는 등의 특징이 있기에 display를 block으로 해 준 모습입니다.

그 뒤에 transparent로 한솔홈데코라는 글자를 투명색으로 설정했습니다.

여기서 중요한 것은 background 속성인데 우리가 원하는 기능은 아까 image downloader를 통해 홈페이지에서

다운받은 이미지 중 한솔홈데코 이미지를 가져와야 한다는 것입니다.

보면 이런 이미지가 다운 받아져 있을 텐데, 저기서 맨 위에서 오른쪽에 있는 Hansol 저 이미지를 가져와야 합니다.

먼저 이미지의 url을 써 주는데, css 파일 기준으로 저의 경우에는 ../image/sp_com.png 상대 경로가 이렇게 나오기에

url 안에 적어 주고, 뒤의 -300px 0은 이미지의 좌상단 꼭짓점이 0px이라고 보았을 때, 거기서 우리가 원하는 Hansol

이미지까지의 거리가 300px이라는 뜻입니다.

저렇게 값을 적어 주면 원하는 Hansol 이미지 앞까지 도착하게 되고, 그 위의 width값과 height값은 바로 저 Hansol 이미지의

가로x세로 px 크기였던 것입니다.

​

그렇게 설정을 하게 되면,

위와 같이 Hansol 이미지가 우리가 원하는 좌상단 위치에 놓이게 되는 것입니다.

​

그 아래 코드를 이어서 보면, header 안의 .spot 클래스에 대한 내용이 있는데 본문을 보면 원본 홈페이지의 우상단에

위치한 제품찾기, SITEMAP, BLOG를 감싸고 있는 nav 태그의 class가 spot입니다.

그럼 여기서 위의 Hansol이 left:50px로 좌측에서 50px 떨어진 지점에 놓은 것처럼 right:50px로 우측에 배치시킨

것을 볼 수 있습니다.

​

마지막으로 아래의 header .lnb li 부분을 보면 본문에서 제품정보~사업분야 부분이 해당되는데 여기서 할 일은

저 텍스트들을 리스트처럼 세로로 쭉 나열하는 것이 아닌 위의 이미지와 같이 가로로 중앙정렬해서 쭉 나열하는 것이

목적입니다.

이건 생각보다 간단히 해결이 되는데, display를 inline-block 값으로 주는 것입니다.

원래 리스트는 block값처럼 세로로 쭉 정렬이 되는데, inline-block값은 block이 아닌 inline처럼 다른 속성들과

붙어있을 수 있으면서도 block처럼 margin이나 padding 값 등을 설정할 수 있게 되는 것입니다.

그럼 css 코드 맨 위의 header 부분에서 이미 text-align: center 를 해 놓았기 때문에 우리가 원하는 것처럼 가운데로

정렬이 되면서도 리스트의 가로 정렬이 해결되는 것입니다.

 

 

 

 

 

 

(https://www.inflearn.com/course/%ED%8D%BC%EB%B8%94%EB%A6%AC%EC%85%94-%EC%9B%B9%EC%82%AC%EC%9D%B4%ED%8A%B8%EB%A7%8C%EB%93%A4%EA%B8%B0-%EB%A6%AC%EB%B2%A0%ED%95%98%EC%96%80/dashboard)

-> 이 내용은 해당 강의의 내용을 참고하였음을 밝힙니다.

(강의하시는 분께 양해를 구했습니다.)