[CSS] sitemap 아이콘 디자인

[CSS] 아이콘 sitemap 디자인

/sitemap/category/home/icon/menu/메뉴

:D html

<div class="sitemap"> <div class="SitemapDepth1">Category 1</div> <div class="SitemapDepth2Wrap"> <span class="SitemapDepth2"><a href="javascript:Common.menuClick('<c:url value='/focus/main.do' />');">Content 0</a></span> <span class="SitemapDepth2"><a href="javascript:Common.menuClick('<c:url value='/focus/main.do' />');">Content 1</a></span> <span class="SitemapDepth2"><a href="javascript:Common.menuClick('<c:url value='/focus/main.do' />');">Content 2</a></span> <span class="SitemapDepth2"><a href="javascript:Common.menuClick('<c:url value='/focus/main.do' />');">Content 3</a></span> <span class="SitemapDepth2"><a href="javascript:Common.menuClick('<c:url value='/focus/main.do' />');">Content 4</a></span> </div> <div class="SitemapDepth1">Category 2</div> <div class="SitemapDepth2Wrap"> <span class="SitemapDepth2"><a href="javascript:Common.menuClick('<c:url value='/focus/main.do' />');">Content 0</a></span> <span class="SitemapDepth2"><a href="javascript:Common.menuClick('<c:url value='/focus/main.do' />');">Content 1</a></span> <span class="SitemapDepth2"><a href="javascript:Common.menuClick('<c:url value='/focus/main.do' />');">Content 2</a></span> <span class="SitemapDepth2"><a href="javascript:Common.menuClick('<c:url value='/focus/main.do' />');">Content 3</a></span> <span class="SitemapDepth2"><a href="javascript:Common.menuClick('<c:url value='/focus/main.do' />');">Content 4</a></span> </div> <div class="SitemapDepth1">Category 3</div> <div class="SitemapDepth2Wrap"> <span class="SitemapDepth2"><a href="javascript:Common.menuClick('<c:url value='/focus/main.do' />');">Content 0</a></span> <span class="SitemapDepth2"><a href="javascript:Common.menuClick('<c:url value='/focus/main.do' />');">Content 1</a></span> <span class="SitemapDepth2"><a href="javascript:Common.menuClick('<c:url value='/focus/main.do' />');">Content 2</a></span> <span class="SitemapDepth2"><a href="javascript:Common.menuClick('<c:url value='/focus/main.do' />');">Content 3</a></span> <span class="SitemapDepth2"><a href="javascript:Common.menuClick('<c:url value='/focus/main.do' />');">Content 4</a></span> </div> <div class="SitemapDepth1">Category 4</div> <div class="SitemapDepth2Wrap"> <span class="SitemapDepth2"><a href="javascript:Common.menuClick('<c:url value='/focus/main.do' />');">Content 0</a></span> <span class="SitemapDepth2"><a href="javascript:Common.menuClick('<c:url value='/focus/main.do' />');">Content 1</a></span> <span class="SitemapDepth2"><a href="javascript:Common.menuClick('<c:url value='/focus/main.do' />');">Content 2</a></span> <span class="SitemapDepth2"><a href="javascript:Common.menuClick('<c:url value='/focus/main.do' />');">Content 3</a></span> </div> </div>

:D CSS

.SitemapDepth1 {background-color:#4988C7;padding:5px 5px;} .SitemapDepth2Wrap{padding:5px;5px;} .SitemapDepth2 {border-width:1px;border-style:solid;border-radius:10px;border-color:#336CA6;padding:5px 5px;margin:3px 3px;width:70px;height:50px;text-align:center;}