본문 바로가기
웹 개발/임의 홈페이지 따라 만들기

페이지 비주얼 영역 제작(1)

by chan00 2021. 12. 7.

오늘은 지난번 베너 작업에 이어 그 아래 비주얼 부분을 만들어 보겠습니다.

(앞 글에서 나온 css나 태그에 대한 설명은 생략하거나 간략히 하고 넘어가겠습니다.)

 

오늘치를 다 끝냈을 때의 화면입니다.

 

 

- index.html 작업

먼저 지난번 베너 작업에서는 전체 body 태그 안에 큰 틀인 header 태그로 묶어 그 안에서 베너 부분을

다 만들어 주었었습니다.

 

<body>
  <header>
      <h1><a href="#a">한솔홈데코</a></h1>
      <h2 class="hide">대메뉴</h2> 
      <nav class="lnb">
        <ul>
          <li><a href="#a"><span>제품정보</span></a></li>
          <li><a href="#a"><span>시공사례</span></a></li>
          <li><a href="#a"><span>고객센터</span></a></li>
          <li><a href="#a"><span>기업소개</span></a></li>
          <li><a href="#a"><span>사업분야</span></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>
</body>

 

이제 header 태그에서 베너 부분을 모두 끝냈으니 아래에 비주얼 부분 전체를 묶어줄 새로운 태그가 필요하겠죠?

여기서는 부문, 구역을 묶어주는 section 태그로 비주얼 전체 부분을 묶어줄 겁니다.

먼저 만들어야 할 사이트의 이미지를 보면,

이렇게 생겼습니다.

​

그럼 먼저 저 이미지가 광고 영역이라는 의미를 나타내는 h2 태그와, 양쪽 끝에 있는 버튼의 자리를 의미하는

a태그부터 만들겠습니다.

 

<h2 class="hide">광고영역</h2> <!--접근성 때문에 hide 사용-->
<a href="#a" class="prev">이전</a>
<a href="#a" class="next">다음</a>

 

사이트에 광고영역이라는 글씨가 보이면 안되니 앞 글에서 적용했던 hide 클래스를 적용시켜 글자를 보이지 않게 하고,

a 태그 안에 이전 버튼과 다음 버튼을 의미하는 부분을 작성해 줍니다.

여기서 클래스값은 각각 prev, next를 주었는데 이 부분은 css에서 건드릴 것이기에 기억만 하고 있으면 됩니다.

​

그 후 할 일을 저 이미지에서 찾아보면, 중간 아래쪽에 5개의 버튼들과 그 옆에 시작, 일시정지 버튼이 존재하는 것을

알 수 있습니다.

또한 5개의 버튼들로 보아 이미지도 5개가 존재한다는 사실을 알 수 있습니다.

그럼 이제 그 부분에 대한 html 코드를 작성할 텐데, 후의 css를 위해 기본적으로 묶어 주는 태그들을 바깥쪽에

쓴다는 점을 기억하며 코드를 보겠습니다.

 

<div class="control"><!--textalign center-->
  <div> <!--inline-block 설정, relative 포지션, 패딩값 오른쪽 45px -->
    <div> <!--position absolute, right 0-->
      <a href="#a" class="play">시작</a>
      <a href="#a" class="pause">일시정지</a>
    </div>
  <ul>
    <li class="on"><a href="#a">한솔홈데코 비전</a></li>
    <li><a href="#a">신상품</a></li>
    <li><a href="#a">비주얼3</a></li>
    <li><a href="#a">비주얼4</a></li>
    <li><a href="#a">비주얼5</a></li>
  </ul>
  </div>
</div>
<div class="con">
  <div class="slide">
    가구소재에서
    인테리어 자재까지
    <p>한솔홈데코가 편리하고 행복한 공간을 만들어 갑니다.</p>
  </div>
</div>

 

코드가 꽤 길죠? 위에서부터 차례대로 보겠습니다.

​

먼저 맨 위의 div class="control" 부분은 우리가 페이지의 오늘 할 비주얼 부분에 있는 버튼들 전체를 감싸고 있는

태그입니다.

(시작, 일시정지, 각 페이지에 해당되는 버튼 등....)

​

그리고 밑으로 내려가면 버튼들 전체를 묶고 있는 div 태그가 또 나오게 되는데 전체를 묶고 있는 div 태그가

2개 있는 이유는 css의 구분을 위해서이고, 이 부분은 css에 가서 보기 때문에 일단 지금은 <!-- --> 주석 안에 있는

css 내용을 저렇게 적용시키기 위해서 div를 2개 썼구나, 정도로 보면 되겠습니다.

​

밑으로 내려가면 시작, 일시정지 버튼을 묶고 있는 div태그가 있고, 그 안에 a 태그로 시작, 일시정지 버튼을 감싼 것을 볼 수 있습니다.

(class값들은 css에 가서 보겠습니다.)

그리고 div 태그를 빠져나가 보면 ul 태그 안에 li태그가 있는데 이 부분은 페이지 밑의 중간에 있는 5개의

버튼 부분입니다.

일단 li태그 안에 a 태그로 감싸져 있는 모습이고, 밑의 div 태그를 빠져나가면 div class="con" 태그가 보입니다.

​

저 부분은 5개 버튼에서 해당 버튼에 있는 이미지를 표현하는 태그로 이 부분도 div 태그로 2번 묶여있는데

여기서는 class 값만 잘 기억하고 넘어가겠습니다.

저기 텍스트 부분은 이미지의 설명 텍스트 부분을 나타낸 것이고, 이제 css 코드로 가 보겠습니다.

 

 

- index.css

먼저 전체적인 설정과, 이전, 다음 버튼 부분부터 하겠습니다.

​

전체를 감싸고 있는 태그는 section 태그인데, 여기에 class 값으로 visual을 주었으니 .visual 로 css를 넣겠습니다.

홈페이지를 보면 밑의 비주얼 부분이 페이지 양쪽 끝에서 살짝 떨어져 있기 때문에, 그 부분을 padding값으로

조정하겠습니다.

 

.visual {position: relative;padding:0 50px;}

 

(position relative는 해당 태그의 위치값을 변경하기 위해 준 값입니다.)

​

그 후에 광고영역 태그는 클래스값 hide로 인해서 자연스레 안보이게 될 것이고(hide css는 앞 글에서 나옵니다.),

이제 이전 버튼과 다음 버튼의 클래스값인 prev, next로 css를 줘 보겠습니다.

 

여기서 우리가 구현해야 할 것은 이전, 다음 버튼의 이미지를

여기서 가져와야 되고 그 버튼을 홈페이지에 위치해 있는 저 위치에 놓아야 합니다.

​

먼저 .prev와 .next의 css에서 해당 버튼의 이미지를 가져오는 것과 버튼을 제 위치에 놓는 작업을 하겠습니다.

 

.visual .prev, .visual .next {display: block;position: absolute;top: 50%; transform: translateY(-50%);
width:25px; height:47px; background: url(../image/sp_com.png) no-repeat; color: transparent;}
.visual .prev {left:82px; background-position: -128px -60px;}
.visual .next {right:82px; background-position: -158px -60px;}

 

먼저 전체적으로 설명드리면, 위의 .prev와 .next가 같이 있는 부분에서 버튼의 이미지 url값을 넣어주고,

그 이미지에서 해당 버튼의 위치값을 나타내는 background-position은 밑의 .prev와 .next에 각각 넣어 주었습니다.

(.prev와 .next의 공통 부분은 함께 묶어 위의 코드에 넣어주고, background-position이나 왼쪽에 위치할지 오른쪽에

위치할지와 같은 다른 css 부분은 아래에 따로 적어 준 것입니다.)

​

자세히 파 보면, 먼저 위치값을 지정하기 위해 display: block으로 값을 주었습니다.

그 후 포지션 값을 absolute로 주었는데, absolute는 자신의 부모 클래스, 태그 중 position: static 값이 아니면 해당

태그를 기준으로 위치값을 줄 수 있도록 하는 값입니다.

​

그렇게 absolute로 값을 주게 되면 해당 태그의 부모 태그인 section태그에 아까 .visual 로 포지션 값을 relative를

주었기 때문에, 이전 버튼과 다음 버튼은 section 영역을 기준으로 움직이게 되는 것입니다.

그래서 top: 50% 값을 주었을 때, 원래대로라면 페이지 전체에 해당되는 body태그를 기준으로 50% 위치로 이동을

하기 때문에 페이지 중간에 버튼이 위치하게 된다면, 지금은 section 영역을 기준으로 삼기 때문에 우리가 위의

페이지 이미지에서 보이는 것처럼 버튼들이 비주얼 영역의 중간 부분에 위치하게 되는 것입니다.

​

그렇게 위치를 지정해 주면,

위와 같이 버튼이 놓이게 되는데 자세히 보면 원래 홈페이지와 비교했을 때, 살짝 아래로 버튼의 위치가 쳐져 있습니다.

translateY 값에 - 값을 줘서 위로 좀 올려볼게요.

이제 위치가 맞는 것 같습니다.

​

그리고 color: transparent는 아까 html코드에서 의미론적인 이유로 넣었던 텍스트인 이전, 다음을 보이지 않게 하기

위해 컬러값을 투명색으로 준 것입니다.

​

background: url은 앞에서 설명했기에 간략하게 하고 넘어가겠습니다.

url 값으로 위의 버튼을 가져오기 위한 이미지 경로를 주고, width와 height 값은 버튼의 크기값을 나타낸 것입니다.

그리고 .prev 와 .next의 background-position의 값이 다른 이유는 세로 크기값을 똑같은 위치에 있기에 -60px로

동일하고, 가로의 시작점은 다르기 때문에 -128px, -158px로 다르게 넣어 준 것입니다.

마지막으로 .prev에 left:82px을 넣어 이전 버튼은 왼쪽에, .next에 right:82px로 다음 버튼은 오른쪽에 위치하게

되었습니다.

​

다음으로 바탕이 되는 이미지를 넣어 줄 텐데 여기서도 background:url로 이미지를 가져 올 것입니다.

(참고로 저는 이 코드의 첫 번째 글에서 크롬 확장 프로그램인 image downloader로 다운받아져 있는 이미지들을

image라는 폴더에 넣어 경로값으로 이미지들을 가져오는 것입니다.)

 

.visual .con > div {height: 640px;}
.visual .con .slide {background: url(../image/bg_main01.jpg) no-repeat center;}

 

보면 .visual .con이면 그 안에 있는 html 내용은

 

<div class="slide">
  가구소재에서
  인테리어 자재까지
  <p>한솔홈데코가 편리하고 행복한 공간을 만들어 갑니다.</p>
</div>

 

이 부분이 되는데 > div면 .con 클래스의 자식 중 div 태그에 적용시키겠다는 의미입니다.

그 div 태그에 height값으로 640px을 주었는데 이 세로 길이는 이미지의 세로 길이를 뜻합니다.

​

그리고 url에 저 이미지에 해당하는 그림이 bg_main01이라는 파일이기 때문에 그 url 값을 넣어 줬습니다.

​

마지막으로 5개의 버튼과 시작, 일시정지 버튼을 그리고 해당 위치에 놓는 것이 남았는데, 먼저 코드를 보겠습니다.

 

.visual .control {position: absolute;left: 0; bottom: 55px; text-align: center; width: 100%;}
.visual .control a {color:transparent;border:1px solid red;}
.visual .control > div {display: inline-block; position: relative; padding: 0 45px 0 0;}
.visual .control > div > div {position: absolute;right: 0;}
.visual .control > div > div a {overflow: hidden;display: inline-block;width: 8px; height:9px;}
.visual .control ul {display: inline-block; font-size:0; position: relative; top: -7px;}
.visual .control li {display: inline-block; padding: 0 3px;}
.visual .control li.on a {background: white;}
.visual .control li a {display: block; width: 50px; height: 3px;
background:rgba(255,255,255,0.5);border: none;}

 

(아직 미완성이며, 맨 위에서 보여준 저 이미지까지의 구현 과정입니다.)

​

먼저 .visual의 .control이면 우리가 하려고 하는 버튼 모두를 감싸고 있는 클래스값이고, 포지션 absolute는 위에서

말한 대로 .visual이 static이 아닌 relative이기 때문에 .visual의 영역을 기준으로 위치값을 잡기 위해 포지션을 준

것입니다.

 

이 상태에서 우리는 페이지의 중간에 놓아야 하기 때문에, 저 텍스트들을 일단 페이지의 맨 왼쪽에 붙일 필요가

있습니다.

left:0을 줘서 페이지의 맨 왼쪽에 붙이고, width:100% 값을 줘서 위치값을 조정할 때 부모의 영향을 받으면서,

유연하게 처리될 수 있도록 하고 text-align:center 로 가운데로 위치를 가져간 다음 bottom:55px을 줘서 아래에서

55px 떨어진 위치에 놓이게 하는 것입니다.

 

결과적으론 이렇게 되는 것입니다.

​

그 다음에

 

.visual .control a {color:transparent;border:1px solid red;}

 

이 부분은 저 텍스트를 투명하게 하고(transparent), border값을 줘서 우리가 위치를 조정할 때 알아보기 쉽게 일단

선을 그어 놓습니다.

 

이렇게 됩니다.

 

 

.visual .control > div {display: inline-block; position: relative; padding: 0 45px 0 0;}
.visual .control > div > div {position: absolute;right: 0;}

 

이제 우리가 해야 될 것은 5개 버튼을 나란히 놓고, 오른쪽에 시작과 일시정지 버튼을 놓는 것입니다.

그러기 위해서는 시작, 일시정지 버튼 부분을 오른쪽에 놓아야 하고, 리스트로 되어 있는 버튼들을 나란히 놓는

작업도 해야 할 것입니다.

일단 전체를 감싸는 div 태그의 display에 inline-block을 주어 위치값을 주도록 설정하고, relative로 .control 영역을

기준으로 움직이게 바꿔 줍니다.

그리고 padding-right 부분에 45px의 영역을 주면 그만큼의 공간이 생기고, div의 자식 div태그 즉 시작,

일시정지 버튼 부분에 right:0 을 줌으로써 시작, 일시정지 버튼이 5개 버튼의 오른쪽에 오도록 했습니다.

 

.visual .control > div > div a {overflow: hidden;display: inline-block;width: 8px; height:9px;}

 

이 코드에서 가장 중요한 overflow: hidden의 뜻은, 현재 페이지를 보면 텍스트의 color값을 투명색으로 지정해

텍스트가 보이지는 않지만 텍스트의 크기만큼 공간을 차지하고 있는 것이 보입니다.

하지만 실제 우리가 가져 올 시작, 일시정지 버튼의 크기는 더 작은 공간을 차지하기 때문에 그 크기를 지정해 줄

필요가 있습니다.

그 때 쓰는 것이 저 overflow인데, overflow는 요소내의 컨텐츠가 너무 커서 요소내에 모두 보여주기 힘들때

그것을 어떻게 보여줄지를 지정하는 속성으로 hidden값을 주게 되면 넘치는 부분은 잘라버리기 때문에 우리가

width값과 height값으로 크기를 지정할 수 있게 됩니다.

 

이렇게 크기 지정이 되었습니다.

​

글이 길어지기에 나머지 코드는 한번에 쭉 설명하겠습니다.

 

.visual .control ul {display: inline-block; font-size:0; position: relative; top: -7px;}
.visual .control li {display: inline-block; padding: 0 3px;}
.visual .control li.on a {background: white;}
.visual .control li a {display: block; width: 50px; height: 3px;
background:rgba(255,255,255,0.5);border: none;}

 

이제 5개 버튼을 list 태그의 형태처럼이 아닌 일렬로 쭉 배치해야 하기 때문에 먼저 inline-block을 지정해 주는

모습입니다.

그리고 버튼 사이의 빈틈 공간은 li의 css에서 3px로 우리가 따로 지정을 해 주기 때문에 그 전에는 font-size값을

0으로 줘서 일단 버튼들끼리 딱 달라붙어 있게 합니다.

(그렇게 해야 우리가 원하는 길이만큼 빈틈을 자유롭게 줄 수 있기 때문입니다.)

​

마찬가지로 relative는 부모인 .control 영역 내에서 움직이기 위해 준 값이고, top:-7px은 버튼의 위치를 위쪽으로

살짝 조정해 준 것입니다.

아래의 li 태그의 css는 방금 빈틈 공간을 넣기 위한 것이라고 설명했으니 넘어가겠습니다.

​

다음으로 li.on a의 css 부분인데, 이 부분을 html에서 찾아보면

 

<li class="on"><a href="#a">한솔홈데코 비전</a></li>

 

이 부분입니다.

​

원래는 현재 이미지가 화면에 보여질 때 해당 버튼이 흰색으로 보여져야 되는 것인데 그 부분은 아직 구현이

되지 않았으므로 일단 색깔 변경만 흰색으로 해서 되는지만 확인한 것입니다.

​

마지막으로 li a 태그의 css 부분입니다.

이 부분이 저 막대 모양의 버튼을 보여지게 만드는 css 부분이며 크기는 width값 50px, height값 3px로 주었습니다.

(물론 그 전에 display를 block으로 지정해 주었기 때문에 크기 지정이 가능한 것입니다.)

​

마지막으로 background 색깔을 255, 255, 255, 0.5로 주었는데 마지막 숫자가 0이면 아예 투명해져서

막대 모양이 보이지 않게 됩니다.

그래서 마지막값을 0.5로 주어 우리가 원하는 살짝 투명색으로 보이는 색깔을 지정해 준 것이고, 위쪽에서 우리가

영역 구분을 쉽게 하기 위해 주었던 border 1px solid red 선을 없애기 위해 border: none으로 줌으로써

 

최종적으로 이런 모양의 페이지가 완성되는 것입니다.

 

 

 

 

 

 

 

 

​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

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

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

'웹 개발 > 임의 홈페이지 따라 만들기' 카테고리의 다른 글

페이지 매거진 영역 제작(1)  (0) 2021.12.13
페이지 컨텐츠 영역 제작  (0) 2021.12.09
페이지 비주얼 영역 제작(2)  (0) 2021.12.09
페이지 header 제작(2)  (0) 2021.12.07
사전 준비&페이지 header 제작(1)  (0) 2021.12.07

관련글

댓글

티스토리툴바