전 글에 이어서 매거진 영역을 마저 끝내도록 하겠습니다.
지난번에는 딱 여기까지 했었습니다.
먼저 SB Flooring 부분부터 디자인을 해 보겠습니다.
<div>
<h3>SB Flooring<span>[오리지널,헤링본,강,엠보]</span></h3>
<p>SB마루는 한국 주거문화에 최적화되어 습기에 강하고, 열효율이 우수한 친환경 차세대 온돌마루입니다.</p>
<a href="#a">자세히보기</a>
</div>
.magazine .slide_box .left div h3 {color:white;font-size: 20px;}
.magazine .slide_box .left div h3 span {font-weight: normal; display: block;}
html 코드의 h3 부분부터 css를 했습니다.
원본 페이지의 글씨 색깔, 크기를 맞춰 주고 밑의 [~] 괄호 부분은 줄넘김과 h3의 굵기 효과가 들어가 있지
않기 때문에 span에 따로 css를 줘서 굵기를 없애고(normal) block값으로 줄넘김 효과를 주었습니다.
그리고 밑의 p 태그 영역과 a 태그(자세히보기 버튼) 영역을 하겠습니다.
<html 코드>
<p>SB마루는 한국 주거문화에 최적화되어 습기에 강하고, 열효율이 우수한 친환경 차세대 온돌마루입니다.</p>
<a href="#a">자세히보기</a>
먼저 p 태그부터 하겠습니다.
.magazine .slide_box .left div p {padding:9px 0 0; color: white;font-size: 16px;
text-align: left; line-height: 24px;}
기본적인 css이기 때문에 간단히 설명만 하겠습니다.
padding으로 위로 9px을 줘서 h3영역과 간격을 주고, 글씨 색, 크기 설정에 왼쪽 정렬,
글 간격(24px)을 주었습니다.
.magazine .slide_box .left div a {display: block;border:1px solid white; width: 160px;
height: 45px;color: white; font-size: 16px;line-height: 45px; text-align: center;}
다음으로 맨 아래에 위치한 자세히보기 버튼을 했습니다.
먼저 버튼 영역의 크기를 주기 위해 block 값을 주고, 외곽에 흰색 선을 그렸습니다.(border)
그 다음 가로, 세로 크기를 주고, 글씨 색(white)과 크기(16px)을 주었습니다.
자세히보기 텍스트가 버튼 영역의 정 가운데에 위치해 있기 때문에 line-height 값을
세로 전체 크기(45px)로 주고 text-align을 center로 주면 텍스트가 정 가운데로 오게 됩니다.
이제 a태그를 아래쪽에 붙여 보겠습니다.
.magazine .slide_box .left div a {display: block;border:1px solid white;
width: 160px; height: 45px;color: white;font-size: 16px;line-height: 45px;
text-align: center;position: absolute; right:20px;bottom:40px;}
먼저 position값을 absolute로 주었습니다.
그럼 부모 태그를 쭉 따라 올라가면 .left에 relative 값이 있고, .left의 영역을 기준으로 배치값을 주면
될 것입니다.
그 다음에 오른쪽에서 20px만큼 떨어지고, 아래쪽에서 40px 떨어지게 하면 위의 이미지와 같이
자세히보기 버튼이 아래쪽으로 붙게 되는 것입니다.
이제 .left의 구역은 정리가 끝난 것 같으니 .right의 영역을 꾸며 보도록 하겠습니다.
.right의 css를 보면 바탕색이 흰색으로 되어 있고, 버튼들이 전체 구역에서 조금씩 떨어져 있습니다.
그리고 전체 크기도 정해져 있으니, padding과 width, height값 등을 설정해 주면 되겠군요.
.magazine .slide_box .right {float: right;width: 380px; height: 430px;
background: white;padding: 20px 20px 0;box-sizing: border-box;}
위에서 설명한 것은 넘어가고, 우리가 padding값으로 아래쪽을 빼고 20px을 줘 버리기만 하면 이미 전체
사이즈를 정한 상태에서(width, height) padding값까지 크기에 포함되기 때문에 box-sizing을
이용했습니다.
(전에 이것에 대한 의미가 나왔었죠? border-box로 설정하면 전체 크기는 설정한 값으로 고정됩니다.)
(아래쪽 padding값을 주지 않은 이유는 뒤에 a 버튼들 사이에 간격을 줄 때 padding으로 주면 여기서
설정한 아래 padding값까지 추가되기 때문에 여기서는 아래쪽 padding을 주지 않은 것입니다.)
그럼 일단 버튼들이 padding으로 떨어지고, 전체 영역에 대한 css는 이정도로 하고 세부 사항으로
넘어가겠습니다.
일단 저 a태그들은 ul 태그 안의 li 태그들이 하나의 요소들이기 때문에 li부터 하겠습니다.
.magazine .slide_box .right li {padding:0 0 20px;}
.magazine .slide_box .right li a {position: relative;display: block;padding: 0 0 0 100px;}
.magazine .slide_box .right li a img {position: absolute;left: 0;top: 0;}
먼저 li태그에 아래쪽에만 padding값을 20px을 줘서 사이 간격값을 주고, 이미지를 왼쪽에 붙이기 위해
a 태그에 포지션값 relative, img 태그에 absolute를 줘서 left 0, top 0으로 왼쪽에 붙일 수 있게
했습니다.
(padding 100px은 왼쪽에 100px만큼의 공간을 할당해서 그 공간에 이미지를 넣을 수 있게 한 것입니다.)
display block을 한 이유도 크기 설정을 위해서입니다.
근데 이렇게 하면,
이렇게 우리가 예상한 것과는 다른 그림이 나옵니다.
padding으로 20px씩 떨어져 있을 줄 알았는데, 저렇게 딱 붙은 상태로 나오게 됩니다.
왜냐하면 우리가 absolute 포지션으로 띄었고, img 태그에 따로 크기값을 설정하지 않았으니 오른쪽의
텍스트 영역만큼만 인정되고 나머지 이미지 크기는 무시되고 올라오기 때문에 저런 결과가 나온 것입니다.
그럼 텍스트 영역을 먼저 작업하고 이미지의 크기값도 설정 해 주도록 할게요.
먼저 텍스트 영역부터 보면 strong 부분과 일반 텍스트 부분으로 나뉘어 있습니다.
strong 부분은 태그로 css 적용하고, 일반 텍스트는 a태그로 css를 적용하겠습니다.
.magazine .slide_box .right li a {position: relative;display: block;padding: 0 0 0 100px;
font-size: 16px; color: #333;}
.magazine .slide_box .right li a strong {font-size: 13px; color: #000;display: block;}
a 태그에 글씨 크기와 색깔을 지정하고, strong 태그에 따로 글씨 크기와 색깔을 지정한 다음 줄바꿈을 위해
strong에 block값을 주게 되면
이렇게 화면이 보이게 됩니다.
이제 텍스트를 세로 가운데 정렬을 줘야 하는데, 여기서는 display table의 속성값을 이용해 볼게요.
먼저 html 코드를 수정하겠습니다.
<div>
<img src="image/img_thoumb2.png">
<strong>바닥재>강화마루>소폭</strong>
리얼우드[7704]
</div>
.magazine .slide_box .right li a {position: relative;display: table;padding: 0 0 0 100px;
font-size: 16px; color: #333;}
a 태그의 display를 기존의 block에서 table로 바꾸고, html에서는 a 태그 안에 div 태그로 감싸줬습니다.
이제 div 태그에 display를 table-cell 값을 설정을 해 줄 텐데, table이라는 속성 자체가 안의 table-cell
들의 개수가 몇 개든 동일한 영역을 준다는 특징이 있습니다.
그럼 기존 a 태그의 display를 제외한 css 내용들은 a 태그의 div 태그로 옮겨 주고, 거기에 display값을
table-cell로 주겠습니다.
.magazine .slide_box .right li a div {position: relative;padding: 0 0 0 100px;
font-size: 16px; color: #333;display:table-cell;height: 82px; vertical-align: middle;}
추가된 내용이 height값과 vertical 값인데 버튼의 세로 크기를 지정해 주고, text-align이 아닌
table이기 때문에 vertical-align을 써야 세로 가운데 정렬이 될 것입니다.
그리고 버튼 클릭의 영역을 넓히기 위해 a 태그에 가로 값을 100% 주겠습니다.
.magazine .slide_box .right li a {display: table;width: 100%;}
그럼 커서를 올렸을 때 클릭 가능 영역이 가로로 길게 늘어나게 됩니다.
나머지 밑의 이미지가 보이지 않는 이유는 html 코드상에서 다른 버튼들에게 div 태그를 주지 않았기
때문인데요, 나머지 html 코드도 수정하겠습니다.
<ul class="right">
<li><a href="#a">
<div>
<img src="image/img_thoumb2.png">
<strong>바닥재>강화마루>소폭</strong>
리얼우드[7704]
</div>
</a></li>
<li><a href="#a">
<div>
<img src="image/img_thoumb3.png">
<strong>바닥재>SB마루>헤링본</strong>
골든티크[8705]
</div>
</a></li>
<li><a href="#a">
<div>
<img src="image/img_thoumb1.png">
<strong>바닥재>SB마루>오리지널</strong>
콘크리트[8712]*마블스톤
</div>
</a></li>
<li><a href="#a">
<div>
<img src="image/img_thoumb4.png">
<strong>바닥재>SB마루>오리지널</strong>
체스트넛[8706]
</div>
</a></li>
</ul>
이렇게 모든 a 태그에 div를 감싸주게 되면,
이렇게 깔끔하게 이미지와 텍스트들이 배치되는 것을 볼 수 있습니다.
이제 컨텐츠 영역은 완성을 했고, 원본 페이지처럼 컨텐츠를 가운데 정렬을 시켜 주도록 하겠습니다.
.magazine .slide_box > div {position: absolute;left: 50%;width: 1180px; height: 430px;}
컨텐츠 영역 전체를 감싸고 있는 div 태그에 포지션값 absolute 추가와 left 50%를 줘서 이동을 시키면
이렇게 오른쪽으로 치우친 형태가 나옵니다.
우리는 중간에 컨텐츠를 둬야 하니 translate를 활용 해 보겠습니다.
.magazine .slide_box > div {position: absolute;left: 50%;width: 1180px; height: 430px;
transform: translate(-50%,0);}
보면 왼쪽으로 x축만 50%만큼 이동하게 되는데, 지금 왼쪽 영역의 절반(50%)만큼 이동하면 가운데가
됩니다.
그럼 이렇게 가운데 정렬까지 했습니다.
추가로 "한솔 매거진" 제목 부분과도 떨어뜨리겠습니다.
.magazine .slide_box > div {position: absolute;left: 50%;width: 1180px; height: 430px;
transform: translate(-50%,0);top:150px;}
그리고 밑에 버튼들과 양옆 버튼의 위치도 수정을 하겠습니다.
현재 버튼들에 대한 디자인은 .slide로 공용으로 쓰고 있기 때문에, 여기 기준에 맞춰서 .slide의 버튼들에
위치값을 수정하면 위의 비주얼 영역에 있는 버튼들의 위치값이 이상해지게 될 것입니다.
그러면 .magazine에 .slide가 있을 때의 경우를 따로 빼서 위치값을 조정하면 되겠죠?
.magazine.slide .control {bottom: 48px;}
이렇게 하면 .magazine에서의 slide일 때는 bottom값이 기존의 55px이 아니라 48px로 조정됩니다.
이렇게 아래의 버튼들이 살짝 밑으로 내려가게 조정했습니다.
그리고 양옆의 버튼들을 컨트롤 영역의 바로 양옆으로 붙여 줄 건데 이 부분은 left, right의 px값으로 주지
않고 %값을 줘서 해결하겠습니다.
왜냐하면 px값을 줘서 위치값을 조정하면 화면의 해상도가 달라졌을 때라던지 브라우저의 크기 등의
유동적인 상황에서 보이는 화면이 우리가 위치시킨 것과 다르게 보일 수 있기 때문입니다.
.magazine.slide .prev {left: 50%;}
.magazine.slide .next {right: 50%;}
먼저 이렇게 값을 줘서 버튼을 가운데로 몰리게 한 다음에, 바로 전에 썼던 -50%와 비슷한 방법으로
위치값을 조정하겠습니다.
근데 화면에 가운데에 있어야 할 버튼들이 보이지 않는데요.
이것은 .slide의 이전, 다음 버튼의 zindex값이 낮아서 컨텐츠 영역에 가려져 보이지 않는 것입니다.
(페이지는 기본적으로 쌓임 구조를 갖고 있는데, 여기서의 우선 순위에 대한 값을 zindex라고 합니다.)
그럼 .slide의 이전, 다음 버튼의 css에다가 zindex값을 줘 보겠습니다.
.slide .prev, .slide .next {display: block;position: absolute;top: 50%; transform: translateY(-50%);
width:25px; height:47px; background: url(../image/sp_com.png) no-repeat; color: transparent;z-index: 10;}
그럼 이렇게 보이게 됩니다.
.magazine.slide .prev {left: 50%;margin-left: -640px;}
.magazine.slide .next {right: 50%;margin-right: -640px;}
그리고 margin으로 각자 원본 페이지 화면대로의 위치에 놓으면 이렇게 됩니다.
이러면 브라우저의 화면이 유동적이거나, 해상도와 같은 상황에서도 저 위치에 똑같이 있게 됩니다.
그런데 보면 버튼이 컨텐츠 영역의 완전히 중간 위치에 있는 것이 아닙니다.
그것도 margin값으로 조정을 하겠습니다.
.magazine.slide .prev {left: 50%;margin:26px 0 0 -640px;}
.magazine.slide .next {right: 50%;margin:26px -640px 0 0;}
이제 마지막으로, 매거진에서 컨텐츠 영역의 양옆에 있는 영역이 생기도록 하겠습니다.
바로 컨텐츠 영역의 양옆에 있는 페이지입니다.
먼저 html코드에서 slide_box 클래스 안의 전체를 묶고 있는 div 태그 부분 전체를 복사해서 원래 있던
코드의 위와 아래에 똑같이 복사 해 주겠습니다.
그리고 전에 한 번 썼었던 nth-child 속성을 이용해 각각 매거진 영역의 왼쪽과 오른쪽 영역에 붙도록
하겠습니다.
.magazine .slide_box > div:nth-child(1) {margin-left: -1280px;}
.magazine .slide_box > div:nth-child(3) {margin-left: 1280px;}
그럼 이렇게 양옆에 붙게 되는데, 이렇게 하면 가로 스크롤이 생겨버립니다.
그 점을 .magazine(전체 영역)에 overflow:hidden 값을 줘서 넘어가는 영역은 잘라버리도록
하겠습니다.
.magazine {overflow: hidden;background:#dfd9d1;position: relative; height: 670px;}
그럼 가로스크롤이 생기지 않게 됩니다.
사실 여기서는 실제 페이지처럼 버튼을 누르면 페이지가 넘어가거나 하는 기능은 없습니다.
html과 css로 사이트 구색맞추기에 가깝기 때문에 만약 기능을 넣거나 하려면 자바스크립트와 같은
언어를 써서 기능을 넣어줘야 할 것입니다.
이로써 매거진 부분은 완성하게 되었습니다.
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.14 |
|---|---|
| 페이지 컨텐츠 베너 영역 제작(1) (0) | 2021.12.14 |
| 페이지 매거진 영역 제작(1) (0) | 2021.12.13 |
| 페이지 컨텐츠 영역 제작 (0) | 2021.12.09 |
| 페이지 비주얼 영역 제작(2) (0) | 2021.12.09 |
댓글