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

메인 페이지 반응형 웹 작업하기

앞에서는 메인 페이지의 구조 작업을 수행해 보았습니다. 여기서는 메인 페이지를 반응형 웹으로 만들기 위해 모바일, 태블릿, PC 환경 이렇게 세 가지 환경에 적용할 스타일 코드를 미리 준비해 둔 미디어 쿼리에 작성하여 반응형 웹을 만들어보겠습니다.

지금부터 할 작업이 웹 브라우저에서 다소 이상하게 보일 수 있는데 그렇더라도 걱정하지 마세요. 작업을 하나씩 진행하다 보면 차츰 모양새가 갖춰질 것입니다.

 

 

 

1. 인포메이션 영역의 반응형 웹 작업하기

이번에는 인포메이션 영역의 반응형 웹 작업을 진행해 보겠습니다. 먼저 모바일용 CSS부터 작업합니다.

<style>
/* 모바일용 CSS */
...
/* 인포메이션 영역 CSS */
.info_section{
order:1;
/*모바일 환경의 구조를 보면 인포메이션 영역이 가장 위에 배치되므로 박스의 배치 순서를 변경하는
order 속성의 값을 1로 설정합니다.*/
width:100%;
background:#2ecc71;
border-bottom:1px solid #39d67c; /*1*/
}

.info_list{
display:flex;
/*인포메이션 영역의 목록인 info_list라는 클래스명에는 display 속성의 값을 flex로 설정하여
플렉서블 박스로 작동하게 합니다.*/
}

.info_list li{
width:25%;
text-align:center; /*2*/
}

.info_list li a{
display:block;
padding:15px 0;
padding:0.938rem 0; /*3*/
}
...
</style>

① 너빗값을 100%로 설정하고 초록색 계열의 배경색과 아래쪽에 1px 두께의 초록색 직선을 설정합니다.

② 목록을 구성하는 <li> 태그에는 너빗값을 25%로 설정하고 글자를 중앙으로 정렬합니다.

③ 목록의 링크 태그인 <a> 태그에는 display 속성의 값을 block으로 설정하고 위/아래 패딩값을 15px/0.938rem으로 설정합니다.

(태블릿 환경은 모바일 환경과 동일하기 때문에 생략합니다.)

 

※ 왜 속성값을 px 단위와 rem 단위 두 개로 나눠서 사용하나요? - 폴백 기법 모든 화면에서 동일한 글자 크기로 표시되는 em 단위를 쓰자니 상속 문제가 걸리고, rem 단위를 쓰자니 하위 브라우저에서는 작동하지 않는 문제가 있습니다. 이런 문제를 해결하기 위해 먼저 px 단위를 사용해 값을 입력하고, 바로 이어서 rem 단위를 사용해 값을 입력합니다. 그러면 CSS 언어의 특징인 위에서 아래로 읽는 순서에 따라 하위 브라우저에서는 rem 단위를 지원하지 않으므로 px 단위를 적용하게 됩니다. 그리고 최신 브라우저에서는 먼저 px 단위를 적용하고 이어서 rem 단위가 나오므로 최종적으로 rem 단위를 적용하게 됩니다. 결국 최신 브라우저에서는 최신 기술을 사용하고 하위 브라우저에서는 최신 기술은 사용할 수 없지만 정상적으로 작동은 합니다. 이런 기법을 대비책이라는 의미의 폴백(fallback) 기법이라고 합니다. 이 기법은 최신 기술을 사용하고자 하는 경우에 많이 사용하는 방법입니다.

 

 

 

이어서 PC용 CSS를 작성합니다.

<style>
...
/* PC용 CSS */
@media all and (min-width:960px){
...
/* 인포메이션 영역 CSS */
.info_section{
order:0;
/*PC 환경의 구조를 보면 인포메이션 영역이 상단 오른쪽에 배치되어 있는 것을 확인할 수 있습니다.
박스의 배치 순서를 변경하는 order 속성의 값을 초기화하기 위해 기본값인 0으로 설정합니다.*/
position:absolute; /*1*/
top:30px;
top:1.875rem;
right:30px;
right:1.875rem;
z-index:30; /*2*/
width:auto;
border-bottom:0; /*3*/
}

.info_list li{
width:auto;
margin-left:15px;
margin-left:0.625rem; /*4*/
}

.info_list li a{
padding:0; /*5*/
}
...
}
</style>

① 인포메이션 영역을 상단 오른쪽에 배치하기 위해 요소의 위치를 설정해 주는 속성인 position을 설정합니다. 속성값은 절대적인 위치로 만들어주는 absolute로 설정합니다.

② 요소의 위치를 설정합니다. 위쪽은 30px/1.875rem, 오른쪽은 30px/1.875rem으로 설정합니다. 그리고 다른 요소들에 가려지지 않게 요소의 겹치는 순서를 설정하는 z-index 속성의 값을 30으로 설정합니다.

③ PC 환경에서는 인포메이션 영역의 너빗값이 필요 없으므로 모바일용 CSS에서 설정한 너빗값을 없애기 위해 너빗값을 auto로 설정합니다. 아래쪽의 선도 필요 없으니 아래쪽 선값을 0으로 설정합니다.

④ 인포메이션 영역의 목록 태그인 <li> 태그에는 모바일용 CSS에서 설정해 놓은 너빗값이 더 이상 필요 없으므로 너빗값을 auto로 설정합니다. 그리고 왼쪽 간격을 확하기 위해 왼쪽 마진값을 15px/0.625rem으로 설정합니다.

⑤ 인포메이션 영역 목록의 링크 태그인 <a> 태그에는 모바일용 CSS에서 설정해 놓은 패딩값이 더 이상 필요 없으므로 패딩값을 0으로 설정합니다.

 

 

 

 

 

 

2. 헤더 영역의 반응형 웹 작업하기

이번에는 헤더 영역의 반응형 웹 작업을 진행해 보겠습니다. 먼저 모바일용 CSS부터 작성합니다. 코드는 인포메이션 영역 뒤에 바로 이어서 작성합니다.

(헤더 영역은 코드의 양이 많으므로 나누어 작업합니다.)

<style>
/* 모바일용 CSS */
...
/* 헤더 영역 CSS */
.header{
display:flex;
/*모든 환경에서 헤더 영역을 플렉서블 박스로 작동하도록 하기 위해 display 속성의 값을 flex로 설정합니다.*/
order:2;
/*모바일 환경에서 헤더 영역의 구조를 보면 헤더 영역이 두 번째로 배치된 것을 알 수 있습니다.
박스의 배치 순서를 변경하는 order 속성의 값을 2로 설정합니다.*/
flex-direction:column;
/*모바일 환경에서는 헤더 영역의 로고와 메뉴 영역이 세로로 배치되기 때문에 박스의 배치 방향을 설정하는
flex-direction 속성의 값을 column으로 설정합니다.*/
position:relative;
width:100%; /*1*/
}

.logo{
order:1;
/*모바일 환경에서 헤더 영역의 구조를 보면 로고 영역이 가장 상단에 배치된 것을 알 수 있습니다.
박스의 배치 순서를 변경하는 order 속성의 값을 1로 설정합니다.*/
width:100%;
padding:30px 0;
padding:1.875rem 0;
font-size:1.188em;
font-size:1.188rem;
line-height:21px;
line-height:1.313rem; /*2*/
text-align:center;
text-transform:uppercase;
background:#2ecc71;
text-shadow:0px 1px 1px #25ab5e; /*3*/
}

.nav{
order:2;
/*모바일 환경에서 헤더 영역의 구조를 다시 한번 확인해 보면 메뉴 영역이 두 번째로 배치된 것을
알 수 있으므로 박스의 배치 순서를 변경하는 order 속성의 값을 2로 설정합니다.*/
width:100%; /*4*/
}
...
</style>

① 모바일 환경에서 헤더 영역의 구조를 보면 토글 버튼이 오른쪽 상단에 배치되어 있는 것을 볼 수 있습니다. 토글 버튼이 놓일 기준을 설정하기 위해 position 속성의 값을 relative로 설정하여 상대적인 위치로 만들어 주고 너빗값은 100%로 설정합니다.

② 너빗값을 100%로 설정하고 위/아래 패딩값을 30px/1.875rem으로 설정합니다.

로고 영역의 글자 크기와 글자 행간은 모든 환경에서 동일하므로 글자 크기를 1.188em/1.188rem으로 설정하고, 글자 행간은 21px/1.313rem으로 설정합니다.

③ 글자를 중앙으로 정렬하기 위해 center로 설정하고, 글자를 대문자로 만들어주는 속성값인 uppercase와 배경색, 글자 그림자를 설정합니다.

④ 너빗값을 100%로 설정합니다.

 

 

 

모바일용 CSS 코드에서 헤더 영역의 CSS 코드는 내용이 많으므로 뒤에 이어서 작성합니다.

<style>
/* 모바일용 CSS */
...
/* 헤더 영역 CSS */
...
.gnb li{
display:flex;
/*메뉴 목록을 구성하는 <li> 태그에 display 속성의 값을 flex로 설정하여 플렉서블 박스로 작동하게 합니다.*/
background:#2c3e50; /*1*/
}

.gnb li a{
width:80%;
padding:20px 0;
padding:1.250rem 0; /*2*/
font-size:0.938em;
font-size:0.938rem;
text-indent:20px;
text-indent:1.250rem;
font-weight:bold;
text-transform:uppercase; /*3*/
}

① 배경색을 설정합니다.

② 너빗값을 80%로 설정하고, 위/아래 패딩값을 20px/1.250em으로 설정합니다.

③ 모든 환경에서 동일하게 적용될 글자 크기인 0.938em/0.938rem으로 글자 크기를 설정하고, 글자를 들여쓰기 위한 text-indent 속성의 값을 20px/1.250rem으로 설정합니다.

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

 

 

 

.gnb li span{
width:20%;
text-indent:-9999px; /*4*/
background:url(images/s_images/sub_menu_toggle_btn.png) center center no-repeat;
cursor:pointer; /*5*/
}

.menu_toggle_btn{
display:block;
width:30px;
width:1.875rem;
height:30px;
height:1.875rem; /*6*/
position:absolute;
top:10px;
top:0.625rem;
right:10px;
right:0.625rem;
text-indent:-9999px; /*7*/
background:url(images/s_images/menu_toggle_btn.png) no-repeat;
cursor:pointer; /*8*/
}
...
</style>

④ 하위 메뉴를 보이고 감추는 역할을 하는 토글 버튼인 <span> 태그에는 너빗값을 20%로 설정하고, 글자를 들여쓰기 위한 text-indent 속성의 값을 -9999px로 설정합니다.

⑤ 토글 버튼을 배경 이미지로 처리하기 위해 배경 속성을 사용해서 배경 이미지를 설정하고, 마우스 커서의 상태를 설정하기 위한 cursor 속성의 값을 pointer로 설정합니다.

⑥ display 속성의 값을 block으로 설정합니다. 그리고 모바일 환경에서 전체 메뉴를 보이고 감추는 역할을 하는 토글 버튼의 너빗값과 높잇값이 30px인 것을 알 수 있으므로 너빗값과 높잇값을 각각 30px/1.875rem으로 설정합니다.

⑦ 모바일 환경에서 전체 메뉴를 보이고 감추는 역할을 하는 토글 버튼은 오른쪽 상단에 배치되어 있습니다. 요소의 위치를 설정하기 위한 position 속성의 값을 절대적인 위치로 만드는 absolute로 설정하고, 요소의 위치는 위쪽과 오른쪽을 각각 10px/0.625rem으로 설정합니다.

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

 

 

 

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

<style>
...
/* 태블릿용 CSS */
@media all and (min-width:768px){
...
/* 헤더 영역 CSS */
.header{
flex-direction:row;
/*태블릿 환경에서 헤더 영역의 구조는 모바일 환경과는 달리 헤더 영역의 자식 박스들이 가로로 배치되어 있습니다.
박스의 배치 방향을 설정하는 flex-direction 속성의 값을 박스를 가로로 배치하는 row로 설정합니다.*/
}

.logo{
position:absolute;
top:0;
left:0; /*1*/
z-index:10; /*2*/
width:15.625%;
/* 120px ÷ 768px */
/*태블릿 환경에서 로고 너빗값은 120px입니다. 가변 그리드 공식을 이용해서 얻은 값인 15.625%를 너빗갓ㅂ으로 설정합니다.*/
padding:0; /*3*/
}

.logo a{
display:block;
padding:50px 0;
padding:3.125rem 0; /*4*/
}

.nav{
position:relative; /*5*/
min-height:80px;
min-height:5.000rem;
background:#2ecc71; /*6*/
}
...
}
...
</style>

① 태블릿 환경에서는 로고 영역이 상단 왼쪽에 배치되어 있기 때문에 요소의 위치를 설정하기 위한 position 속성의 값을 절대적인 위치로 만들어 주는 absolute로 설정하고, 위쪽과 왼쪽의 위칫값을 0으로 설정합니다.

② 요소의 겹쳐지는 순서를 설정하는 z-index 속성의 값을 10으로 설정합니다.

③ 모바일 환경에서 설정한 패딩값을 없애기 위해 패딩값을 0으로 재설정합니다.

④ 로고의 링크 영역인 <a> 태그에는 display 속성의 값을 block으로 설정하고, 위/아래 패딩값을 50px/3.125rem으로 설정합니다.

⑤ 태블릿 환경에서 메뉴 영역은 오른쪽 상단에 배치되어 있습니다. 메뉴 영역이 놓일 기준을 설정하기 위해 내비게이션을 뜻하는 <nav> 태그에 position 속성의 값을 relative로 설정하여 상대적인 위치로 만듭니다.

⑥ 태블릿 구조를 보면 <nav> 태그의 높이가 80px이므로 최소 높잇값을 80px/5.000rem으로 설정하고, 배경색을 설정합니다.

 

 

 

태블릿용 CSS 코드에서 헤더 영역의 CSS 코드는 내용이 많으므로 뒤에 이어서 작성합니다.

<style>
...
/* 태블릿용 CSS */
@media all and (min-width:768px){
...
/* 헤더 영역 CSS */
.gnb{
position:absolute;
top:100%;
right:0; /*1*/
z-index:20;
width:40.10416666666667%;
/* 308px ÷ 768px */
/*태블릿 환경에서 메뉴 목록 영역의 구조를 보면 너빗값이 308px이므로 가변 그리드 공식을 이용해서
얻은 값인 40.10...%를 너빗값으로 설정합니다.*/
}

.menu_toggle_btn{
top:50%;
right:30px;
right:1.875rem; /*2*/
z-index:20;
margin-top:-15px;
margin-top:-0.938rem; /*3*/
}
...
}
...
</style>

① 태블릿 환경에서 메뉴 목록 영역의 구조를 보면 메뉴 목록 영역은 상단 오른쪽에 배치되어 있습니다. position 속성의 값을 absolute로 설정하여 절대적인 위치로 만들고, 요소의 위치를 위쪽은 100%로, 오른쪽은 0으로 설정합니다.

② 태블릿 환경에서 전체 메뉴를 보이고 감추는 역할을 하는 menu_toggle_btn이라는 클래스명을 가진 토글 버튼의 세로는 중앙으로 정렬되어 있고, 가로는 오른쪽에 배치되어 있습니다. 위쪽은 50%, 오른쪽은 30px/1.875rem으로 설정합니다.

③ 메뉴 토글 버튼의 위칫값이 위쪽은 50%로 설정되어 있기 때문에 정확히 중앙으로 정렬하려면 자신의 세로 크기의 절반 값인 15px을 음수의 마진값으로 설정해 줘야 합니다. 따라서 위쪽 마진값을 -15px/-0.938rem으로 설정합니다.

 

366, 375행 요소의 겹쳐지는 순서를 설정하는 z-index 속성의 값을 20으로 설정하여 다른 요소들에 가려지지 않게 합니다.

 

 

 

이어서 PC용 CSS를 작성합니다.

<style>
...
/* PC용 CSS */
@media all and (min-width:960px){
...
/* 헤더 영역 CSS */
.header{
order:1;
/*PC 환경에서 헤더 영역의 구조를 보면 헤더 영역이 가장 상단에 배치되는 것을 알 수 있습니다.
박스의 배치 순서를 변경하는 order 속성의 값을 1로 설정합니다.*/
justify-content:flex-end;
/*PC 환경에서는 로고 영역이 상단 왼쪽에 배치되어 있습니다. 메뉴 영역이 기존의 로고 영역의 위치에 배치되어
로고 영역에 가려질 수 있으니 주축 방향으로 박스를 다양하게 배치하는 justify-content 속성의 값을
박스를 주축 방향 끝점에 배치하는 속성값인 flex-end로 설정합니다.*/
position:static; /*1*/
}

.logo{
width:12.5%;
/* 120px ÷ 960px */ /*2*/
}

.nav{
display:flex;
align-items:center;
/*메뉴 영역에 배치되어 있는 메뉴 목록 영역을 세로 중앙으로 정렬시켜야 하므로 교차축 방향으로
박스를 다양하게 배치하는 align-items 속성의 값을 중앙으로 배치하는 값인 center로 설정합니다.*/
position:static; /*3*/
width:87.5%;
/* 840px ÷ 960px */ /*4*/
}
...
}
</style>

① 헤더 영역은 더 이상 상대적인 위치로 작동할 필요가 없으므로 position 속성의 값을 기본값인 static으로 설정합니다.

② 로고 영역의 너빗값을 설정합니다. 그런데 총 너빗값이 960px로 변경되었기 때문에 로고 영역의 너빗값도 다시 가변 그리드 공식을 이용해서 얻은 값인 12.5%로 재설정합니다.

③ 메뉴 영역은 더 이상 상대적인 위치로 작동할 필요가 없으므로 요소의 위치를 설정하는 position 속성의 값을 기본값인 static으로 재설정합니다.

④ PC 환경에서 메뉴 영역의 구조를 보면 <nav> 태그 영역의 너빗값이 840px인 것을 알 수 있으므로 가변 그리드 공식을 이용해서 얻은 값인 87.5%를 너빗값으로 설정합니다.

 

 

 

PC용 CSS 코드에서 헤더 영역은 내용이 많으므로 뒤에 이어서 작성합니다.

<style>
...
/* PC용 CSS */
@media all and (min-width:960px){
...
/* 헤더 영역 CSS */
.gnb{
display:flex !important;
flex-direction:row;
/*PC 환경에서 메뉴 목록 영역의 구조를 보면 메뉴 목록들이 가로로 배치되어 있는 것을 알 수 있으므로
앞에서 모바일용 CSS에서 메뉴 목록들을 세로로 배치한 것을 재설정하기 위해 메뉴 목록 영역에 박스의
배치 방향을 설정하는 flex-direction 속성의 값을 박스를 가로로 배치하는 값인 row로 설정합니다.*/
position:static;
width:100%; /*1*/
text-shadow:0px 1px 1px #25ab5e; /*2*/
}

.gnb li{
display:block; /*3*/
margin-left:5.20833333333333%;
/* 50px ÷ 840px */
/*PC용 구조를 보면 메뉴마다 왼쪽에 50px 크기의 간격이 있으므로 가변 그리드 공식을 이용해서
얻은 값인 5.20...%를 왼쪽 가변 마진값으로 설정합니다.*/
background:none; /*4*/
}

.gnb li a{
width:auto;
padding:0;
text-indent:0; /*5*/
}

.gnb li span{
display:none;
}

.menu_toggle_btn{
display:none; /*6*/
}
...
}
</style>

① 메뉴 목록 영역은 더 이상 오른쪽 상단에 배치되어 있는 구조가 아니므로 요소의 위치를 설정하는 position 속성의 값을 기본값인 static으로 설정하고, 너빗값을 100%로 설정합니다.

② 메뉴 목록 영역의 목록 글자에 글자 그림자가 있으므로 글자 그림자를 설정합니다.

③ 목록을 구성하는 태그인 <li> 태그에는 display 속성의 값을 block으로 설정합니다.

④ 모바일용 CSS에서 설정했던 배경색을 제거합니다.

⑤ 앞에서 모바일용 CSS에서 설정했던 너빗값을 초기화하기 위해 너빗값을 auto로 설정합니다. 그리고 패딩값과 글자 들여쓰기를 위한 text-indent 속성의 값을 0으로 설정합니다.

⑥ 메뉴를 보이고 감추기 위한 역할을 하는 토글 버튼들은 PC 환경에서는 필요 없으므로 display 속성의 값을 none으로 설정합니다.

 

 

 

 

 

 

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