'분류 전체보기' 카테고리의 글 목록 (2 Page)

« 2024/05 »
일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

상품 리스트 레이아웃 flex --자동높이조절

카테고리 없음 2017. 11. 23. 17:16 |

상품 리스트 레이아웃 flex --자동높이조절

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <style> div.best_goods{ padding: 15px; /* 패딩값은 간격을 보고 적당히 조절 */ width: 1100px; border: 1px solid #ccc; box-sizing:border-box; margin:0 auto; overflow:hidden; display:flex; } div.best_goods_item{ float: left; background-color: #eee; border: 1px solid #898989; border-radius: 11px; padding: 20px; width: 23%; margin-left:2.666%; /* 1줄 3칸일때는 32%-2%, 1줄 4칸일때는 23%-2.666% */ text-align: center; box-sizing:border-box; margin-bottom:15px; } /* 1줄 3개일때 div.best_goods_item:nth-child(3n+1){ margin-left: 0; } */ /* 1줄 4개일때 */ div.best_goods_item:nth-child(4n+1){ margin-left: 0; } </style> </HEAD> <BODY> <div class="best_goods"> <div class="best_goods_item">inner box 1<br>222</div> <div class="best_goods_item">inner box 2</div> <div class="best_goods_item">inner box 3</div> <div class="best_goods_item">inner box 4</div> </div> <div class="best_goods"> <div class="best_goods_item">inner box 1<br>222<br>333</div> <div class="best_goods_item">inner box 2</div> <div class="best_goods_item">inner box 3</div> <div class="best_goods_item">inner box 4</div> </div> </BODY> </HTML>

:

상품리스트 레이아웃 no flex

카테고리 없음 2017. 11. 23. 17:12 |

상품리스트 레이아웃 no flex

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <style> div.best_goods{ padding: 15px; /* 패딩값은 간격을 보고 적당히 조절 */ width: 1100px; border: 1px solid #ccc; box-sizing:border-box; margin:0 auto; overflow:hidden; } div.best_goods_item{ float: left; background-color: #eee; border: 1px solid #898989; border-radius: 11px; padding: 20px; min-height:220px; width: 23%; margin-left:2.666%; /* 1줄 3칸일때는 32%-2%, 1줄 4칸일때는 23%-2.666% */ text-align: center; box-sizing:border-box; margin-bottom:15px; } /* 1줄 3개일때 div.best_goods_item:nth-child(3n+1){ margin-left: 0; } */ /* 1줄 4개일때 */ div.best_goods_item:nth-child(4n+1){ margin-left: 0; } </style> </HEAD> <BODY> <div class="best_goods"> <div class="best_goods_item">inner box 1<br>222</div> <div class="best_goods_item">inner box 2</div> <div class="best_goods_item">inner box 3</div> <div class="best_goods_item">inner box 4</div> <div class="best_goods_item">inner box 5</div> <div class="best_goods_item">inner box 6</div> <div class="best_goods_item">inner box 7</div> <div class="best_goods_item">inner box 2</div> <div class="best_goods_item">inner box 3</div> <div class="best_goods_item">inner box 4</div> <div class="best_goods_item">inner box 5</div> <div class="best_goods_item">inner box 6</div> <div class="best_goods_item">inner box 7</div> <div class="best_goods_item">inner box 2</div> <div class="best_goods_item">inner box 3</div> <div class="best_goods_item">inner box 4</div> <div class="best_goods_item">inner box 5</div> <div class="best_goods_item">inner box 6</div> <div class="best_goods_item">inner box 7</div> </div> </BODY> </HTML>

:

인트로샘플

카테고리 없음 2017. 11. 22. 20:38 |

인트로샘플

http://www.amerigotour.com/test_intro/index.html

:

메인 슬라이드

카테고리 없음 2017. 11. 21. 15:25 |

메인 슬라이드

http://www.yeintour.com/ms_test/test.htm

http://pgwjs.com/pgwslider/

:

div show hide 숨기고 보이기

카테고리 없음 2017. 11. 15. 13:52 |

div show hide 숨기고 보이기

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <script> function show1(){ document.getElementById('div1').style.display ='block'; document.getElementById('div2').style.display = 'none'; } function show2(){ document.getElementById('div1').style.display = 'none'; document.getElementById('div2').style.display ='block'; } </script> </HEAD> <BODY> <div style="margin:50px auto 0 auto; border:1px solid #ccc; width:80%; padding:15px "> <p>당신이 조만간 가게될 여행은 무엇입니까? -- 순수 스크립트 형태 ie7 동작</p> <input type="radio" name="tab" value="igotnone" onclick="show1();" /> 허니문 <input type="radio" name="tab" value="igottwo" onclick="show2();" /> 가족여행 <div id="div1" style="display:none"> <hr style="border:0; border-bottom:1px solid #ebebeb; background:#fff"><p>허니문을 가게된다면, 좋아하는 지역은?</p> <input type="checkbox" value="Yes" name="one"> 태국   <input type="checkbox" value="Yes" name="two"> 발리 </div> <div id="div2" style="display:none"> <hr style="border:0; border-bottom:1px solid #ebebeb; background:#fff"><p>가족여행은 누구랑 가게됩니까?</p> <input type="checkbox" value="Yes" name="one"> 부모님   <input type="checkbox" value="Yes" name="two"> 아내와 아이들 </div> </div> <div style="margin:50px auto 0 auto; border:1px solid #ccc; width:80%; padding:15px "> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> <script> $(document).ready(function(){ $("input[name='test']").click(function () { $('#show-me').css('display', ($(this).val() === 'a') ? 'block':'none'); $('#show-me2').css('display', ($(this).val() === 'b') ? 'block':'none'); $('#show-me3').css('display', ($(this).val() === 'c') ? 'block':'none'); }); }); </script> <p>좋아하는 색상은 무엇입니까? -- JQUERY형태</p> <input name='test' type='radio' value="a" />빨간색 <br /> <input name='test' type='radio' value="b" />노란색 <br /> <input name='test' type='radio' value="c" />파란색 <div id='show-me' style='display:none'><hr style="border:0; border-bottom:1px solid red; background:#fff">빨간색을 좋아하시는군요</div> <div id='show-me2' style='display:none'><hr style="border:0; border-bottom:1px solid yellow; background:#fff">저도 노란색을 좋아합니다.</div> <div id='show-me3' style='display:none'><hr style="border:0; border-bottom:1px solid blue; background:#fff">파란색은 역시 시원한 느낌을 주죠 ^^</div> </div> </BODY> </HTML>

:

간단한 css 테이블

카테고리 없음 2017. 11. 15. 03:53 |

간단한 css 테이블

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=euc-kr"> <title>Untitled Document</title> <style> #table {border-collapse:collapse; margin:0 auto} #table td {border:1px solid #ccc; border-collapse:collapse; padding:5px; width:200px} #table tr:nth-child(1) {background:#f7f7f7} /* tr:first-child 와 같음 */ /* table 좌우선 없애기 */ #table td:first-child {border-left:0} #table td:last-child {border-right:0} </style> </head> <body> <table id="table" width="1000" border="0" cellspacing="0" cellpadding="0"> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> </table> <br> <br> <style> #table2 {border-top:2px solid #666; border-bottom:1px solid #666; border-collapse:collapse; margin:0 auto} #table2 td {border:1px solid #ccc; padding:5px; width:200px;} #table2 tr:nth-child(1) {background:#f7f7f7} /* tr:first-child 와 같음 */ /* table 좌우선 없애기 */ #table2 td:first-child {border-left:0} #table2 td:last-child {border-right:0} /* table 상하 선넣기위해 맨위, 맨아래 td선없애기 */ #table2 tr:first-child td {border-top:0} #table2 tr:last-child td {border-bottom:0} </style> <table id="table2" width="1000" border="0" cellspacing="0" cellpadding="0"> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> </table> </body> </html>

:

div table 테이블

카테고리 없음 2017. 11. 15. 03:40 |

div table 테이블

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=euc-kr"> <title>Untitled Document</title> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript"> $(document).ready(function(){ $.extend($.fn,{ equalizeHeights : function() { var heights = this.map(function(idx, elm){ return $(elm).height(); }).get(); return this.height(Math.max.apply(this,heights)); } }); var i = 0, arr = [], lis = $('li'), rowsLen = lis.length / 1; for(; i < rowsLen; i++) { var rows = i * 1; arr[i] = lis.eq(rows).next().andSelf(); arr[i].equalizeHeights(); } }); </script> <style> div, ul, li { list-style:none; box-sizing: border-box; list-style-position: inside; margin:0; font-size:12px; color:#000; overflow:hidden; } #rprice { width:700px; border-top:2px solid #333; margin:0 auto; } #rprice ul { border-bottom:1px solid #666; float:left; width:100%; padding:0px; /*display:flex; */ } #rprice .title li { background:#ebebeb !important; color:#000 !important; font-weight:bold; font-size:12px; } #rprice ul li { float:left; border-right:1px solid #ccc; width: calc(550px/3); padding:5px; text-align:center; } #rprice ul li:nth-child(1) { background:#FFFFCC; width:150px; color:#FF6633; } #rprice ul li:last-child { border-right:0 } </style> </head> <body> <div id="rprice"> <ul class="title"> <li>비고</li> <li>1기간요금을 구해봅시다 다음줄로 넘겨요</li> <li>2기간요금</li> <li>3기간요금</li> </ul> <ul> <li>디럭스</li> <li>1,500,000원 [네파] 플리스 풀 집업 자켓 7B75406 남 7B85406 여/ 네파 </li> <li>2,000,000원</li> <li>3,000,000원</li> </ul> <ul> <li>스위트</li> <li>1,500,000원[네파] 플리스 풀 집업 자켓 7B75406 남 7B85406 여/ 네파</li> <li>2,000,000원</li> <li>3,000,000원</li> </ul> <ul> <li>풀빌라</li> <li>1,500,000원</li> <li>2,000,000원</li> <li>3,000,000원</li> </ul> </div> </body> </html>

:

css table 테이블

카테고리 없음 2017. 11. 15. 03:16 |

css table 테이블

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=euc-kr"> <title>Untitled Document</title> <style> #table {border-top:2px solid #666; border-bottom:1px solid #ccc; margin:0 auto; } /* table 테두리, cellspacing이 필요하면 border-spacing: 8px;border-collapse: separate; */ #table td {border-top:1px solid #ebebeb; border-left:1px solid #ebebeb; padding:5px} /* 전체 td 적용, cellpadding 은 padding으로 처리 */ #table td:first-child {border-left:0} /* 첫번째 td 왼쪽 테두리 없애기 */ #table tr:first-child {background:#f7f7f7 !important} /* 첫번째 tr 백그라운드 - th역활 !important 는 다른css보다 우선적용명령*/ #table tr:first-child td {border-top:0; border-left-color:#ccc} /* 첫번째 tr 의 td 사이 색상변경 */ #table tr:nth-child(2) td {border-top-color:#ccc;} /* 첫번째 tr의 bottom 테두리를 위하여, 2번째 tr의 td 상단테두리 색상변경 */ #table tr:last-child {background:#f7f7f7 !important} /* 마지막 tr 백그라운드 - 합계등이 필요할때 */ #table tr:last-child td {border-top-color:#ccc; border-left-color:#ccc} /* 마지막 tr의 td 사이 색상변경 */ /* tr 짝수 홀수 */ #table tr:nth-child(odd) {background:#fffff4;} #table tr:nth-child(even) {background:#fefdfd;} /* tr 마우스오버 */ #table tr:hover {background:#f3f9fe} /* tr 클릭시 배경변경 */ #table tr.selected {background:red} </style>  <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> <script> $(document).ready(function(){ // 여러개 tr을 선택할때 // $("#table tr").click(function(){ // $(this).toggleClass("selected"); // }); // 한개만의 tr을 선택할때 $("#table tr").click(function() { var selected = $(this).hasClass("selected"); $("#table tr").removeClass("selected"); if(!selected) $(this).addClass("selected"); }); }); </script>  </head> <body> <table id="table" width="800" border="0" cellspacing="0" cellpadding="0"> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> </table> </body> </html>

:

div table

카테고리 없음 2017. 11. 2. 16:20 |

div table

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=euc-kr"> <title>Untitled Document</title> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript"> $(document).ready(function(){ $.extend($.fn,{ equalizeHeights : function() { var heights = this.map(function(idx, elm){ return $(elm).height(); }).get(); return this.height(Math.max.apply(this,heights)); } }); var i = 0, arr = [], lis = $('li'), rowsLen = lis.length / 1; for(; i < rowsLen; i++) { var rows = i * 1; arr[i] = lis.eq(rows).next().andSelf(); arr[i].equalizeHeights(); } }); </script> <style> div, ul, li { list-style:none; box-sizing: border-box; list-style-position: inside; margin:0; font-size:12px; color:#000; overflow:hidden; } #rprice { width:700px; border-top:2px solid #333; margin:0 auto; } #rprice ul { border-bottom:1px solid #666; float:left; width:100%; padding:0px; /*display:flex; */ } #rprice .title li { background:#ebebeb !important; color:#000 !important; font-weight:bold; font-size:12px; } #rprice ul li { float:left; border-right:1px solid #ccc; width: calc(550px/3); padding:5px; text-align:center; } #rprice ul li:nth-child(1) { background:#FFFFCC; width:150px; color:#FF6633; } #rprice ul li:last-child { border-right:0 } </style> </head> <body> <div id="rprice"> <ul class="title"> <li>비고</li> <li>1기간요금을 구해봅시다 다음줄로 넘겨요</li> <li>2기간요금</li> <li>3기간요금</li> </ul> <ul> <li>디럭스</li> <li>1,500,000원 [네파] 플리스 풀 집업 자켓 7B75406 남 7B85406 여/ 네파 </li> <li>2,000,000원</li> <li>3,000,000원</li> </ul> <ul> <li>스위트</li> <li>1,500,000원[네파] 플리스 풀 집업 자켓 7B75406 남 7B85406 여/ 네파</li> <li>2,000,000원</li> <li>3,000,000원</li> </ul> <ul> <li>풀빌라</li> <li>1,500,000원</li> <li>2,000,000원</li> <li>3,000,000원</li> </ul> </div> </body> </html>

:

유튜브 youtube PC모바일 자동 리사이즈

카테고리 없음 2017. 7. 5. 17:58 |

유튜브 youtube PC모바일 자동 리사이즈

$('#you iframe').each(function() {
var newDiv = $('<div/>').addClass('youtube');
$(this).before(newDiv);
var next = $(this).next();
newDiv.append(this).append(next);
$(this).css({'width':'100%','height':'100%','position':'absolute','left':'0px'});

});

:

공지사항

카테고리

태그

최근글

최근댓글

최근트랙백

Archives

Links

'분류 전체보기'에 해당되는 글 81건

상품 리스트 레이아웃 flex --자동높이조절

상품리스트 레이아웃 no flex

인트로샘플

메인 슬라이드

div show hide 숨기고 보이기

간단한 css 테이블

div table 테이블

css table 테이블

div table

유튜브 youtube PC모바일 자동 리사이즈

티스토리툴바