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

3. 슬라이더 영역의 반응형 웹 작업하기

이제 슬라이더 영역의 작업을 진행해 보겠습니다. 먼저 모바일용 CSS 코드부터 작성해 볼까요? 코드는 헤더 영역 뒤에 바로 이어서 작성합니다.

<style>
/* 모바일용 CSS */
...
/* 슬라이더 영역 CSS */
.slider_section{
display:flex;
justify-content:space-between;
/*모든 환경에서 슬라이더 영역의 구조를 보면 이전 버튼과 다음 버튼이 슬라이더 영역의
왼쪽과 오른쪽에 배치되어 있는 것을 확인할 수 있습니다. 주축 방향으로 박스를 다양하게 배치하는
justify-content 속성의 값을 space-between으로 설정하여 버튼들을 왼쪽과 오른쪽에 배치합니다.*/
align-items:center;
/*버튼들을 세로 중앙으로 배치하기 위해 교차축 방향으로 박스를 다양하게 배치하는 align-items
속성의 값을 center로 설정합니다.*/
order:3;
/*모바일 환경과 태블릿 환경에서 슬라이더 영역의 구조를 보면 세 번째로 배치되어 있습니다.
order 속성의 값을 3으로 설정합니다.*/
width:100%;
height:300px;
height:18.750rem; /*1*/
background:url(images/p_images/slider_01.jpg) center center no-repeat; /*2*/
}

.slider_section span{
width:34px;
width:2.125rem;
height:39px;
height:2.438rem; /*3*/
text-indent:-9999px;
background:url(images/s_images/slider_arrow.png) no-repeat;
cursor:pointer; /*4*/
}

span.prev_btn{
margin-left:-10px;
margin-left:-0.625rem;
background-position:0 0;
}

span.next_btn{
margin-right:-10px;
margin-right:-0.625rem;
background-position:-34px 0; /*5*/
}
...
</style>

① 너빗값을 100%로 설정하고, 모바일 환경에서 슬라이더 영역을 살펴보면 높잇값이 300px이므로 높잇값을 300px/18.750rem으로 설정합니다.

② 배경 속성을 사용하여 배경 이미지를 설정합니다.

③ 슬라이더 영역의 버튼인 <span> 태그에는 너빗값을 34px/2.125rem, 높잇값을 39px/2.438rem으로 설정하고, 글자 들여쓰기 값을 -9999px로 설정합니다.

④ 글자를 들여쓰기 위한 text-indent 속성의 값을 -9999px로 설정하고, 버튼들을 배경 이미지로 처리하기 위해 배경 속성을 사용해서 배경 이미지를 설정합니다. 그리고 마우스 커서의 상태를 설정하는 cursor의 속성값을 pointer로 설정합니다.

⑤ 모든 환경에서 슬라이더 영역의 구조를 다시 한번 확인해 보면 이전 버튼과 다음 버튼이 슬라이더 영역에서 살짝 벗어난 것을 확인할 수 있으므로 버튼의 위치를 이동시키기 위해 이전 버튼에는 왼쪽 마진값을 -10px/-0.625rem으로 설정하고, 다음 버튼에는 오른쪽 마진값을 -10px/-0.625rem으로 설정합니다.

 

144행, 150행 이전 버튼에는 배경 이미지의 위치를 0 0으로 설정하고, 다음 버튼에는 배경 이미지의 위치를 -34px 0으로 설정합니다.

 

 

 

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

<style>
...
/* 태블릿용 CSS */
@media all and (min-width:768px){
...
/* 슬라이더 영역 CSS */
.slider_section{
width:59.89583333333333%;
/* 460px ÷ 768px */
/*태블릿 환경에서 슬라이더 영역의 구조를 보면 너빗값이 460px이므로 가변 그리드 공식을 이용해서 
얻은 값인 59.89...%를 너빗값으로 설정합니다.*/
height:auto; /*1*/
}

.slider_section span{
position:relative;
z-index:10; /*2*/
}
...
}
...
</style>

① 슬라이더 영역에 높잇값은 더 이상 필요 없으므로 높잇값을 auto로 설정합니다.

② 슬라이더 영역의 이전 버튼과 다음 버튼인 <span> 태그에는 다른 요소들에 의해 버튼이 가려지지 않게 하기 위해 요소의 위치를 설정하는 position 속성의 값을 상대적인 위치로 만드는 값인 relative로 설정하고, 요소의 겹쳐지는 순서를 설정하는 z-index 속성의 값을 10으로 설정합니다.

 

 

 

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

<style>
...
/* PC용 CSS */
@media all and (min-width:960px){
...
/* 슬라이더 영역 CSS */
.slider_section{
order:2;
/*PC 환경에서 슬라이더 영역의 구조를 보면 슬라이더 영역이 두 번째로 배치되어 있습니다.
order 속성의 값을 2로 설정합니다.*/
width:50%;
/* 480px ÷ 960px */
/*PC 환경에서 슬라이더 영역의 구조를 보면 너빗값이 480px이므로 가변 그리드 공식을 이용해서
얻은 값인 50%를 너빗값으로 설정합니다.*/
}
...
}
</style>

 

 

 

 

 

 

4. 최근 글 영역, 인기 글 영역의 반응형 웹 작업하기

최근 글 영역과 인기 글 영역은 구조가 같으므로 작업을 동시에 진행합니다.

먼저 모바일용 CSS 코드부터 작성합니다. 코드는 슬라이더 영역 뒤에 바로 이어서 작성하면 됩니다.

<style>
/* 모바일용 CSS */
...
/* 최근 글 영역, 인기 글 영역 CSS */
.latest_post_section{
order:4;
background:#ffc40f;
text-shadow:0px 1px 1px #b98e0b;
}

.popular_post_section{
order:5;
/*모바일 환경의 구조를 보면 최근 글 영역과 인기 글 영역이 네 번째와 다섯 번째에 나란히 배치되어 있습니다.
박스의 배치 순서를 변경하는 order 속성의 값을 각각 4와 5로 설정합니다.*/
background:#a660c2;
text-shadow:0px 1px 1px #714185;
}

.latest_post_section, .popular_post_section{
padding:40px 12.5%;
padding:2.500rem 12.5%;
/* 40px ÷ 320px */
/*다시 최근 글 영역과 인기 글 영역의 구조를 보면 각각의 영역에 위/아래, 왼쪽/오른쪽에 패딩값이 40px씩
적용되어 있는 것을 확인할 수 있습니다. 각각 위/아래 패딩값을 40px/2.500rem으로 설정하고,
왼쪽/오른쪽은 가변 패딩값으로 설정하기 위해 가변 그리드 공식을 이용해서 얻은 값인 12.5%를
왼쪽/오른쪽 패딩값으로 설정합니다.*/
}

.title{
margin-bottom:30px;
margin-bottom:1.875rem;
font-size:1.188em;
font-size:1.188rem; /*1*/
text-align:center;
text-transform:uppercase;
color:#fff; /*2*/
}

.latest_post_list li, .popular_post_list li{
margin-top:15px;
margin-top:0.938rem;
padding-left:14px;
padding-left:0.875rem; /*3*/
font-weight:bold;
text-transform:uppercase; /*4*/
background:url(images/s_images/post_circle_icon.png) left center no-repeat; /*5*/
}

.latest_post_list li:first-child, .popular_post_list li:first-child{
margin-top:0; /*6*/
}
...
</style>

① title이라는 클래스명을 가진 제목 영역에는 모든 환경에서 아래쪽 마진값과 글자 크깃값이 동일하게 적용되므로 아래쪽 마진값을 30px/1.875rem, 글자 크기를 1.188em/1.188rem으로 설정합니다.

② 글자를 중앙으로 정렬하고 대문자로 변경합니다. 그리고 글자색을 흰색 계열로 설정합니다.

③ 최근 글 영역과 인기 글 영역의 글 목록 영역을 구성하고 있는 <li> 태그에는 모든 환경에서 동일한 스타일이 적용되므로 위쪽 마진값을 15px/0.938rem으로 설정하고, 배경 이미지를 설정하기 위한 공간을 만들기 위해 왼쪽 패딩값을 14px/0.875rem으로 설정합니다.

④ 글자 굵기는 진하게로 설정하고, 글자를 대문자로 변경합니다.

⑤ 글 목록의 기호 아이콘을 배경 이미지로 처리하기 위해 배경 속성을 사용해 배경 이미지를 설정합니다.

⑥ 각각의 영역에 글 목록 중 가장 첫 번째 목록은 위쪽 마진값이 필요 없으므로 마진값을 0으로 설정합니다.

 

156행~157행, 162행~163행 각각 배경색과 글자 그림자를 설정합니다.

 

 

 

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

<style>
...
/* 태블릿용 CSS */
@media all and (min-width:768px){
...
/* 최근 글 영역, 인기 글 영역 CSS */
.latest_post_section{
order:5;
}

.popular_post_section{
order:6;
}

.latest_post_section, .popular_post_section{
width:41.666666666666666666666666666667%;
/* 320px ÷ 768px */
/*태블릿 환경에서 최근 글, 인기 글 영역의 구조를 다시 보면 각 영역의 너빗값이 320px인 것을 확인할 수 있습니다.
가변 그리드 공식을 이용해서 얻은 값인 41.66...%를 너빗값으로 설정합니다.*/
padding-left:5.208333333333333333333333333333%;
padding-right:5.208333333333333333333333333333%;
/* 40px ÷ 768px */
/*태블릿 환경으로 변경되었으므로 앞에서 모바일용 CSS에서 설정한 왼쪽/오른쪽 패딩값을 가변 그리드 공식을
이용해서 얻은 값인 5.20...%로 재설정합니다.*/
}
...
}
...
</style>

394행, 398행 태블릿 환경에서 최근 글, 인기 글 영역의 구조를 보면 다섯 번째와 여섯 번째에 배치되는 것을 확인할 수 있습니다. 박스의 배치 순서를 변경하는 order 속성의 값을 각각 5와 6으로 설정합니다.

 

 

 

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

<style>
...
/* PC용 CSS */
@media all and (min-width:960px){
...
/* 최근 글 영역, 인기 글 영역 CSS */
.latest_post_section, .popular_post_section{
display:flex;
flex-direction:column;
/*최근 글 영역과 인기 글 영역의 요소들은 세로로 배치되어야 하므로 박스의 배치 방향을 설정하는
flex-direction 속성의 값을 column으로 설정하여 세로로 배치합니다.*/
align-items:center;
/*요소들을 중앙으로 배치하기 위해 교차축 방향으로 박스를 배치하는 align-items 속성의 값을
중앙으로 배치하는 값인 center로 설정합니다.*/
width:30%;
/* 288px ÷ 960px */ /*1*/
padding-left:0;
padding-right:0; /*2*/
}
...
}
</style>

① PC 환경에서는 최근 글 영역과 인기 글 영역의 너빗값이 288px이므로 가변 그리드 공식을 이용해서 얻은 값인 30%를 너빗값으로 재설정합니다.

② PC 환경에서는 최근 글 영역과 인기 글 영역의 왼쪽/오른쪽 패딩값이 더 이상 필요 없으므로 앞에서 태블릿용에서 적용한 왼쪽/오른쪽 패딩값을 초기화하기 위해 패딩값을 0으로 설정합니다.

 

 

 

 

 

 

5. 갤러리 영역의 반응형 웹 작업하기

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

<style>
/* 모바일용 CSS */
...
/* 갤러리 영역 CSS */
.gallery_section{
order:6;
/*모바일 환경에서 갤러리 영역을 보면 갤러리 영역이 여섯 번째로 배치되어 있으므로  
order 속성의 값을 6으로 설정합니다.*/
padding:50px 12.5%;
padding:3.125rem 12.5%;
/* 40px ÷ 320px */
/*다시 갤러리 영역의 구조를 보면 위/아래 패딩값은 50px, 왼쪽/오른쪽 패딩값은 40px입니다.
위/아래 패딩값은 50px/3.125rem으로 설정하고, 왼쪽/오른쪽 패딩값은 가변 패딩값을 적용하기 위해
가변 그리드 공식을 이용해서 얻은 값인 12.5%로 설정합니다.*/
text-align:center;
background:#e65d5d;
text-shadow:0px 1px 1px #c43434; /*1*/
}

.gallery_section img{
width:100%;
max-width:100%;
border-radius:3px;
box-shadow:0px 1px 1px #c43434; /*2*/
}

.gallery_list li:nth-child(2){
margin-top:30px;
margin-top:1.875rem; /*3*/
}

.gallery_list li figcaption{
margin-top:20px;
margin-top:1.250rem;
font-size:1.188em;
font-size:1.188rem;
text-transform:uppercase;
font-weight:bold; /*4*/
}
...
</style>

① 글자를 중앙으로 정렬하고, 배경색과 글자 그림자를 설정합니다.

② 갤러리 이미지 목록의 이미지들을 가변적인 이미지로 작동하게 만들기 위해 너빗값과 최대 너빗값을 100%로 설정하고, 둥근 모서리와 박스 그림자를 설정합니다.

③ 갤러리 영역의 갤러리 목록 구조를 보면 목록 사이에 간격이 있는 것을 알 수 있습니다. 갤러리 목록 중 두 번째를 선택하여 위쪽 마진값을 30px/1.875rem으로 설정합니다.

④ 갤러리 목록의 이미지 설명 영역인 <figcaption> 태그에는 모든 환경에서 위족 마진값이 동일하게 적용되므로 위쪽 마진값을 20px/1.250rem으로 설정하고 글자 크기를 1.188em/1.188rem으로 설정합니다. 그리고 글자를 대문자로, 글자 굵기를 진하게로 설정합니다.

 

 

 

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

<style>
...
/* 태블릿용 CSS */
@media all and (min-width:768px){
...
/* 갤러리 영역 CSS */
.gallery_section{
order:8;
/*태블릿 환경에서 갤러리 영역의 구조를 ㅗ면 갤러리 영역이 여덟 번째로 배치되어 있으므로
order 속성의 값을 8로 설정합니다.*/
width:71.354166666666666666666666666667%;
/* 548px ÷ 768px */
/*다시 갤러리 영역의 구조를 보면 갤러리 영역의 너빗값이 548px이므로 가변 그리드 공식을 이용해서
얻은 값인 71.35...%로 설정합니다.*/
padding-left:5.208333333333333333333333333333%;
padding-right:5.208333333333333333333333333333%;
/* 40px ÷ 768px */
/*태블릿 환경으로 변경되었으므로 앞에서 모바일용 CSS에서 설정한 왼쪽/오른쪽 패딩값을
가변 그리드 공식을 이용해서 얻은 값인 5.20...%로 재설정합니다.*/
}

.gallery_list{
display:flex;
/*갤러리 목록 영역을 보면 목록들이 가로로 배치되어 있으므로 갤러리 목록 영역의 display 속성의 값을
flex로 설정합니다.*/
}

.gallery_list li{
width:47.008547008547008547008547008547%;
/* 220px ÷ 468px */
/*갤러리 목록 영역의 목록인 <li>* 태그는 너빗값이 220px이므로 가변 그리드 공식을 이욕해서
얻은 값인 47.08...%를 너빗값으로 설정합니다./
}

.gallery_list li:nth-child(2){
margin-left:5.982905982905982905982905982906%;
/* 28px ÷ 468px */
/*태블릿 환경에서 갤러리 목록의 구조를 보면 목록 사이에 28px 크기의 간격이 있으므로
가변 그리드 공식을 이용해서 얻은 값인 5.98...%를 왼쪽 가변 마진값으로 설정합니다.*/
margin-top:0; /*1*/
}
...
}
...
</style>

① 앞서 모바일용 CSS에서 설정했던 위쪽 마진값은 더 이상 필요 없으므로 위쪽 마진값을 0으로 설정합니다.

 

 

 

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

<sytle>
...
/* PC용 CSS */
@media all and (min-width:960px){
...
/* 갤러리 영역 CSS */
.gallery_section{    
order:3;
/*PC 환경에서 갤러리 영역을 보면 갤러리 영역이 세 번째로 배치되어 있으므로 order 속성의 값을 3으로 설정합니다.*/
width:27.08333333333333%;
/* 260px ÷ 960px */
/*PC 환경에서는 갤러리 영역의 너빗값이 260px로 변경되었으므로 가변 그리드 공식을 이용해서 얻은 값인 27.08...%를
너빗값으로 재설정 합니다.*/
}

.gallery_list{
display:block; /*1*/
}

.gallery_list li{
width:auto; /*2*/
}

.gallery_list li:nth-child(2){
margin-top:30px;
margin-top:1.875rem;
margin-left:0; /*3*/
}
...
}
</style>

① 갤러리 목록 영역은 더 이상 플렉서블 박스로 작동하지 않아도 되므로 display 속성의 값을 block으로 설정합니다.

② 갤러리 목록 영역의 목록인 <li> 태그에는 더 이상 너빗값이 필요 없으므로 너빗값을 auto로 설정합니다.

③ PC 환경에서는 갤러리 목록 영역의 목록이 다시 세로로 배치되었으므로 목록 중 두 번째 목록을 선택하여 위쪽 마진값을 30px/1.875rem으로 설정합니다. 그리고 앞에서 태블릿용 CSS에서 설정한 왼쪽 마진값은 더 이상 필요 없으므로 왼쪽 마진값을 0으로 설정합니다.

 

 

 

 

 

 

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