페이지 컨텐츠 베너 영역 마무리&공지, 뉴스 영역 제작(1)

오늘은 전 글에 이어 컨텐츠영역의 베너 부분의 마무리와, 아래 공지 부분도 시작하겠습니다.

(전 글에서 다뤘던 개념들은 간략한 설명만 하고 넘어가도록 하겠습니다.)

 

지난번에는 이 상태까지 했었습니다.

그리고 이게 오늘 할 부분의 원본 홈페이지입니다.

이어서 검색하기 버튼의 css를 하겠습니다.

 

.notice > div .top > div a {display: block;height: 45px; line-height: 45px;text-align: center;
color: white;background: #2d5b79;font-size: 15px;}

 

원본의 버튼 디자인을 보면 위의 입력칸이나 select 태그 부분과 width 값이 같고, 글씨는 흰색에

세로 가운데 정렬이 되어 있습니다.(height, line-height, color, text-align)

그리고 바탕색과 글씨 크기의 지정이 되어 있는데 이에 대한 css입니다.

(background, font-size)

​

세로 가운데 정렬에 대한 개념은 전 글에서 다룬 적이 있었는데, 간략하게 설명하면 text-align 값을

center로만 주면 가로 가운데 정렬은 되지만 세로 가운데 정렬은 되지 않습니다.

그럴 때 height값을 준 상태에서 line-height 값을 height값과 동일하게 주면 세로로도 정렬이 됩니다.

​

그리고 가로값은 이미 a 태그의 부모인 div 태그의 css에서 준 상태이고, 그 상태에서 a 태그의 display를

block으로 주게 되면 그 한 줄을 a 태그의 영역이 모두 차지하라는 이야기가 되니 가로 값도 맞춰지게

됩니다.

 

이렇게 됩니다.

이제 버튼의 위치값을 조정하겠습니다.

 

.notice > div .top > div div {padding:0 0 10px;}

 

먼저 div 태그들에게 각각 아래로 10px씩의 padding값을 줬습니다.

(div 태그 > select, input, 검색하기 버튼)

그럼 이렇게 사이 간격이 10px씩 주어지게 되고, 이제 검색하기 버튼의 위쪽 margin을 주겠습니다.

(padding을 주지 않는 이유는 padding은 이미 높이값을 준 상태에서 padding을 주면 버튼이 더 늘어나고

커질 수 있기 때문입니다.)

 

.notice > div .top > div a {display: block;height: 45px; line-height: 45px;text-align: center;
color: white;background: #2d5b79;font-size: 15px;margin: 20px 0 0;}

 

이렇게 제품 찾기 영역의 디자인도 끝났습니다.

​

원본 페이지를 보면, 왼쪽 3개의 이미지 버튼 위에 마우스 커서를 올렸을 때 배경색이 바뀌며 아래에 설명

텍스트가 나오는 것을 볼 수 있습니다.

이 부분에 대해서도 css를 적용시켜 보도록 하겠습니다.

 

<ul>
            <li><a href="#a">테마 갤러리<span>한솔의 행복한
            삶의 공간 이야기</span></a></a></li>
            <li><a href="#a">블로그<span>소소한 한솔 인테리어
            이야기</span></a></li>
            <li><a href="#a">대리점 찾기<span>가까운 한솔
            홈데코 매장 확인</span></a></li>
</ul>

 

일단 html 태그에서 span 태그를 이용해 커서를 올렸을 때 밑에 나오게 될 텍스트를 넣습니다.

 

.notice > div .top > ul a span {display: block;font-weight: normal;font-size: 14px;
padding: 20px 0 0;}

 

먼저 span은 inline 요소기 때문에 block으로 바꿔 주고, a 태그에서 글씨의 색과 굵기 등을 지정해 줬기

때문에, font-weight를 normal로 줘서 일반 글씨로 초기화를 시켜줍니다.

그리고 글씨 크기와, padding값을 위로 20px 주게 되면

이렇게 텍스트가 나오게 됩니다.

그리고 배경색에 대해 css를 적용시켜 보도록 하겠습니다.

 

.notice > div .top > ul a {display: block;width: 280px; height: 280px;text-align: center;
padding:100px 0 0;box-sizing: border-box;font-size: 17px;font-weight: bold; color:#fff;
background: rgba(45,91,121,0.5);}
.notice > div .top > ul li:nth-child(1) {background: url(../image/bg_key_link01.jpg) no-repeat;}
.notice > div .top > ul li:nth-child(2) {background: url(../image/bg_key_link02.jpg) no-repeat;
color: #000;}
.notice > div .top > ul li:nth-child(3) {background: url(../image/bg_key_link03.jpg) no-repeat;}

 

하나씩 설명을 드리면, ul의 a 태그에 먼저 배경색을 rgba를 이용해 넣어 줍니다.

그리고 원래 기존에는 이미지를 li 태그의 자식인 a 태그의 css에 넣어 줬었는데, 그 부분을 a 태그가 아닌

바로 li 태그로 넣어 주도록 바꿉니다.

그러면 자식의 css가 위에 보여지기 때문에, 자식 태그인 a의 배경색이 위에 깔리고 그 아래에 부모 태그인

li 태그의 background 이미지가 깔릴 수 있게 됩니다.

(만약 반대로 되면 배경색이 이미지에 가려져 보이지 않게 됩니다.)

그럼 일단 배경색 설정은 했습니다.

이제 마우스를 올렸을 때의 상황에서만 텍스트가 보이고 배경색이 바뀔 수 있도록 하겠습니다.

 

.notice > div .top > ul a span {display: none;}
.notice > div .top > ul a:hover {background: rgba(45,91,121,0.5);}
.notice > div .top > ul a:hover span {display: block;font-weight: normal;font-size: 14px;
padding: 20px 0 0;}

 

일반 a 태그에 있던 배경색에 대한 css를 a에 마우스를 올렸을 때의 상황(:hover)일 때의 css로 옮기고,

span 요소에 대한 css 역시 마우스를 올렸을 때 css가 적용되므로 span 앞의 a 태그에 선택자 hover를

붙여 줍니다.

그리고 일반 상황에서는 span의 텍스트가 보이지 않아야 하기에 일반 span의 css에 none을 넣어줍니다.

이렇게 마우스를 올렸을 때만 바뀌게 됩니다.

그런데 중간 이미지에 우리가 글씨 색을 검은색으로 css를 넣었었는데 적용이 되지 않은 상황입니다.

그건 방금 우리가 이미지를 넣는 선택자(background url)를 a 태그가 아닌 li로 옮겼기 때문에 적용이

되지 않은 것입니다.

 

.notice > div .top > ul li:nth-child(2) {background: url(../image/bg_key_link02.jpg) no-repeat;}
.notice > div .top > ul li:nth-child(2) a {color: #000;}

 

기존의 css와 분리해서 새로 a 태그 css를 만들어 거기에 글씨 색을 넣어 줍니다.

정상적으로 나오는 것을 볼 수 있습니다.

​

이제 컨텐츠 영역의 베너 부분의 디자인을 마무리했습니다.

 

베너 부분을 마무리했으니 아래의 공지 영역을 시작하겠습니다.

원본 페이지의 공지&뉴스 영역의 모습입니다.

우리에게 필요한 이미지는 영역의 우상단에 보이는 덧셈모양 이미지인데요.

왼쪽 위를 보면 돋보기모양 아이콘의 바로 왼쪽에 파란색의 덧셈 아이콘이 있는 것을 볼 수 있습니다.

저 이미지를 가져 오고, 겉모양인 원은 radius로 만든 후 버튼으로 만들도록 할게요.

​

먼저 html 코드부터입니다.

 

<article>
        <div class="left">
          <h2>공지</h2>
          <ul>
            <li><a href="#a">한솔홈데코 홈페이지 리뉴얼 오픈 기념 공지사항<p>2018.03.26</p><div>이벤트 응모 블로그 바로가기</p></a></li>
            <li><a href="#a">스토리 보드 PET(영상)<p>2018.03.15</p><div>가구의 품격을 높이는 한솔 스토리보드 PET 새집증후군등의 사회적 문제를</div></a></li>
          </ul>
          <a href="#a">더보기</a>
        </div>
        <div class="right">
          <h2>뉴스</h2>
          <ul>
            <li><a href="#a">[봄 스며드는 우리집] 한솔홈데코, 친환경 온돌마루-벽지-도어 '집안이 산뜻'<span>2018.03.27</span></a></li>
            <li><a href="#a">습기에 강하고 열효율성 높은 'SB마루'로 집안을 산뜻하게!<span>2018.03.16</span></a></li>
            <li><a href="#a">한솔홈데코가 제안하는 인테리어 트렌드 6 - 강마루, 월, 중문 활용한 '소프트 빈티지'<span>2018.01.24</span></a></li>
          </ul>
          <a href="#a">더보기</a>
        </div>
</article>

 

전의 .notice에 div 태그 바로 아래 부분에 article로 해서 내용을 새로 작성했습니다.

공지와 뉴스 각각의 내용들을 ul li로 표현을 했고, 더보기 버튼을 a 태그로 감싸 주었습니다.

이제 이 부분에 대한 css로 넘어가 보겠습니다.

 

여기서 똑같은 부분을 보면 배경색, 공지와 뉴스의 텍스트 css, 그리고 더보기 버튼에 대한 디자인과 해당

영역의 전체 크기가 동일한 것을 볼 수 있습니다.

밑의 리스트는 공지는 좌우측, 뉴스는 일반 리스트의 형태처럼 세로로 쭉 나열되는 것을 볼 수 있습니다.

 

.notice article > div {float: left;width: 580px;}
.notice article > div.right {float: right;}

 

article의 전체적인 div에는 가로 크기와 float left를 해 주고, div의 클래스가 right일 때만 float right를

해 주면 공지와 뉴스가 각각 좌우측으로 붙게 될 것입니다.

바로 이렇게요.

​

그리고 배경색을 준 다음에, 위의 베너 부분과 padding 값을 줘서 떨어뜨려 놓겠습니다.

 

.notice article {padding:20px 0 0;}
.notice article > div {float: left;width: 580px;background: #f2f0ed;}
.notice article > div.right {float: right;}

 

배경색은 들어갔지만, 예상대로면 padding값이 들어갔어야 되는데 들어가지 않았습니다.

그 이유는 위에 .top의 ul 부분을 보면

 

.notice > div .top > ul {float: left;}

 

float left가 적용되어 있는데, float 속성 자체가 문서의 흐름에서 벗어나 독립적으로 배치되어 있는 상태

이기 때문에, 위의 공간에서의 20px padding값이 먹지 않는 것입니다.

그럴 때 쓰기 위해 default.css에 만들어 진 css가 있는데,

 

.clear {clear:both;}

 

바로 이 요소입니다.

이 요소를 적용하게 되면 float의 뜨는 특성을 없앨 수 있기 때문에, html 코드에서 클래스 값이 top인

곳으로 가서 clear 클래스 값을 추가시켜 padding이 될 수 있도록 고쳐 보겠습니다.

 

<div class="top clear">

 

깔끔하게 padding 20px만큼 떨어지게 되었습니다.

​

그리고 제목에 해당하는 h2 태그에 css를 주겠습니다.

 

.notice article > div h2 {height: 77px; line-height: 77px; font-size: 24px; color: #2d5b79; 
text-align: center;}

전에도 여러 번 했듯이 세로 정렬을 위해 세로 크기값, line-height값을 주고 text-align으로 가운데 정렬을

했습니다.

이렇게 디자인이 됩니다.

추가로 h2 하단에 흰색 선도 넣어 주겠습니다.

 

.notice article > div h2 {height: 77px; line-height: 77px; font-size: 24px; color: #2d5b79;
text-align: center; border-bottom: 1px solid #fff;}

 

그리고 맨 밑에 보면 더보기라는 텍스트가 있는데, 이 더보기는 우리가 이미지를 넣고 radius를 넣어

꾸며 줄 것이지만 그 전에 위치부터 조정하겠습니다.

더보기는 공지와 뉴스의 div 영역에 relative를 주고, 더보기에 absolute를 준 뒤 right와 top값을

줘서 오른쪽 위로 붙게 하겠습니다.

 

.notice article > div {float: left;width: 580px;background: #f2f0ed; position: relative;}
.notice article > div > a {position: absolute;right: 23px; top: 24px;}

 

오른쪽 위로 붙게 했습니다.

​

더보기의 이미지를 넣기 전에 겉의 원을 먼저 보겠습니다.

 

.notice article > div > a {position: absolute;right: 23px; top: 24px;width: 30px; height: 30px;
background: #fff; border-radius: 30px; color: transparent;}

 

(inline요소에서 position absolute가 들어가면 자동으로 block으로 바뀌기 때문에 바로 가로, 세로 크기를

줘도 됩니다.)

width값과 height값을 각각 30px로 줘서 정사각형 모양을 만든 뒤, background 색깔을 흰색으로

넣었습니다.

그리고 border-radius를 가로, 세로값과 동일하게 주면 원 모양으로 나오게 됩니다.

(안의 텍스트는 transparent 값으로 안 보이게 했습니다.)

​

안의 이미지도 한 번 넣어 보겠습니다.

 

.notice article > div > a {position: absolute;right: 23px; top: 24px;width: 30px; height: 30px; border-radius: 30px;
color: transparent;background: url(../image/sp_com.png) no-repeat -196px -60px #fff;}

 

background를 이용해서 이미지를 넣었는데요, 이미지의 경로값(url)과 해당 이미지에서 덧셈 아이콘의

좌표 위치(-196px, -60px), 배경색(#fff -> 흰색)을 넣어주게 되면

원본 이미지대로 완성을 했습니다.

​

여기까지 하고 나머지 마무리와 페이지의 마지막 부분 시작은 다음 글에서 하겠습니다.

 

 

 

 

 

 

 

 

 

 

 

 

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

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

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