[카페24] 반응형 무료 디자인 수정하기 02 - 탑 메뉴 아이콘 위치 변경하기

이전 포스팅에 이어서 사이트 상단의 메뉴를 최종적으로 하기 이미지의 우측과 같이 변경할 것입니다. 좌측은 기존 디자인입니다. 반응형이기 때문에 PC, 태블릿, 모바일 버전까지 미디어 쿼리가 이미 작성되어있고 각각에 맞는 디자인 수정을 하겠습니다. 또한 [사이드 메뉴 버튼]을 우측으로 옮길 것이기 때문에 버튼을 클릭했을 때 좌측에서 우측으로 나오던 [사이드 메뉴]도 우측에서 좌측으로 나오도록 수정할 것입니다.

상단 메뉴의 우측에는 이미 [검색], [로그인], [관심상품] 아이콘들이 자리 잡고 있습니다. [사이드 메뉴 버튼]을 우측 끝으로 옮기려면 이 아이콘들도 지금 위치보다 우측 기준 더 좌측으로 이동해서 [사이드 메뉴 버튼]의 자리를 만들어 주고, [사이드 메뉴 버튼]을 우측 끝에 위치하도록 수정하겠습니다.

 

우선 가장 작은 모바일 버전부터 봅니다. 미리 보기 사이트를 열어 창의 크기를 모바일 버전 사이즈로 줄이거나, 개발자 도구를 열어 기기 툴바 전환모드로 모바일 버전을 확인해 봅니다.

요소 선택 버튼을 선택하고 먼저 이동해야 할 검색 아이콘을 클릭합니다. 그러면 navigation___util class인 것이 확인되고 또 하단에 미디어 쿼리에 관련된 내용이 보입니다. 이 class는 가로 최대 767px(모바일 버전)까지 header의 우측 16px에 검색 아이콘이 위치한다는 내용이네요.

이 우측 16px 부분을 60px까지 수치를 올려주면 우측을 기준으로 60px에 돋보기 아이콘이 위치하게 됩니다. 이제 [사이드 메뉴 버튼]이 있을 자리가 생겼네요.

다시 요소 선택 툴로 [사이드 메뉴 버튼]을 선택합니다. .navigation .btnNav class이고 속성에 left: 16px이네요. 좌측 우측 16px씩 위치하면 사이트 디자인에 딱 맞도록 디자인되어 있다는 것을 확인할 수 있습니다. 또 말 그대로 버튼의 위치가 좌측 16px이고, 이것을 더블클릭하여 right:16px;로 수정해봅니다.

우측 끝으로 이동해 딱 알맞게 수정되었습니다. class의 이름이나 어느 정도 속성을 익혔으니 스마트 디자인 편집툴로 이동합니다.

스마트 스토어 사이트 구조에 대해서 저번 편에 간략히 설명했으니 병행해서 봐주시면 좋겠어요. 편집툴 첫 화면에서 1행의 <!--@layout(/layout/basic/main.html)-->이 레이아웃 부분에 마우스 커서를 올려서 파일 열기를 합니다. (파일을 여는 방법은 다양합니다. 나중에 다루겠습니다.)

레이아웃은 크게 [메인 레이아웃], [공통 레이아웃], [디테일 레이아웃]이 있습니다. 이들은 다 똑같이 사용할 수도 다 다른 디자인으로 사용할 수도 있습니다. 굳이 용도 및 기능상의 특이사항, 예를 들어 '[디테일 레이아웃]을 사용하는 상세페이지를 볼 때만 상단 레이아웃에 뭔가가 있어야 한다.'라는 것이 아니라면 다 통일해서 사용하길 권하겠습니다. (실제로 창을 하나씩 다 열어서 한번 확인해 보시길 권합니다. 세 개의 레이아웃은 다 똑같은 디자인입니다. 하지만 각각 필요한 곳에 연결되어 보여집니다. ) css는 하나의 스타일 시트로 함께 쓰고, html은 모두 복사된 같은 내용이지만 보여지는 페이지가 다 다릅니다. 예를 들어 [메인 레이아웃]에서 위 이미지의  <!--@import(/layout/basic/state_login.html)-->이 부분을 삭제한다면 메인에서는 로그인 버튼이 없어졌지만 관심상품란에 들어가면 [공통 레이아웃]이 보여지기 때문에 로그인 버튼이 그대로 있습니다. 한마디로 이 세개의 레이아웃은 html을 수정할 때 세 번의 같은 과정을 거쳐야 한다는 겁니다.

 

이 얘기를 한 이유는 레이아웃의 html을 한 줄 삭제할 건데 세 번 해야 하기 때문에 말씀드렸습니다. 44행의(행이 약간 다를 수 있습니다.) <!--@import(/layout/basic/state_login.html)-->을 삭제할 겁니다. 스마트 디자인 편집 창의 좌측에 [자주쓰는화면]과 [전체화면보기]가 있는데 [전체화면보기]탭을 눌러 레이아웃>기본 레이아웃>메인 레이아웃, 공통 레이아웃, detail_layout.html 세 개 모두 열어 state_login.html을 삭제합니다.

 

이제 아이콘의 class가 어디 있는지 찾아야 합니다.  .navigation___util .navigation .btnNav 이러한 종류를 찾아야 하는데 아무래도 내비게이션 html에 있을 가능성이 크니 우선 <!--@import(/layout/basic/navigation.html)-->을 열어 확인하겠습니다.

아이콘에 관련된 html은 여기 있네요. 하지만 css는 여기 없나 봅니다. 다시 메인 레이아웃으로 돌아와 <!--@css(/layout/basic/css/layout.css)-->로 layout.css를 열어봅니다.

여기 다 있네요. 기본적인 속성 및 각각의 디스플레이에 맞는 디자인이 미디어 쿼리로 작성되어있습니다. 우선 모바일을 보고 있었으니 모바일부터 살펴봅니다.

/********************* Mobile *********************/
@media all and (max-width:767px) {
    /* responsive class */
    .RTI, .RTB, .RTIB { display:none !important; }
    .RMB { display:block !important; }
    .RMI { display:inline !important; }
    .RMIB { display:inline-block !important; }

    #header .navigation .btnNav {left:16px; }
    #header .navigation__util { right:16px; }
}

[사이드 메뉴 버튼]은 헤더 내비게이션 왼쪽 16px에 위치, [아이콘]들은 같은 헤더의 내비게이션 우측 16px에 위치해있습니다. 위에서 봤던 개발자 도구를 다시 봅니다. .navigation__util가 [검색 아이콘]이었죠. 오른쪽으로 60px을 더 주면 적당한 자리가 생겼었습니다. 그리고 .btnNav가 [사이드 메뉴 버튼]에서 봤던 class네요. 이것을 right:16px로 변경했더니 원하던 대로 우측 끝에 버튼이 자리 잡았었습니다. 이걸 토대로 작성합니다.

/********************* Mobile *********************/
@media all and (max-width:767px) {
    /* responsive class */
    .RTI, .RTB, .RTIB { display:none !important; }
    .RMB { display:block !important; }
    .RMI { display:inline !important; }
    .RMIB { display:inline-block !important; }

    #header .navigation .btnNav {right:16px; }
    /*사이드 메뉴 버튼 우측 16px에 위치*/
    #header .navigation__util { right:60px; }
    /*내비게이션 아이콘들 우측 60px에 위치*/
}

작성 후에는 반드시 Ctrl+s를 눌러 저장해주세요. 모바일은 이렇게 위치가 변경되었고, 태블릿 및 PC버전을 보겠습니다. 다시 창 사이즈를 가로 1024px로 줄이고 확인해봅니다.

@media all and (min-width:768px) and (max-width:1024px) 태블릿에서는 검색 아이콘(#header .navigation___util)이 우측 24px에 위치해있네요. 24px을 80px로 수정하여 적절한 위치로 밀어주고, 모바일 버전과 마찬가지로 사이드 메뉴 버튼(#header .navigation .btnNav)을 left에서 right로 수정합니다. 다시 이를 토대로 스마트 디자인 편집툴의 layout.css로 돌아와 수장하겠습니다.

/********************* Tablet *********************/
@media all and (min-width:768px) and (max-width:1024px) {
    /* responsive class */
    .RMI, .RMB, .RMIB { display:none !important; }
    .RTI { display:inline !important; }
    .RTB { display:block !important; }
    .RTIB { display:inline-block !important; }
    
    #header .navigation .btnNav { left:24px;  }
    #header .navigation__util { right:24px; }
}

기존 모바일과 마찬가지로 사이드 메뉴 버튼은 좌측에, 아이콘은 우측에 위치해있습니다. 약간의 수치는 다르지만 기본적으로 모바일과 동일합니다.

/********************* Tablet *********************/
@media all and (min-width:768px) and (max-width:1024px) {
    /* responsive class */
    .RMI, .RMB, .RMIB { display:none !important; }
    .RTI { display:inline !important; }
    .RTB { display:block !important; }
    .RTIB { display:inline-block !important; }
    
    #header .navigation .btnNav { right:24px;  }
    /*사이드 메뉴 버튼 우측 24px에 위치*/
    #header .navigation__util { right:80px; }
    /*내비게이션 아이콘들 우측 80px에 위치*/
}

작성 후 저장합니다. 이쯤 되면 PC버전도 동일한 작업이라는 것을 알 수 있습니다.

/********************* PC *********************/
@media all and (min-width:1025px) {
    /* responsive class */
    .RMI, .RMB, .RMIB, .RTI, .RTB, .RTIB, .RTMI, .RTMB { display:none !important; }
    .RWI { display:inline !important; }
    .RWB { display:block !important; }
    .RWIB { display:inline-block !important; }
    
    #header { padding:0 49px; transition:.5s; }
    #header.fixed { overflow:hidden; position:fixed; top:0; width:100%; height:80px; z-index:1000; transition:.5s; background-color: rgba(255,255,255,0.8) }
	#header.fixed .navigation { position:absolute; top:0; left:49px; right:49px; background:#fff; }
    #header .topArea { position: absolute; z-index: 1;}
    #header .navigation { position:relative; min-height:80px; }
    #header .navigation .btnNav { position:absolute; left:0; top:30px; }
	#header .navigation__util { position: absolute; right:0;  top:30px; }
    #contents { max-width:1240px; min-height:700px; padding:0 50px 200px; padding-bottom:200px; margin:0 auto; }
    main#contents { max-width:100%; margin:0 50px; padding:0 0 44px; }
    section.gInner { max-width:1240px; margin:0 auto; }

    #footer { padding:40px 0 44px; }
    #footer:before { content:""; display:block; position:absolute; bottom:100px; left:0; right:0; border-top:1px solid #e0e0e0; }
    #footer .inner { max-width:1340px; margin:0 auto; padding:0 50px; }
    
    #quick { z-index:10; position:absolute; top:284px; right:51px; width:93px; background:#fff; box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.25); }
	#quick.fixed {position:fixed; top:84px;}
	#quick .pageTop a { display:block; padding:19px 0; text-align:center; font-size:14px; text-transform:uppercase; }
    #quick .pageTop .icon { vertical-align:middle; }
}

PC 버전은 [사이드 메뉴 버튼](#header .navigation .btnNav)이 좌측 0px에 위치, [검색, 로그인, 관심상품 아이콘](#header .navigation__util)이 우측 0px에 위치해있습니다.

/********************* PC *********************/
@media all and (min-width:1025px) {
    /* responsive class */
    .RMI, .RMB, .RMIB, .RTI, .RTB, .RTIB, .RTMI, .RTMB { display:none !important; }
    .RWI { display:inline !important; }
    .RWB { display:block !important; }
    .RWIB { display:inline-block !important; }
    
    #header { padding:0 49px; transition:.5s; }
    #header.fixed { overflow:hidden; position:fixed; top:0; width:100%; height:80px; z-index:1000; transition:.5s; background-color: rgba(255,255,255,0.8) }
	#header.fixed .navigation { position:absolute; top:0; left:49px; right:49px; background:#fff; }
    #header .topArea { position: absolute; z-index: 1;}
    #header .navigation { position:relative; min-height:80px; }
    #header .navigation .btnNav { position:absolute; right:0; top:30px; }
     /*사이드 메뉴 버튼 우측 0px에 위치*/
	#header .navigation__util { position: absolute; right:40px;  top:30px; }
     /*내비게이션 아이콘들 우측 40px에 위치*/
    #contents { max-width:1240px; min-height:700px; padding:0 50px 200px; padding-bottom:200px; margin:0 auto; }
    main#contents { max-width:100%; margin:0 50px; padding:0 0 44px; }
    section.gInner { max-width:1240px; margin:0 auto; }

    #footer { padding:40px 0 44px; }
    #footer:before { content:""; display:block; position:absolute; bottom:100px; left:0; right:0; border-top:1px solid #e0e0e0; }
    #footer .inner { max-width:1340px; margin:0 auto; padding:0 50px; }
    
    #quick { z-index:10; position:absolute; top:284px; right:51px; width:93px; background:#fff; box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.25); }
	#quick.fixed {position:fixed; top:84px;}
	#quick .pageTop a { display:block; padding:19px 0; text-align:center; font-size:14px; text-transform:uppercase; }
    #quick .pageTop .icon { vertical-align:middle; }
}

[아이콘]들을 우측에서 40px 밀고, [사이드 메뉴 버튼]을 우측 끝으로 보냈습니다. 아이콘 위치 변경은 모바일, 태블릿, PC까지 모두 끝났습니다. 지금까지 내용들을 활용해서 header안의 아이콘 위치를 top, bottom, right, left 등 다양한 속성들을 활용해서 원하는 위치에 아이콘을 놓을 수 있을 겁니다. 

이제 [사이드 메뉴]가 좌측에서 나오는 부분을 우측에서 나오도록 수정하고 마무리하겠습니다. 사이드 메뉴를 열고 요소 선택 툴로 이미지처럼 3번 위치를 클릭합니다. 잘 모르고 보더라도 [사이드 메뉴]는 왼쪽에서 나올 거라는 강한 암시처럼 보입니다(?). 수정할 파일을 열어 .expand #aside 및 각각의 미디어 쿼리의 #aside의 left를 전부 right로 수정할 겁니다.

메인 레이아웃에서 <!--@import(/layout/basic/sidebar.html)-->에 커서를 올려 파일 열기를 합니다. 저번 편에서 봤던 내용과 같은 위치입니다.

sidebar.html창을 열어 확인하면 2행의 slideMenu.css를 파일 열기로 열어줍니다.

body { position:relative; /*left:0; transition:left 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94);*/ }/*body를 왼쪽으로 n px expand 한다는 내용은 모두 지우겠습니다.*/
body.expand { overflow-x:hidden; }
body.expand #aside { visibility:visible; overflow-x:hidden; }
body.expand #layoutDimmed { /*display:block;*/ }/*사이드 메뉴 활성화 시 사이트 화면을 흐리게 변경하는 효과를 지우겠습니다. dimmed(흐리게)*/
body.expand #aside { /*left:0;→*/ right:0; }

#aside { z-index:1001; visibility:hidden; position:fixed; top:0px; bottom:0; overflow:auto; overflow-x:hidden; min-width:225px; width:458px; background-color:#fff; transition:500ms cubic-bezier(0.25, 0.46, 0.45, 0.94);}
#aside .btnClose { position:absolute; font-size:1px; line-height:1px; color:transparent; text-indent:150%; white-space:nowrap;  }

.navigation-menu__member { border-bottom:1px solid #000; }
.navigation-menu__member a { display:inline-block; font-weight:bold; text-transform: uppercase; text-decoration:none; }
.navigation-menu__category .categoryList ul { display:none; }
.navigation-menu__category .categoryList li { position:relative; }
.navigation-menu__category .categoryList li.selected > ul { display:block; }
.navigation-menu__category .categoryList > li.selected .slideSubMenu { padding:0 0 0 10px; }
.navigation-menu__category .categoryList > li.selected .slideSubMenu a.view { color: #595959;  }
.navigation-menu__category .categoryList > li.selected .slideSubMenu ul { padding:0 0 0 20px; }
.navigation-menu__category .categoryList > li.selected .slideSubMenu ul a.view { color: #929292; }
.navigation-menu__category .categoryList a.cate,
.navigation-menu__project .icoCategory { position:absolute; right:0; top:0; word-wrap:break-word;overflow:hidden; width:48px; height:48px; font-size:1px; line-height:1px; color:transparent; text-indent:150%; white-space:nowrap;  }
.navigation-menu__category .categoryList a.cate:before,
.navigation-menu__project .icoCategory:before { content:""; display:block; width:10px; height:10px; margin:18px auto 0; border-left:1px solid #929292; border-bottom:1px solid #929292; -webkit-transition:.3s ease-out; transition:.3s ease-out;-webkit-transform:rotate(-45deg); transform:rotate(-45deg); }
.navigation-menu__category .categoryList li.selected > a.cate:before,
.navigation-menu__project .selected .icoCategory:before { margin-top:22px; -webkit-transform:rotate(135deg); transform:rotate(135deg); }
.navigation-menu__category .categoryList li.noChild > a.cate { display:none; }
.navigation-menu__category .icoBookmark { display:none; }
.navigation-menu__project { border-top:1px solid #ebebeb; }
.navigation-menu__project .title { position:relative; display:block; padding:15px 0; font-size:18px; }
.navigation-menu__board { border-top:1px solid #ebebeb; }

/********************* Mobile *********************/
@media all and (max-width:767px) {
    body.expand { /*left:292px;*/ position:fixed; }
    #aside { /*left:-292px;→*/ right:-292px;  width:292px; }
    #aside .btnClose { top:25px; right:17px; width:18px; height:18px; }
    #aside .btnClose .icon { width:23px; height:23px; margin: -2px 0 0 -2px; }
    #aside .btnClose .icon:before { right:11px; height:23px; }
    #aside .btnClose .icon:after {top:11px; width:23px; }
    .navigation-menu__member { padding:79px 0 30px 16px; }
    .navigation-menu__member a { margin:0 10px 0 0; font-size:14px; }
    .navigation-menu__board,
    .navigation-menu__category,
    .navigation-menu__project { padding:13px 0 30px 16px; }
    .navigation-menu__board .menu a { display:block; padding:15px 0; font-size:16px; text-decoration:none;  }
    .navigation-menu__category .view,
    .navigation-menu__project .view { display:block; padding:15px 0; font-size:16px; text-decoration:none; }
    .navigation-menu .menu { margin:2px 0; }
}

/********************* Mobile / Tablet *********************/
@media all and (max-width:1024px) {
    .navigation-menu__member .count { display:inline-block; min-width:24px; padding:3px 4px 3px; font-size:13px; text-align:center; border:1px solid #000; border-radius:20px; box-sizing:border-box; }
}

/********************* Tablet *********************/
@media all and (min-width:768px) and (max-width:1024px) {
	#aside { /*left:-458px;→*/ right:-458px;  width:458px; }
}

/********************* Tablet / PC *********************/
@media all and (min-width:768px) {
    #aside .btnClose {  top:40px; right:50px;  width:25px; height:25px; }
    #aside .btnClose .icon { width:30px; height:30px; margin: -2px 0 0 -2px;}
    #aside .btnClose .icon:before { right:15px; height:30px; }
    #aside .btnClose .icon:after {top:15px; width:30px; }
    .navigation-menu__member { padding:95px 0 39px 50px; }
    .navigation-menu__member a { margin:0 18px 0 0; font-size:18px; }
    .navigation-menu .menu { margin:2px 0; }
    .navigation-menu__category,
    .navigation-menu__project { padding:23px 38px 25px 50px; }
    .navigation-menu__category .view,
    .navigation-menu__project .view  { display:block; padding:15px 0; font-size:18px; text-decoration:none; }
    .navigation-menu__board { padding:23px 50px 25px; }
    .navigation-menu__board .menu a { display:block; padding:15px 0; font-size:18px; text-decoration:none; }
}

/********************* PC *********************/
@media all and (min-width:1025px) {
    body.expand { /*left:458px;*/ }
    #aside { /*left:-458px;→*/ right:-458px;  width:458px; }
}

5행 34행 57행 80행을 모두 left에서 right로 수정했습니다. 이제 저장 후 미리 보기 사이트에서 f5를 눌러 새로고침 후 모두 잘 실행되는지 확인합니다. 모바일, 태블릿, pc 모두 창 크기를 바꿔가며 확인해주세요.

다음에는 사이트 로고 등록 방법과 위치를 변경하겠습니다. 도움이 되셨다면 좋겠습니다. 문제점이나 궁금한 부분은 댓글에 남겨주세요.