공지, 뉴스 영역 마무리&footer 영역 제작(1)

지난번에는 여기까지 했었습니다.

오늘은 컨텐츠 영역에서 공지와 뉴스 영역을 마무리 짓고,

원본 페이지의 마지막 단계인 이 부분까지 최대한 건드려 보는 것으로 하겠습니다.

(지난번 글들에서 설명했었던 개념들 같은 경우는 간략한 설명만 하고 넘어갈 수 있습니다.)

​

​

현재 남은 부분은 공지와 뉴스의 아래 텍스트들을 리스트 형태로 적용을 시켜야 하는데,

원본 페이지는 이렇게 생겼습니다.

보면 class left에 속해 있는 좌측은 리스트들이 좌우로 배치되어 있고, class right에 속해 있는 우측은

일반적인 리스트의 형태처럼 세로로 정렬이 되어 있습니다.

​

먼저 공통되는 부분부터 보면 텍스트들의 css가 동일하다는 것을 알 수 있습니다.

(일반 텍스트와 날짜를 표시하는 텍스트의 css)

그럼 이 부분에 대한 css를 먼저 해 주겠습니다.

 

          <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">[봄 스며드는 우리집] 한솔홈데코, 친환경 온돌마루-벽지-도어 '집안이 산뜻'<p>2018.03.27</p></a></li>
              <li><a href="#a">습기에 강하고 열효율성 높은 'SB마루'로 집안을 산뜻하게!<p>2018.03.16</p></a></li>
              <li><a href="#a">한솔홈데코가 제안하는 인테리어 트렌드 6 - 강마루, 월, 중문 활용한 '소프트 빈티지'<p>2018.01.24</p></a></li>
            </ul>
            <a href="#a">더보기</a>
          </div>

 

html 코드인데 전에 했을 때는 날짜를 감싸는 태그가 left는 p 태그였고 right는 span 태그였습니다.

css에서 둘 다 적용하기 수월하도록 right 안에 있는 날짜의 태그를 p 태그로 바꿔 줍니다.

그럼 css에서 우리는 div 태그의 a 태그와(일반 텍스트), div 태그의 p 태그(날짜)로 디자인을 해 주면

되겠죠?

 

.notice article > div a {font-size: 16px; color: #424241;}
.notice article > div a p {font-size: 12px; color: #979797;}

 

공통 적용을 한 모습입니다.

​

left 부분부터 보면, 좌우측으로 나뉜 것을 float left를 이용하고, 가로 50% 크기를 줘서 반반씩 크기를

나눠 가질 수 있도록 해 보겠습니다.

 

.notice article > div.left ul li {float: left;width: 50%;padding: 35px;box-sizing: border-box;}

 

영역을 반씩 나눠 가지게 되었고, padding값을 넣어줬기 때문에 전체 크기값이 변하지 않도록

box-sizing을 줬습니다.

그리고 원본 페이지를 봤을 때, 한 줄 이상 넘어가게 되면 ...으로 그 뒤의 내용이 보이지 않게 되는

디자인이 있는데 이 부분을 해 보겠습니다.

 

<li><a href="#a"><span>한솔홈데코 홈페이지 리뉴얼 오픈 기념 공지사항</span>
<p>2018.03.26</p><div>이벤트 응모 블로그 바로가기</p></a></li>

 

해당 css를 하기 위해 디자인이 적용되는 영역을 span 태그로 한 번 감싸 줬습니다.

 

.notice article > div.left ul li span {display: block; overflow: hidden;
text-overflow: ellipsis;white-space: nowrap;}

 

하나씩 설명드리면,

먼저 한 줄 전체를 쓰도록 원래 inline 속성인 span의 display를 block으로 바꿔 주고 최대 한 줄로만

출력하기 위해 white-space값을 nowrap으로 줬습니다.

(nowrap은 긴 줄에서도 줄바꿈을 하지 않고 가로로 쭉 나타내게 됩니다.)

그리고 가로로 넘어가는 부분에 대해서는 overflow값을 hidden으로 줘서 보이지 않게 하고,

text-overflow라는 속성의 값을 ellipsis로 주게 되면 overflow된 부분이 ...으로 표시되게

할 수 있습니다.

결과적으로,

...으로 나타나게 되었습니다.

 

.notice article > div.left ul li p {padding:25px 0 20px;}

 

추가로 p 태그의 위아래로 padding값을 줘서 간격을 줬습니다.

​

이제 리스트의 오른쪽 아래에 있는 텍스트도 ... 처리를 해야 하는데, 이 부분은 한 줄이 아닌 두 줄을

넘어갈 때 ...을 해야 하는 상황입니다.

그럼 강제로 두 줄을 만들거나, webkit과 같이 크롬 브라우저에서만 동작하는 css를 사용하는 방법도

있지만, 범용성을 생각하면 쓰지 않겠습니다.

그럼 활용할 수 있는 방법이 자바스크립트와 같은 기능적인 부분에서 몇 자 이상 넘어가면 축약하도록

코드를 넣는 방법도 있지만, 이것 역시 html과 css만 활용하는 지금은 쓰지 못하므로 이번만은

어쩔 수 없이 html 코드상에서 텍스트에 그냥 ...을 넣겠습니다.

 

<li><a href="#a">스토리 보드 PET(영상)<p>2018.03.15</p>
<div>가구의 품격을 높이는 한솔 스토리보드 PET 새집증후군...</div></a></li>

 

이것에 대해서는 나중에 기회되면 webkit에 대한 것도 포스팅을 올리겠습니다.

 

.notice article > div.left ul li {float: left;width: 50%;padding: 35px;box-sizing: border-box;
border-left: 1px solid #fff;}
.notice article > div.left ul li:first-child {border-left: none;}

 

리스트의 왼쪽에 border를 넣고 첫 번째 자식(first-child)는 border가 필요 없으니 none을 시켜 줬습니다.

이렇게 하면 리스트의 갯수가 늘어나도 구분선이 계속 생길 것입니다.

​

이제 오른쪽 구역을 보겠습니다.

 

오른쪽은 일반적인 리스트의 형태를 띄고 있고, 한 줄 이상 넘어갈 시 왼쪽과 마찬가지로 ...으로 축약하는

형태를 보여 주고 있습니다.

 

.notice article > div.right ul li a {display: block; overflow: hidden; width: 400px; 
height: 60px; line-height: 60px;text-indent: 30px; white-space: nowrap;text-overflow: ellipsis;}

 

전에도 나왔던 개념들이기에 간략하게만 설명하겠습니다.

​

크기 지정을 위한 block, 가로 사이즈 지정 width, 가로 사이즈를 넘어가는 텍스트는 안 보이게 하는

overflow hidden, 글의 세로 사이즈와 세로 가운데 정렬을 위한 height와 line-height, 앞쪽의

들여쓰기를 위한 text-indent, 한 줄을 초과하는 텍스트의 양을 한 줄로 처리하는 white-space,

축약된 부분을 ...으로 표시해 주는 text-overflow의 ellipsis값까지 css를 처리했습니다.

이렇게 디자인이 나오게 됩니다.

​

근데 날짜까지 축약되어서 화면에 나오지 않는데, 날짜는 포지션을 줘서 오른쪽으로 붙이고, 흰색 라인선도

처리를 해 보겠습니다.

 

.notice article > div.right li {position: relative;border-bottom: 1px solid white;}
.notice article > div.right li:last-child {border-bottom: none;}
.notice article > div.right p {position: absolute;right: 30px; top: 0;}

 

li a 태그에 relative를 주지 않은 이유는 이미 a 태그엔 width값이 400px로 되어 있는데 이 상태에서

width값만큼의 영역 이후를 축약시켜 버렸기 때문에 a 태그에 relative를 주고 p 태그로 right에 붙여도

날짜 텍스트가 나오지 않게 될 것입니다.

그래서 그의 부모 태그인 li 태그에 relative를 주고 li 태그의 영역 안에서 p 태그에 right 30px; top 0을

줘서 오른쪽으로 붙게 한 것입니다.

그리고 left와 마찬가지로 여기는 마지막 자식(last child) li 태그는 border-bottom이 필요 없기에

none값을 줬습니다.

뉴스 부분의 디자인도 얼추 완성을 했습니다.

 

보면 공지와 뉴스의 높낮이가 안 맞는 상태이죠?

왼쪽의 공지의 줄간격과 padding값을 좀 조정해서 둘의 높이를 맞추도록 하겠습니다.

 

.notice article > div.left ul li span {display: block; overflow: hidden;text-overflow: ellipsis;white-space: nowrap;
line-height: 100%}
.notice article > div.left ul li div {line-height: 21px;}
.notice article > div.left ul li p {padding:15px 0 16px; line-height: 100%;}

 

ul li span 태그의 줄간격을 초기화해 주었고(line-height), left의 오른쪽 아래 텍스트(ul li div)의

줄간격 값도 주었습니다.

그리고 기존 padding값이 25px 0 20px이었던 p 태그의 padding값과 줄간격 초기화까지 해 주면

이렇게 공지와 뉴스의 높낮이가 딱 맞게 되는 것을 볼 수 있습니다.

​

이렇게 컨텐츠 영역의 베너와 공지, 뉴스 영역에 대한 코딩이 끝났습니다.

 

 

 

 

이제 페이지의 마지막 영역 디자인을 시작하겠습니다.

이 글의 처음에 말했었던 부분입니다.

전체적인 설명을 하자면 먼저 뒤의 배경을 넣고, 가운데 4개의 이미지 버튼은 리스트로 만든 후 float

left로 가로 정렬을 한 후 배경 이미지를 넣게 될 것입니다.

그리고 아래 footer 영역에서는,

위의 고객상담~E-Purchase까지 5개 버튼을 ul li로 하고 float left로 좌측 배치를 하고,

오른쪽의 고객상담과 select 버튼 쪽은 float right로 우측 배치를 시켜 주겠습니다.

​

​

html 코드 먼저 작성하겠습니다.

 

<section class="banner">
      <h2 class="hide">주요서비스</h2>
      <ul>
        <li><a href="#a"><strong>가구컴포넌트</strong>소재부터 가구 도어까지</a></li>
        <li><a href="#a"><strong>인테리어 자재</strong>행복한 공간을 위한 토털 인테리어</a></li>
        <li><a href="#a"><strong>연관 사업</strong>자연과 인간의 조화를 이루는 한솔</a></li>
        <li><a href="#a"><strong>고객 상담</strong>무엇이든 물어보세요</a></li>
      </ul>
    </section>
    <footer>
      <div class="top">
        <ul>
          <li><a href="#a">고객상담</a></li>
          <li><a href="#a">개인정보처리방침</a></li>
          <li><a href="#a">윤리경영</a></li>
          <li><a href="#a">E-Market</a></li>
          <li><a href="#a">E-Purchase</a></li>
        </ul>
        <div>
          <p>고객상담<strong>080-777-2299</strong></p>
          <select>
            <option>FAMILY SITE</option>
          </select>
        </div>
      </div>
      <div class="btm">
        <p>한솔홈데코</p>
        <ul>
          <li>서울동작구 보라매로5길 15(신대방동, 전문건설회관 27층)</li>
          <li>Tel 080-777-2299</li>
          <li>개인정보취급관리자 서범석</li>
          <li>E-mail homedeco@hansol.com</li>
        </ul>
        <address>Copyright 2018 HANSOLHOMEDECO All rights reserved.</address>
      </div>
</footer>

 

먼저 4개의 이미지 버튼이 있는 영역을 section 태그로 감싸 주고 class값을 banner로 줬습니다.

그 안에 코드상에서의 제목을 나타내는 h2 태그를 썼고, background로 이미지를 넣을 리스트들을

ul li를 써서 텍스트부터 일단 써 놓았습니다.

​

그리고 html 코드상에서 페이지의 가장 아랫단을 뜻하는 footer 태그를 사용해 위 이미지에서 class

banner의 아래 영역 전체를 감싸 줬습니다.

(맨 처음에 나왔던 header 태그와 비슷한 느낌의 의미론적인 태그입니다.)

​

그리고 footer 영역의 이미지를 보면 위와 아래의 배경색이 다르기 때문에, div 태그 2개로 따로

나눠 묶고 각각 class값을 top, btm으로 줬습니다.

고객상담~E-Purchase는 ul li로 리스트 형태로 써 주고 오른쪽에 붙어 있는 고객상담 부분은 따로

div 태그로 묶어 줬습니다.

​

div btm으로 가면, 한솔홈데코는 sp_com(아이콘들 모여 있는 이미지파일)에서 가져와야 되기 때문에

p 태그를 써 주고, 어차피 transparent로 보이지 않게 하지만 접근성을 높이기 위해 p 태그 안에

텍스트를 넣어 줬습니다.

그 아래 텍스트들 역시 ul li로 묶어 주고 아래 html 태그에서 주소의 내용이 담길 태그인 address 태그를

써서 주소 텍스트까지 써준 후 html 코드를 마무리했습니다.

​

이제 css로 가 보겠습니다.

 

.banner {background: url(../image/bg_main_business.jpg) no-repeat center top;
padding: 55px;}

 

이미지를 넣고 center top을 하게 되면 해당 영역에서 브라우저의 크기가 바뀌거나 하는 유동적인

상황에서도 이미지는 항상 그 영역의 위쪽 중간에 붙어 있게 됩니다.

그리고 안에 있는 4개의 이미지 버튼은 위아래 간격이 있으므로 padding 위아래 55px씩 넣습니다.

 

그 다음에 안의 이미지 버튼들에 대한 css를 해 보겠습니다.

 

.banner ul {display: flex; width: 1180px; margin: 0 auto;}
.banner ul li {flex: 1; padding: 0 0 0 20px;}
.banner ul li:first-child {padding: 0;}

 

먼저 버튼들을 감싸고 있는 ul에 가로 값을 주고 margin auto로 중앙 정렬을 시켜 줬습니다.

근데 지금까지 보지 못했던 display flex라는 개념이 나왔습니다.

어떤 태그에 flex를 적용시키면 그 태그의 안에 있는 아이템들은 기본적으로 가로로 배치되게 됩니다.

그리고 그 태그의 안에 있는 아이템들에게 차지하는 공간의 비율을 설정할 수 있게 되죠.

그래서 ul li의 css를 보시면, flex: 1; 이라고 되어 있는 부분이 바로 그 의미입니다.

지금은 보면 ul의 영역을 4개의 버튼이 1:1:1:1의 비율로 균등하게 나눠줘야 하는 상황입니다.

그 때 flex값을 1로 주면 li 태그들이 해당 비율로 나눠진다는 이야기가 되죠.

(이미지 사이 간격은 padding으로 왼쪽에 주고, 첫번째 자식은 필요없으니 first child는 padding

0으로 초기화 시켜줍니다.)

이렇게 일정 비율로 나눠지게 됩니다.

​

그 다음에 이미지 버튼들의 크기와 텍스트 css를 하겠습니다.

 

.banner ul li a {display: block;font-size: 14px; color: #3e413d;height: 390px;
padding: 303px 0 0;text-align: center;box-sizing: border-box;}
.banner ul li a strong {display: block; font-size: 23px; color: #000;}

 

먼저 a 태그에 크기 지정을 위해 block을 주고, 텍스트의 설정과 가운데 정렬을 시켜 준 뒤 이미지의

세로 크기와 위로부터 텍스트까지의 padding값 설정, 크기 변화를 대비한 box-sizing까지 했습니다.

그리고 strong 태그의 css를 따로 지정해서 텍스트의 크기를 좀 더 크게 설정했습니다.

(strong의 block은 strong의 텍스트와 그 아래 텍스트가 줄넘김이 되어 있어 그 줄넘김을 block의

특성으로 이용한 것입니다.)

이제 이미지를 넣겠습니다.

 

.banner ul li:nth-child(1) a {background: url(../image/bg_business_link01.jpg) no-repeat;}
.banner ul li:nth-child(2) a {background: url(../image/bg_business_link02.jpg) no-repeat;}
.banner ul li:nth-child(3) a {background: url(../image/bg_business_link03.jpg) no-repeat;}
.banner ul li:nth-child(4) a {background: url(../image/bg_business_link04.jpg) no-repeat;}

 

nth-child와 background url을 이용해 각각 다른 이미지를 넣어 줬습니다.

이미지까지 완성이 되었습니다.

​

베너 부분은 끝났고 아래 마지막 footer 부분 시작하겠습니다.

 

footer의 위쪽 부분부터 하는데, 왼쪽 텍스트는 float left로 붙이고 오른쪽은 float right로 붙이는데

중간 정렬을 먼저 하고 float으로 붙이겠습니다.

 

      <div class="top">
        <div>
          <ul>
            <li><a href="#a">고객상담</a></li>
            <li><a href="#a">개인정보처리방침</a></li>
            <li><a href="#a">윤리경영</a></li>
            <li><a href="#a">E-Market</a></li>
            <li><a href="#a">E-Purchase</a></li>
          </ul>
          <div>
            <p>고객상담<strong>080-777-2299</strong></p>
            <select>
              <option>FAMILY SITE</option>
            </select>
          </div>
        </div>
      </div>

 

html 코드에서 div top 클래스 안에 중간 정렬용 div로 top 내용 전체를 묶어 줬습니다.

​

그리고 ul과 div에 각각 float left, right를 주겠습니다.

 

footer .top {background: #383f43;}
footer .top > div {width: 1180px; margin: 0 auto;}
footer .top > div ul {float: left;}
footer .top > div div {float: right;}

 

.top에 배경색, .top의 바로 아래에 있는 div(정렬용 태그)에 margin auto로 중앙 정렬을 했습니다.

실행을 시켜보면 배경색이 적용이 되지 않았는데요.

css3에서는 자식에 float을 적용하면 부모 태그 영역의 height가 0이 되는 경우가 있습니다.

이 때 default.css에 만들어 놓은 clear 클래스를 사용하겠습니다.

 

.clear {clear:both;}

 

<div class="clear">

 

방금 중간 정렬용으로 html코드에 새로 만든 div 태그의 클래스값으로 clear를 쓰면, float의 특징을

해제하면서 위의 height가 0으로 변하는 상황을 방지할 수 있습니다.

그럼 이렇게 정상적으로 배경색이 적용되는 것을 볼 수 있습니다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

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

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

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