<![CDATA[
<p><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b><head></b></span></p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b><style></b></span></p><p> </p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b></style></b></span></p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b></head></b></span><br><br><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b><style> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>/*custom font*/ </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>@import‎ url(<a href="http://fonts.googleapis.com/css?family=Merriweather+Sans);" target="_blank" class="ke-link">http://fonts.googleapis.com/css?family=Merriweather+Sans);</a></b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>* {margin: 0; padding: 0;} </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>html, body {min-height: 100%;} </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>body { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>text-align: center; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>padding-top: 100px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>background: #689976; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>background: linear-gradient(#689976, #ACDACC); </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>font-family: 'Merriweather Sans', arial, verdana; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.breadcrumb { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>/*centering*/ </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>display: inline-block; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.35); </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>overflow: hidden; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>border-radius: 5px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>/*Lets add the numbers for each link using CSS counters. flag is the name of the counter. to be defined using counter-reset in the parent element of the links*/ </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>counter-reset: flag;  </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.breadcrumb a { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>text-decoration: none; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>outline: none; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>display: block; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>float: left; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>font-size: 12px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>line-height: 36px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>color: white; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>/*need more margin on the left of links to accomodate the numbers*/ </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>padding: 0 10px 0 60px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>background: #666; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>background: linear-gradient(#666, #333); </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>position: relative; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>/*since the first link does not have a triangle before it we can reduce the left padding to make it look consistent with other links*/ </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.breadcrumb a:first-child { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>padding-left: 46px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>border-radius: 5px 0 0 5px; /*to match with the parent's radius*/ </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.breadcrumb a:first-child:before { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>left: 14px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.breadcrumb a:last-child { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>border-radius: 0 5px 5px 0; /*this was to prevent glitches on hover*/ </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>padding-right: 20px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>/*hover/active styles*/ </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.breadcrumb a.active, .breadcrumb a:hover{ </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>background: #333; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>background: linear-gradient(#333, #000); </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.breadcrumb a.active:after, .breadcrumb a:hover:after { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>background: #333; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>background: linear-gradient(135deg, #333, #000); </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>/*adding the arrows for the breadcrumbs using rotated pseudo elements*/ </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.breadcrumb a:after { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>content: ''; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>position: absolute; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>top: 0;  </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>right: -18px; /*half of square's length*/ </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>/*same dimension as the line-height of .breadcrumb a */ </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>width: 36px;  </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>height: 36px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>/*as you see the rotated square takes a larger height. which makes it tough to position it properly. So we are going to scale it down so that the diagonals become equal to the line-height of the link. We scale it to 70.7% because if square's:  </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>length = 1; diagonal = (1^2 + 1^2)^0.5 = 1.414 (pythagoras theorem) </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>if diagonal required = 1; length = 1/1.414 = 0.707*/ </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>transform: scale(0.707) rotate(45deg); </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>/*we need to prevent the arrows from getting buried under the next link*/ </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>z-index: 1; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>/*background same as links but the gradient will be rotated to compensate with the transform applied*/ </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>background: #666; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>background: linear-gradient(135deg, #666, #333); </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>/*stylish arrow design using box shadow*/ </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>box-shadow:  </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>2px -2px 0 2px rgba(0, 0, 0, 0.4),  </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>3px -3px 0 2px rgba(255, 255, 255, 0.1); </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>/* </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>5px - for rounded arrows and  </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>50px - to prevent hover glitches on the border created using shadows*/ </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>border-radius: 0 5px 0 50px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>/*we dont need an arrow after the last link*/ </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.breadcrumb a:last-child:after { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>content: none; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>/*we will use the :before element to show numbers*/ </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.breadcrumb a:before { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>content: counter(flag); </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>counter-increment: flag; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>/*some styles now*/ </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>border-radius: 100%; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>width: 20px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>height: 20px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>line-height: 20px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>margin: 8px 0; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>position: absolute; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>top: 0; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>left: 30px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>background: #444; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>background: linear-gradient(#444, #222); </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>font-weight: bold; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.flat a, .flat a:after { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>background: white; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>color: black; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>transition: all 0.5s; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.flat a:before { </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>background: white; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>box-shadow: 0 0 0 1px #ccc; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.flat a:hover, .flat a.active,  </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.flat a:hover:after, .flat a.active:after{ </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>background: #9EEB62; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b></style> </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b><!-- a simple div with some links --> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b><div class="breadcrumb"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b><a href="#" class="active">Browse</a> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b><a href="#">Compare</a> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b><a href="#">Order Confirmation</a> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b><a href="#">Checkout</a> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b></div> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b><br /><br /> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b><!-- another version - flat style with animated hover effect --> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b><div class="breadcrumb flat"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b><a href="#" class="active">Browse</a> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b><a href="#">Compare</a> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b><a href="#">Order Confirmation</a> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b><a href="#">Checkout</a> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b></div> </b></span><br><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b><!-- Prefixfree --> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b><script src="<a href="http://thecodeplayer.com/uploads/js/prefixfree-1.0.7.js" target="_blank" class="ke-link">http://thecodeplayer.com/uploads/js/prefixfree-1.0.7.js</a>" type="text/javascript" type="text/javascript"></script></b></span></p><p> </p><p> </p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>HTML tag  드롭다운메뉴</b></span></p>
<!-- -->
]]>
