위의 효과 입니다. 하위 카테고리 메뉴 옆에 메뉴들 쭈욱 나와 있고 ' | ' 기호 나타난거 보이시죠?


이 ' | ' 기호를 카페24에서 어떻게 깔끔하게 출력할건지에 관한 내용입니다.




참고로 본격적으로 얘기를 하기 전에 언급해야 할 부분은, 이건 CSS3를 이용한 방법입니다.


그러니까 익스플로러 구버전에서는 안된다는 것이죠.


쇼핑몰은 다른 사이트보다 구버전 익스플로러의 사용률이 높습니다. 일단 빌어먹을 ActiveX를 써야 결제가 되던지 말던지 할 거 아니에요... -_-;


물론 지금 소개하고자 하는 것은 장식적인 요소니까, 안되도 쇼핑몰의 내용을 보는 데 큰 무리는 없습니다. 하지만 안예뻐 보이겠죠.


일반적인 상용 유료 카페24 디자인은 저와 같은 방법을 쓰지 않습니다. 대신 디자인 자체를 리스트 옆에 장식이 붙지 않도록 디자인하죠.


하지만 이 장식적인 요소는 디자이너가 저에게 이렇게 해달라고 요구한 것이기 때문에, 진행하게 되었습니다.




이 부분의 모듈 부분 소스코드는 다음과 같습니다. (Cafe24의 문법을 따른 것입니다.)


<div id="menupackage_wrap" module="Product_menupackage">

<div class="menupackage">

<!--@css(/css/module/product/menupackage.css)-->

<h3 module="product_menucategory">���� ī�װ�</h3>

<div class="sub_wrap">

<ul>

<li style="display:{$display};" module="product_menucategory"> <a href="/product/list.html{$param_mid}">{$name_mid}</a>

<ul class="sub" module="product_categorylist">

           <li><a href="/product/list.html{$param_low}" class="first">{$name_low}</a></li>

           <li><a href="/product/list.html{$param_low}">{$name_low}</a></li>

           <li><a href="/product/list.html{$param_low}">{$name_low}</a></li>

         </ul>

</li>

</ul>

</div>

</div>

</div>


여기에 적용된 menupackage.css 의 구조는 다음과 같습니다.


#menupackage_wrap{position:relative;width:942px;margin:0 0 10px 15px;border:1px solid #dcddde;background-color:#fff;}

#menupackage_wrap .menupackage{margin:14px 0 12px 0;padding:0 14px 0 150px;background:url("http://bimilbottari.cafe24.com/ys_edit/images/main_new00001/detail_layout_subwrap_bg.png") repeat-y 151px top;}

#menupackage_wrap h3{position:absolute;left:25px;top:50%;margin-top:-11px;

font-family:'�������', 'Nanum Gothic', '����';font-size:18px;font-weight:bold;color:#414042;

}

#menupackage_wrap .sub_wrap{overflow:hidden;margin-left:22px;}

#menupackage_wrap .sub_wrap > ul{overflow:hidden;}

#menupackage_wrap .sub_wrap > ul > li{float:left;}

#menupackage_wrap .sub_wrap > ul > li{overflow:hidden;font-family:'�������', 'Nanum Gothic', '����';}

#menupackage_wrap .sub_wrap ul > li > ul{float:left;}

#menupackage_wrap .sub_wrap ul > li > ul > li{float:left;}

#menupackage_wrap .sub_wrap > ul > li > a{display:block;padding:6px 0;font-size:14px;color:#414042;text-decoration:none;float:left;font-weight:bold;}

#menupackage_wrap .sub_wrap ul li a:hover, #menupackage_wrap .sub_wrap ul li a:focus{text-decoration:underline;}

#menupackage_wrap .sub_wrap > ul > li > ul > li a{display:inline-block;font-size:14px;color:#3e495d;text-decoration:none;font-weight:bold;padding:6px 0;}

#menupackage_wrap .sub_wrap > ul > li > ul > li:before{content:"|";display:inline-block;font-size:14px;color:#3e495d;padding:6px 10px;}

#menupackage_wrap .sub_wrap > ul > li > ul > li:last-child:not(:nth-child(1)):after{content:"|";display:inline-block;font-size:14px;color:#3e495d;padding:6px 10px;}


여기서 핵심이 되는 CSS(CSS3)는 마지막 한줄입니다. 이 부분이지요.


#menupackage_wrap .sub_wrap > ul > li > ul > li:last-child:not(:nth-child(1)):after{content:"|";display:inline-block;font-size:14px;color:#3e495d;padding:6px 10px;}


이 부분을 일반적으로 프론트엔드 개발자가 하는 방식으로 바꿔 보겠습니다.


이 부분은 정말 아래와 같이 생각하기 쉽습니다. 왜냐하면 위의 방법은 생각해내기가 그리 쉽지 않거든요.


#menupackage_wrap .sub_wrap > ul > li:after{content:"|";display:inline-block;font-size:14px;color:#3e495d;padding:6px 10px;}


근데 이 소스코드를 적용한 결과는 아래와 같이 됩니다.




그 이유는 개발자도구로 분석하면 쉽게 알 수 있습니다.





실제적으로 아무 내용이 존재하지 않는 리스트 요소에도 하위 리스트 요소가 들어가게 됩니다.


그렇기 때문에 번거롭더라도 CSS3의 not 필터를 사용했던 것입니다.




만약 Cafe24의 메뉴 리스트에 :after 또는 :before와 같은 장식적인 요소를 붙여야 하는 실무자라면, 이 팁을 참고하시기 바랍니다.


하지만 Cafe24같은 쇼핑몰 말고 일반적인 html 마크업에서는 그리 필요하지 않은 팁입니다.


일반적인 html 마크업에서는 아무 내용이 존재하지 않는 리스트 요소에 빈 하위 리스트 요소를 넣을 이유가 없거든요.





댓글을 달아 주세요

  1. 스마트제이킴 2015.12.08 03:42 신고  댓글주소  수정/삭제  댓글쓰기

    소스코드를 이미지가 아닌 이렇게 바로 올리는건 검색 엔진이 좋아하지 않는다고 하던데, 그래서 대부분 이미지로 올리더라고요. 저도 VBA를 연재하려고 알아봤엇어요.
    효자손 블로그 타고 넘어왔는데 블로그로 월 200~300 만드는 것 충분히 가능하다고 봐요. 특히 IT기술을 가진 사람이라면요. 전 기계공학자 이지만 제가 아는 IT지식으로 월 수 100만원이상 나는 블로그 10개 만들고 은퇴할 계획입니다. 꿈이지만요 ㅎ '
    비 전공자인 저도 두달만에 수익이 어느정도 나는데 님은 글도 잼있게 쓰시는데 검색 엔진 최적화만 시킨다면 충분히 블로그로 수익 낼 수 있을거에요.

    • 책덕후 화영 2015.12.08 07:25 신고  댓글주소  수정/삭제

      사람들이 소스코드를 이미지로 올리는 건 검색엔진 문제가 아니라 다른 이유가 있을 거에요. 많은 사람들은 자기가 직접 작성한 소스코드 남이 퍼가는거 좋아하지 않죠. 그러면서도 블로그에 포스팅은 하고싶고 그런 이유일겁니다.
      소스코드를 검색엔진이 좋아하지 않는다는 얘기는 일리가 있어요. 왜냐하면 대부분의 사람들이 자연어로 검색하지 소스코드로 검색하진 않거든요. 하지만 소스코드를 올리면 안된다는 얘기는 그 부분이 좀 와전된 것 같습니다.

티스토리 툴바