Chapter 06 메인 페이지 작업하기_2(메인 페이지 반응형 웹 작업하기3)

6. 인기 검색어 영역의 반응형 웹 작업하기

인기 검색어 영역을 작업합니다.

먼저 모바일용 CSS 코드부터 작성합니다. 인기 검색어 영역은 갤러리 영역 뒤에 바로 이어서 작성합니다.

<style>
/* 모바일용 CSS */
...
/* 인기 검색어 영역 CSS */
.rankup_section{
order:7;
/*모바일 환경에서 인기 검색어 영역을 보면 일곱 번째로 배치되어 있으므로
order 속성의 값을 7로 설정합니다.*/
padding:40px 12.5%;
padding:2.500rem 12.5%;
/* 40px ÷ 320px */
/*인기 검색어 영역의 구조를 다시 살펴보면 위/아래, 왼쪽/오른쪽 패딩값이 40px이므로
위/아래 패딩값을 40px/2.500rem으로 설정하고, 왼쪽/오른쪽 패딩값은 가변 그리드 공식을 이용해서
얻은 값인 12.5%로 설정합니다.*/
background:#219af7;
text-shadow: 0px 1px 1px #1974ba; /*1*/
}

.rankup_list{
display:flex;
/*인기 검색어 영역의 검색어 목록 구조를 보면 목록이 가로로 여러 줄 배치되어 있습니다.
이처럼 목록들을 가로로 배치하기 위해 display 속성의 값을 flex로 설정합니다.*/
flex-wrap:wrap;
/*박스를 여러 줄로 배치하기 위한 flex-wrap 속성의 값은 박스를 여러 줄로 배치해 주는 wrap으로 설정합니다.*/
justify-content:space-between;
/*인기 검색어 영역의 검색어 목록 구조를 다시 확인해 보면 목록 사이에 간격을 두고 배치되어 있으므로
justify-content 속성의 값을 space-between으로 설정합니다.*/
}

.rankup_list li{
width:47.916666666666666666666666666667%;
/* 115px ÷ 240px */
/*인기 검색어 목록 영역의 목록 구조를 보면 목록 영역의 너빗값이 115px인 것을 확인할 수 있으므로
가변 그리드 공식을 이용해서 얻은 값인 47.91...%를 너빗값으로 설정합니다.*/
margin-top::15px;
margin-top:0.938rem; /*2*/
text-align:center;
text-transform:uppercase;
font-weight:bold; /*3*/
}

.rankup_list li:first-child, .rankup_list li:nth-child(2){
margin-top:0; /*4*/
}

.rankup_list li a{
display:block;
padding:10px 0;
padding:0.625rem 0;
border:1px solid #fff;
border-radius:5px; /*5*/
}
...
</style>

① 배경색을 설정하고, 글자 그림자를 설정합니다.

② 인기 검색어 목록 영역의 목록 구조를 다시 살펴보면 위쪽에 15px 크기의 간격이 있으므로 위쪽 마진값을 15px/0.938rem으로 설정합니다.

③ 글자를 중앙으로 정렬하고 대문자로 변경합니다. 그리고 글자 굵기를 진하게로 설정합니다.

④ 인기 검색어 목록 영역의 목록 중 첫 번째 목록과 두 번째 목록은 위쪽 마진값이 필요 없으므로 첫 번째와 두 번째 목록의 위쪽 마진값을 0으로 설정합니다.

⑤ 인기 검색어 목록 영역의 목록 구조를 살펴보면 목록마다 위/아래 패딩값이 10px이고 흰색 선이 있는 것을 확인할 수 있으므로 인기 검색어 목록 영역의 링크 영역인 <a> 태그에 display 속성의 값을 block으로 설정하고, 위/아래 패딩값을 10px/0.625rem으로 설정합니다. 그리고 선값을 1px solid #fff로 설정하고, 둥근 모서리를 설정합니다.

 

 

 

이어서 태블릿용 CSS를 작성합니다.

<style>
...
/* 태블릿용 CSS */
@media all and (min-width:768px){
...
/* 인기 검색어 영역 CSS */
.rankup_section{
order:4;
/*태블릿 환경에서 인기 검색어 영역을 보면 인기 검색어 영역이 네 번째로 배치되어 있으므로
order 속성의 값을 4로 설정합니다.*/
width:40.10416666666667%;
/* 308px ÷ 768px */
/*태블릿 환경에서는 인기 검색어 영역의 너빗값이 308px이므로 가변 그리드 공식을 이용해서
얻은 값인 40.10...%를 너빗값으로 설정합니다.*/
padding-left:5.20833333333333%;
padding-right:5.20833333333333%;
/* 40px ÷ 768px */
/*태블릿 환경으로 변경되었으므로 앞에서 모바일용 CSS에서 설정한 왼쪽/오른쪽 패딩값을
가변 그리드 공식을 이용해서 얻은 값인 5.20...%로 재설정합니다.*/
}
...
}
...
</style>

 

 

 

이번에는 PC용 CSS를 작성합니다. PC용 CSS는 코드의 내용이 많으므로 나누어 작업합니다.

<style>
...
/* PC용 CSS */
@media all and (min-width:960px){
...
/* 인기 검색어 영역 CSS */
.rankup_section{
display:flex;
/*PC 환경에서는 인기 검색어 영역에 플렉서블 박스 속성들을 적용해야 하므로 인기 검색어 영역에
display 속성의 값을 flex로 설정합니다.*/
flex-direction:column;
/*PC 환경에서 인기 검색어 영역의 구조를 보면 요소들이 세로로 배치되어 있으므로 박스의 배치 방향을
설정하는 flex-direction 속성의 값을 박스를 세로로 배치하는 값인 column으로 설정합니다.*/
justify-content:center;
align-items:center; /*1*/
width:22.91666666666667%;
/* 220px ÷ 960px */
/*PC 환경에서는 인기 검색어 영역의 너빗값이 220px이므로 가변 그리드 공식을 이용해서 얻은 값인 22.91...%를
너빗값으로 설정합니다.*/
padding:0; /*2*/
}

.rankup_list{
display:block; /*3*/
}
...
}
</style>

① 인기 검색어 영역의 구조를 다시 살펴보면 요소들이 세로와 가로의 중앙에 배치되어 있습니다. 주축 방향으로 박스를 배치하는 jusitify-content 속성의 값을 박스를 중앙으로 배치하는 값인 center로 설정하고, 교차축 방향으로 박스를 배치하는 align-items 속성의 값을 박스를 중앙으로 배치하는 값인 center로 설정하여 박스를 중앙으로 배치합니다.

② 앞에서 태블릿 환경에서 설정한 패딩값은 더 이상 필요 없으므로 0으로 설정합니다.

③ 인기 검색어 목록 영역은 더 이상 플렉서블 박스로 작동하지 않아도 되므로 display 속성의 값을 block으로 설정합니다.

 

 

 

인기 검색어 영역의 PC용 CSS 코드를 이어서 작성합니다.

<style>
...
.rankup_list li{
width:auto; /*1*/
text-align:left; /*2*/
counter-increment:rankup-counter; /*3*/
}

.rankup_list li:nth-child(2){
margin-top:15px;
margin-top:0.938rem; /*4*/
}

.rankup_list li:before{
padding-right:6px;
padding-right:0.375rem;
text-transform:uppercase; /*5*/
font-weight:bold;
color:#fff;
text-shadow:0px 1px 1px #428e9e; /*6*/
content:counter(rankup-counter) '.'; /*7*/
}

.rankup_list li a{
display:inline;
padding:0;
border:0; /*8*/
}
...
}
</style>

① PC 환경에서 인기 검색어 목록 영역의 목록을 보면 너빗값이 더 이상 필요 없으므로 앞에서 태블릿용 CSS에서 설정한 너빗값을 초기화하기 위해 auto로 설정합니다.

② 글자를 왼쪽으로 정렬합니다.

③ 카운터 증가 속성을 설정합니다. 카운터명은 rankup-counter로 설정합니다.

④ PC 환경에서 인기 검색어 목록 영역의 목록 구조를 보면 첫 번째 목록을 제외한 모든 목록 위쪽에 15px 크기의 간격이 있습니다. 앞에서 모바일용 CSS에서 설정한 두 번째 목록의 마진값을 정상적으로 적용하기 위해 두 번째 목록을 선택하여 마진값을 15px/0.938rem으로 재설정합니다.

⑤ 인기 검색어 목록 영역의 목록인 <li> 태그에 카운터 함수를 사용해서 <li> 태그가 나오기 전에 카운터 숫자를 넣기 위해 가상 선택자인 before를 사용해서 목록을 선택합니다. 그리고 카운터 숫자가 들어갈 공간을 만들기 위해 오른쪽 패딩값을 6px/0.375rem으로 설정하고, 글자를 대문자로 변경합니다.

⑥ 글자 굵기를 진하게로 설정하고, 글자색과 글자 그림자를 설정합니다.

⑦ 카운터 숫자를 넣기 위해 카운터 함수를 사용합니다.

⑧ 인기 검색어 목록 영역의 목록 링크 영역인 <a> 태그에는 display 속성의 값을 inline으로 설정하고, 링크 영역인 <a> 태그에는 더 이상 패딩값과 선값이 필요 없으므로 패딩값과 선겂을 0으로 설정합니다.

 

 

 

※ 카운터 속성이란?

카운터 속성이란 말 그대로 카운터 증가를 위한 속성입니다. 시계 카운터처럼 말이죠. 카운터 속성은 CSS3에서 정식 채택되었는데, 놀랍게도 하위 브라우저인 익스플로러 8 버전부터 지원합니다.

속성(함수)명	속성(함수)값	적용 요소
counter-reset	[카운터명] [정수]	모든 요소
counter-increment	[카운터명] [정수]	모든 요소
counter()	[카운터명] [정수] [문자열]	모든 요소

속성(함수)명	설명
counter-reset	카운터를 초기화하기 위한 속성입니다. 속성값에는 카운터명과 정숫값이 들어올 수 있으며, 정숫값은 카운터의 초깃값으로 생략할 수 있습니다. 속성값은 한 칸 공백으로 구분합니다.
counter-increment	카운터를 증가시키기 위한 속성입니다. 속성값에는 카운터명과 정숫값이 들어올 수 있으며, 정숫값은 카운터의 증가 배율입니다. 예를 들어 정숫값이 2라면 카운터의 값이 2씩 증가합니다. 정숫값은 생략할 수 있으며 생략 시 1씩 증가합니다. 속성값은 한 칸 공백으로 구분합니다.
counter()	카운터를 사용하기 위한 함수입니다. 함숫값에는 카운터명과 카운터 스타일, 문자열이 들어올 수 있으며, 속성값은 쉼표로 구분합니다. 단 문자열은 괄호 안에 작성하지 않고 바깥쪽에 작성합니다. 카운터 스타일에는 <li> 태그의 list-style-type 속성값을 그대로 사용할 수 있으며, 카운터 스타일과 문자열은 생략할 수 있습니다.

 

 

 

 

 

 

7. 배너 영역의 반응형 웹 작업하기

배너 영역은 인기 검색어 영역 바로 뒤에 이어서 작성합니다. 먼저 모바일용 CSS 코드부터 작성해 보겠습니다.

<style>
/* 모바일용 CSS */
...
/* 배너 영역 CSS */
.banner_section{
order:8;
/*모바일 환경에서 배너 영역을 보면 배너 영역이 여덟 번째로 배치되어 있으므로 order 속성의 값을 8로 설정합니다.*/
}

.banner_box_01{
background:#e6567a; /*1*/
}

.banner_box_01 a{
display:block;
padding:30px 0;
padding:1.875rem 0; /*2*/
text-align:center; /*3*/
}

.banner_box_02{
background:#c44968; /*4*/
}

.banner_list{
display:flex;
justify-content:space-between;
/*모바일 환경에서 배너 영역의 두 번째 자식 박스의 배너 이미지 목록 영역을 보면 이미지 목록들이
간격을 두고 배치되어 있으므로 jusitify-content 속성의 값을 space-between으로 설정합니다.*/
padding:30px 12.5%;
padding:1.875rem 12.5%;
/* 40px ÷ 320px */
/*배너 이미지 목록 영역을 보면 위/아래는 30px, 왼쪽/오른쪽은 40px의 간격이 있습니다.
위/아래 패딩값은 30px/1.875rem, 왼쪽/오른쪽 패딩값은 가변 패딩을 적용하기 위해
가변 그리드 공식을 이용해서 얻은 값인 12.5%를 설정합니다.*/
}
...
</style>

① banner_box_01이라는 클래스명을 가지고 있는 <div> 태그에 배경색을 설정합니다. 이 태그는 배너 영역의 자식들인 <div> 태그 중 첫 번째 자식 태그입니다.

② 배너 영역 구조에서 첫 번째 자식의 이미지 링크 영역인 <a> 태그에 display 속성의 값을 block으로 설정합니다. 그리고 배너 영역의 첫 번째 자식의 이미지 링크 영역인 <a> 태그는 위/아래 간격이 30px만큼 있으므로 위/아래 패딩값을 30px/1.875rem으로 설정합니다.

③ 글자를 중앙으로 정렬합니다.

④ 배너 영역의 두 번째 자식인 banner_box_02라는 클래스명을 가지고 있는 <div> 태그에 배경 색을 설정합니다.

 

 

 

이어서 태블릿용 CSS를 작성합니다. 태블릿용 CSS는 코드의 내용이 많으므로 나누어 작업합니다.

<style>
...
/* 태블릿용 CSS */
@media all and (min-width:768px){
...
/* 배너 영역 CSS */
.banner_section{
display:flex;
order:9;
/*태블릿 환경에서 배너 영역을 보면 아홉 번째로 배치되어 있으므로 박스의 배치 순서를 설정하기 위한
order 속성의 값을 9로 설정합니다.*/
flex-direction:column;
/*배너 영역의 자식 박스들이 세로로 배치되어 있으므로 박스의 배치 방향을 설정하기 위한
flex-direction 속성의 값을 박스를 세로로 배치하는 값인 column으로 설정합니다.*/
width:28.645833333333333333333333333333%;
/* 220px ÷ 768px */
/*태블릿 환경에서는 배너 영역의 너빗값이 220px이므로 가변 그리드 공식을 이용해서 얻은 값인
28.64...%를 너빗값으로 설정합니다.*/
}

.banner_section div{
flex:1 1 0;
/*배너 영역의 자식 박스들을 왼쪽의 갤러리 영역 높이에 맞춰 같은 비율로 확장하기 위해
박스의 크기 증감을 설정하기 위한 flex 속성의 값을 1 1 0으로 설정합니다.*/
}

.banner_box_01{
display:flex;
/*배너 영역의 첫 번째 자식 박스를 플렉서블 박스로 작동하기 만들기 위해 display 속성의 값을 flex로 설정합니다.*/
justify-content:center;
align-items:center; /*1*/
}

.banner_box_01 a{
display:inline;
padding:0; /*2*/
}
...
}
...
</style>

① 배너 영역을 보면 첫 번째 자식 박스의 이미지 링크 영역이 첫 번째 자식 박스의 한가운데에 배치되어 있습니다. 따라서 justify-content 속성과 align-items 속성의 값을 박스를 중앙으로 배치하는 값인 center로 설정합니다.

② 첫 번째 자식의 이미지 링크 영역인 <a> 태그는 더 이상 블록처럼 작동할 필요가 없으므로 display 속성의 값을 inline으로 설정합니다. 그리고 패딩값 또한 필요 없으므로 패딩값을 0으로 설정합니다.

 

 

 

배너 영역의 태블릿용 CSS 코드를 이어서 작성합니다.

<style>
...
/* 태블릿용 CSS */
@media all and (min-width:768px){
...
/* 배너 영역 CSS */
...
.banner_box_02{
display:flex;
/*배너 영역의 두 번째 자식 박스를 플렉서블 박스로 작동하게 만들기 위해 display 속성의 값을 flex로 설정합니다.*/
justify-content:center;
align-items:center; /*1*/
}

.banner_list{
padding:0; /*2*/
justify-content:flex-start;
/*앞에서 모바일용 CSS에서 배너 이미지 목록 영역의 목록들을 간격을 두고 배치하기 위해 설정했던
justify-content 속성은 이제 필요 없으므로 초깃값인 flex-start로 설정합니다.*/
}

.banner_list li:nth-child(2){
margin:0 14px;
margin:0 0.875rem; /*3*/
}
...
}
...
</style>

① 배너 영역을 보면 두 번째 자식 박스의 배너 이미지 목록 영역이 두 번째 자식 박스의 한가운데에 배치되어 있습니다. 따라서 주축 방향으로 박스를 배치하는 justify-content 속성의 값은 박스를 중앙으로 배치하는 값인 center로 설정하고, 교차축 방향으로 박스를 배치하는 align-items 속성의 값은 박스를 중앙으로 배치하는 값인 center로 설정합니다.

② 배너 영역의 두 번째 자식의 배너 이미지 목록 영역에는 패딩값이 더 이상 필요 없으므로 패딩값을 0으로 설정합니다.

③ 다시 배너 이미지 목록 영역의 구조를 보면 목록 중 두 번째 목록에 왼쪽과 오른쪽 간격이 14px만큼 있으므로 배너 이미지 목록 중 두 번째 목록만 선택하여 왼쪽/오른쪽 마진값을 14px/0.875rem으로 설정합니다.

 

 

 

이번에는 PC용 CSS를 작성합니다.

<style>
...
/* PC용 CSS */
@media all and (min-width:960px){
...
/* 배너 영역 CSS */
.banner_section{
order:7;
/*PC 환경에서 배너 영역을 보면 배너 영역이 일곱 번째로 배치되어 있으므로 order 속성의 값을 7로 설정합니다.*/
width:22.91666666666667%;
/* 220px ÷ 960px */
/*PC 환경으로 변경되었으므로 가변 그리드 공식을 이용해서 얻은 값인 22.91...%를 배너 영역의 너빗값으로 설정합니다.*/
}

/* 소셜 네트워크 영역 CSS */
.social_section{
order:8;
width:17.08333333333333%;
/* 164px ÷ 960px */
}
...
}
</style>

 

 

 

 

 

 

 

• 출처 : "반응형 웹 페이지 만들기"