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

8. 소셜 네트워크 영역의 반응형 웹 작업하기

소셜 네트워크 영역의 반응형 웹 작업을 진행해 보겠습니다.

먼저 모바일용 CSS 코드부터 작성합니다. 소셜 네트워크 영역은 배너 영역 바로 뒤에 이어서 작성합니다.

<style>
/* 모바일용 CSS */
...
/* 소셜 네트워크 영역 CSS */
.social_section{
order:9;
/*모바일 환경에서 소셜 네트워크 영역을 보면 소셜 네트워크 영역이 아홉번째로 배치되어 있으므로
order 속성의 값을 9로 설정합니다.*/
padding:24px 12.5%;
padding:1.500rem 12.5%;
/* 40px ÷ 320px */
/*다시 소셜 네트워크 영역의 구조를 보면 위/아래 간격이 24px, 왼쪽/오른쪽 간격이 40px 있으므로
소셜 네트워크 영역에 패딩값을 위/아래는 24px/1.500rem, 왼쪽/오른쪽은 가변 그리드 공식을 이용해서
얻은 값인 12.5%로 설정합니다.*/
background:#fff; /*1*/
}

.social_list{
display:flex; /*2*/
justify-content:space-between;
/*소셜 아이콘 목록 영역을 보면 목록들이 간격을 두고 배치되어 있으므로 justify-content 속성의 값을
space-between으로 설정합니다.*/
}
...
</style>

ⓛ 배경색을 설정합니다.

② 소셜 아이콘 목록 영역을 플렉서블 박스로 작동하게 만들기 위해 display 속성의 값을 flex로 설정합니다.

 

 

 

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

<style>
...
/* 태블릿용 CSS */
@media all and (min-width:768px){
...
/* 소셜 네트워크 영역 CSS */
.social_section{
display:flex;
order:7;
/*태블릿 환경에서 소셜 네트워크 영역을 보면 일곱 번째로 배치되어 있으므로 order 속성의 값을 7로 설정합니다.*/
justify-content:center;
align-items:center; /*1*/
width:16.66666666666667%;
/* 128px ÷ 768px */
/*태블릿 환경에서는 소셜 네트워크 영역의 너빗값이 128px이므로 가변 그리드 공식을 이용해서
얻은 값인 16.66...%를 너빗값으로 설정합니다.*/
padding:0; /*2*/
}

.social_list{
flex-direction:column;
/*소셜 아이콘 목록 영역의 구조를 보면 목록들이 세로로 배치되어 있으므로 flex-direction 속성의 값을
박스를 세로로 배치하는 값인 column으로 설정합니다.*/
justify-content:flex-start;
/*모바일용 CSS에서 설정한 주축 방향으로 박스를 배치하는 속성의 값은 더이상 필요 없으므로
기본값인 flex-start로 설정합니다.*/
}

.social_list li:nth-child(2){
margin:24px 0;
margin:1.500rem 0; /*3*/
}
...
}
...
</style>

① 소셜 네트워크 영역을 보면 소셜 아이콘 목록 영역이 소셜 네트워크 영역의 한가운데 배치되어 있습니다. 따라서 주축 방향으로 박스를 배치하는 justify-content 속성의 값을 박스를 중앙으로 배치하는 값인 center로 설정하고, 교차축 방향으로 박스를 배치하는 align-items 속성의 값을 박스를 중앙으로 배치하는 값인 center로 설정합니다.

② 태블릿 환경에서는 소셜 네트워크 영역에 패딩값이 더 이상 필요 없으므로 패딩값을 0으로 설정합니다.

③ 소셜 아이콘 목록 영역의 구조를 다시 보면 목록 중 두 번째 목록에만 위/아래 간격이 24px만큼 있는 것을 확인할 수 있으므로 소셜 아이콘 목록 중 두 번째 목록만 선택하여 위/아래 마진값을 24px/1.500rem으로 설정합니다.

 

 

 

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

<style>
...
/* PC용 CSS */
@media all and (min-width:960px){
...
/* 소셜 네트워크 영역 CSS */
.social_section{
order:8;
/*PC 환경에서 소셜 네트워크 영역을 보면 소셜 네트워크 영역이 여덟 번째로 배치되어 있으므로
order 속성의 값을 8로 설정합니다.*/
width:17.08333333333333%;
/* 164px ÷ 960px */
/*PC 환경의 소셜 네트워크 영역을 보면 소셜 네트워크 영역의 너빗값이 164px로 변경되었으므로
가변 그리드 공식을 이용해서 얻은 값인 17.08...%를 너빗값으로 설정합니다.*/
}
...
}
</style>

 

 

 

 

 

 

9. 푸터 영역의 반응형 웹 작업하기

마지막으로 푸터 영역의 작업을 진행합니다. 푸터 영역은 소셜 네트워크 영역 바로 뒤에 이어서 작성합니다. 먼저 모바일용 CSS 코드부터 작성합니다.

<style>
/* 모바일용 CSS */
...
/* 푸터 영역 CSS */
.footer{
order:10;
/*모바일 환경을 보면 푸터 영역이 열 번째로 배치되어 있으므로 order 속성의 값을 10으로 설정합니다.*/
width:100%;
background:#474747; /*1*/
}

.footer p{
padding:20px;
padding:1.250rem; /*2*/
font-size:0.813em;
font-size:0.813rem;
text-align:center;
text-transform:uppercase;
font-weight:bold;
color:#fff;
text-shadow:0px 1px 1px #191919; /*3*/
}
...
</style>

① 너빗값을 100%로 설정하고, 배경색을 설정합니다.

② 푸터 영역의 구조를 보면 푸터 영역의 문단 영역에 간격이 20px 있습니다. 푸터 영역의 문단 영역인 <p> 태그에는 패딩값을 20px/1.250rem으로 설정합니다.

③ 모든 환경에서 동일하게 적용할 푸터 영역 중 문단 영역의 스타일을 적용합니다. 글자 크기는 0.813em/0.813rem으로 설정하고, 글자를 중앙으로 정렬합니다. 그리고 글자를 대문자로 변경하고, 글자의 굵기를 진하게로 설정합니다. 그리고 글자색과 글자의 그림자를 설정합니다.

 

 

 

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

<style>
...
/* 태블릿용 CSS */
@media all and (min-width:768px){
...
/* 푸터 영역 CSS */
.footer p{
padding:40px 0;
padding:2.500rem 0; /*1*/
}
}
...
</style>

① 태블릿 환경에서 푸터 영역의 구조를 보면 푸터 영역의 문단 영역에 위/아래 패딩값이 40px로 변경되었으므로 패딩값을 40px/2.500rem으로 재설정합니다.

 

 

 

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

<style>
...
/* PC용 CSS */
@media all and (min-width:960px){
...
/* 푸터 영역 CSS */
.footer{
order:9;
/*PC 환경에서 푸터 영역을 보면 아홉 번째로 배치되어 있으므로 order 속성의 값을 9로 설정합니다.*/
}

.footer p{
padding-left:3.125%;
/* 30px ÷ 960px */
/*푸터 영역의 구조를 보면 푸터 영역의 문단 영역에 30px만큼의 왼쪽 패딩값이 추가되었으므로
가변 그리드 공식을 이용해서 얻은 값인 3.12...%를 왼쪽 가변 패딩값으로 설정합니다.*/
text-align:left; /*1*/
}
}
</style>

① 푸터 영역의 문단 영역을 보면 글자들이 왼쪽으로 정렬되어 있으므로 푸터 영역의 문단 영역인 <p> 태그의 글자를 왼쪽으로 정렬합니다.

 

 

 

푸터 영역을 마지막으로, 메인 페이지의 반응형 웹 작업이 끝났습니다. 지금까지 작업한 메인 페이지 파일인 index.html 파일을 브라우저에서 실행시켜 브라우저의 크기를 줄여보세요. 그럼 브라우저의 크기에 따라 반응하는 웹사이트를 확인할 수 있습니다.

 

다음 장부터는 서브 페이지인 소개 페이지와 갤러리 페이지 그리고 게시판 페이지의 구조 작업과 반응형 웹 작업을 진행해 보겠습니다.

 

 

 

 

 

 

 

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