페이지 컨텐츠 베너 영역 제작(1)

지난번에는 매거진 영역까지 해서 끝냈었습니다.

원본 페이지를 한 번 보면,

매거진 영역 밑에 이렇게 되어 있는데 오늘은

위의 이 부분을 해 보겠습니다.

(전의 글에서 설명했던 속성들은 짧게 설명만 하고 넘어가겠습니다.)

​

먼저 전체적인 설명을 드리면 전체 배경색은 흰색으로 되어 있고, 그 영역 가운데에 컨텐츠들이 모여

있습니다.(가운데 정렬)

오늘 우리가 할 부분에서 왼쪽의 테마 갤러리~대리점 찾기 부분은 ul li 리스트로 묶고, 오른쪽의

제품 찾기 영역은 따로 처리하겠습니다.

​

먼저 html 태그부터 쓰겠습니다.

 

    <section class="notice">
      <div> <!--가운데정렬용-->
        <div class="top"> <!--위쪽 부분-->
          <ul>
            <li><a href="#a">테마 갤러리</a></li>
            <li><a href="#a">블로그</a></li>
            <li><a href="#a">대리점 찾기</a></li>
          </ul>
          <div>
            <h2>제품 찾기</h2>
            <div>
              <select title="검색조건 선택">
              <option>제품 전체검색</option>
              </select>
            </div>
            <div>
              <input type="search" title="모델명 입력" placeholder="모델명을 입력하세요.">
            </div>
            <div><a href="#a">검색하기</a></div>
          </div>
        </div>
      </div>
    </section>

 

전체 영역은 section(class notice)로 감싸 주었고, 아래의 공지, 뉴스까지 포함한 컨텐츠 전체 영역을

표시하는 div로 묶은 후 오늘 작업할 위쪽 부분의 전체를 묶는 div(class top) 태그가 또 있습니다.

​

그리고 왼쪽 3개의 이미지는 ul로 묶어 주었고, 오른쪽의 제품 찾기 영역은 div로 묶어 주고 그 안에 맞게

html 코드를 작성하였습니다.

이제 css로 넘어가서 디자인을 해 보겠습니다.

 

.notice > div {width: 1180px;margin: 0 auto;padding: 55px 0;}

 

.notice의 자식 div, 즉 컨텐츠영역 전체를 감싸고 있는 div 태그에 대한 css입니다.

전에도 했던 방식인데, 전체 notice 영역에서의 가운데 정렬을 하기 위해 margin auto를 이용한

방식입니다.

전 글에서도 한 번 다뤘었는데, 이 auto를 이용해서 가운데 정렬을 했을 시의 단점은

유동적인 상황(요소가 추가된다거나 하는)에서는 디자인이 무너진다는 단점이 있다고 했었는데,

바꿔 말하면 고정되어 있는(유동X) 상황에서는 저 방법을 사용하면 쉽게 가운데 정렬을 할 수 있다는

점이 있습니다.

​

그래서 가로 전체값을 주고 가운데 정렬을 시켰으며, padding값으로 위아래 55px씩 여백을 줬습니다.

 

그럼 이렇게 요소들이 배치된 것을 볼 수 있습니다.

​

그 다음에 왼쪽 3개의 이미지 부분부터 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; color: black;}

 

각각의 버튼에 크기 설정과 텍스트 설정, 텍스트의 위치값을 padding을 이용해 배치를 시켰습니다.

(box-sizing은 padding 값까지 전체 크기값에 포함시켜 우리가 설정한 가로, 세로 크기가 바뀌지 않도록

설정한 것입니다.)

​

그리고 이미지는 li 태그의 nth-child를 이용해 넣어 주겠습니다.

 

.notice > div .top > ul li:nth-child(1) a {background: url(../image/bg_key_link01.jpg) no-repeat;}
.notice > div .top > ul li:nth-child(2) a {background: url(../image/bg_key_link02.jpg) no-repeat;}
.notice > div .top > ul li:nth-child(3) a {background: url(../image/bg_key_link03.jpg) no-repeat;}

 

image 파일에 보면 저 3개의 이미지가 각각의 버튼들의 이미지에 해당되기 때문에 url로 경로를 써 주시면

됩니다.

이렇게 이미지를 넣었습니다.

그리고 이미지들이 세로로 떨어지는 이유가 리스트(li) 태그의 특징 때문인데 li 태그에 float left를 넣어

가로로 배치되게 하겠습니다.

 

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

 

그리고 원본 페이지를 보면 "블로그" 텍스트만 검은색이고 양옆은 흰색에 셋 다 굵은 글씨 효과가 들어간

것을 볼 수 있습니다.

 

.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;}
.notice > div .top > ul li:nth-child(1) a {background: url(../image/bg_key_link01.jpg) no-repeat;}
.notice > div .top > ul li:nth-child(2) a {background: url(../image/bg_key_link02.jpg) no-repeat;
color: #000;}
.notice > div .top > ul li:nth-child(3) a {background: url(../image/bg_key_link03.jpg) no-repeat;}

 

부모인 a 태그에 bold 효과와 흰색을 주고, 2번째 자식에만 검은색을 줘서 설정을 했습니다.

 

.notice > div .top > ul li {float: left; padding:0 20px 0 0;}

 

사이 여백까지 주었습니다.(padding으로 오른쪽에 20px 여백)

​

근데 지금 보면, 제품 전체검색까지만 있고 모델명 입력과 검색하기 버튼은 아래로 떨어진 것을 볼 수

있습니다.

왜냐하면 지금 ul의 li에만 float left를 준 상태이고, ul과 아래 제품 찾기 부분을 묶어주는 div 태그에는

float left가 들어가 있지 않기 때문입니다.

 

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

 

이러면 한 라인에 다 들어오는 것을 볼 수 있습니다.

​

이제 제품 찾기 부분을 css 해 보겠습니다.

먼저 전체 크기 지정과 배경색, padding을 주겠습니다.

 

.notice > div .top > div {float: left; width: 280px;height: 280px; background:#f2f0ed;
padding:36px 20px 0;box-sizing: border-box;}

 

box-sizing은 padding으로 전체 크기가 바뀌지 않도록 넣어 줬습니다.

일단 모든 컨텐츠들이 가운데 쪽으로 왔습니다.

그런데 잘 보면 제품 전체검색과 아래 입력 칸의 모서리가 약간 둥근 것을 볼 수 있는데요.

원본을 보면 그렇지 않습니다.

이건 이 페이지 제작의 처음 글에서 index.css와 함께 적용을 시킨 default.css에 들어 있는 코드 때문에

그렇습니다.

이 부분도 수정을 하겠습니다.

 

input[type=date],textarea {width:100%; height:30px; font-size:13px; 
color:#373737; border:1px solid #e9e9e9; background:#fff; text-indent:20px; 
border-radius: 5px; transition: all 0.5s; vertical-align:middle;}

 

select { height:32px; font-size:13px; color:#373737; border:1px solid #e9e9e9; 
background:#fff;border-radius: 5px;}

 

원본 코드가 이렇게 되어 있는데 저기서 border-radius를 지우고 다시 실행시켜 보겠습니다.

이제 제품 찾기부터 하나씩 하겠습니다.

 

.notice > div .top > div h2 {font-size: 17px; color: #000;text-align: center;
line-height: 100%;}

 

처음 padding값을 줄 때 줄간격 초기화(line-height 100%)를 기준으로 padding값을 줬기에 100%

값을 줬습니다.

 

.notice > div .top > div select {width: 100%;height: 45px; border:none;}
.notice > div .top > div h2 {font-size: 17px; color: #000;text-align: center;
line-height: 100%;padding:0 0 29px;}

 

그리고 제품 찾기(h2)의 아래 padding값을 29px로 줘서 간격을 줬습니다.

​

다음으로 아래 모델명 입력(input 태그)의 css를 할 텐데, 기본 설정값은 위의 select 태그와 똑같으니

묶어 주도록 하겠습니다.

 

.notice > div .top > div select,
.notice > div .top > div input {width: 100%;height: 45px; border:none;text-indent: 20px;}

 

(추가로 select나 input이나 둘 다 들여쓰기 부분은 동일해서 들여쓰기 text-indent 값도 추가했습니다.)

그리고 아래 input 태그의 placeholder(모델명을 입력하세요.) 부분도 css를 해야 하는데, 이럴 때

:: 선택자를 이용하면 할 수 있습니다.

 

.notice > div .top > div input::-webkit-input-placeholder {color:#949394; font-size: 14px;}

 

처음 보는 선택자가 나오는데 저 -webkit-input-placeholder 선택자가 바로 placeholder를 css하기

위한 선택자를 의미합니다.

(참고로 저 -webkit~ 의 형태는 크롬의 구버전에 적용시킬 수 있으며, 크롬이 아닌 다른 브라우저라도

최신 버전이면 그냥 ::placeholder 선택자를 써도 css가 적용이 됩니다.)

그럼 이렇게 들여쓰기와 placeholder에 대한 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

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

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