버튼 스타일시트 버튼 .btn1{display:inline-block;height:32px;background:url(../image/bg_btn3.gif) repeat-x;font-size:16px;line-height:32px;color:#373737;letter-spacing:-1px;text-align:center;font-weight:normal;border:1px #b4b4b4 solid;font-weight:bold;margin-top:0;} CSS HTML5/퍼블리싱 팁 2016.11.09
백그라운드 라운드 이미지 처리 .list_content_set{position:relative;background-color:#fff;padding:10px 5px;}.round1_1{position:absolute;top:0;left:0;width:13px;height:13px;background:url(../image/bg_round1.gif) no-repeat 0 0; font-size:0;}.round1_2{position:absolute;top:0;right:0;width:13px;height:13px;background:url(../image/bg_round1.gif) no-repeat 100% 0; font-size:0;}.round1_3{position:absolute;left:0;bottom:0;width:13px;h.. CSS HTML5/퍼블리싱 팁 2016.11.09
제목이 길 경우 점선으로 나오게 하는... .title_cut{margin:0 auto;width:55%; text-overflow:ellipsis; overflow:hidden;} 제목길이컷제목길이컷제목길이컷제목길이컷제목길이컷제목길이컷제목길이컷제목길이컷제목길이컷제목길이컷제목길이컷제목길이컷 폰트가 길 경우 윈도우에 조절에 따라 점선표시..가 된다~ CSS HTML5/퍼블리싱 팁 2016.11.09
푸터가 항상 하단에 있게 할때 html, body { height: 100%; margin: 0; padding: 0; } #header { height: 100px; background: #ddd; position: relative; z-index: 1; } #content-box { min-height: 100%; margin: -100px 0 -50px 0; } *html #content-box { height: 100%; } #content { padding: 100px 0 50px 0; } #footer { height: 50px; background: #ddd; } header (height 100pixel) contentscontentscontents footer (height 50pixel) 2번째방법 contents{.. CSS HTML5/퍼블리싱 팁 2016.11.09
특수문자 코드표 Hex CodeEntity CodeNumber CodeCharacterDescription """Quotation Mark &&&Ampersand ⁄//Slash <<Greater Than Sign ‚‚‚Single Low-9 Quote „„„Double Low-9 Quote††††Dagger ‡‡‡Double Dagger ‰‰‰Per Mill Sign ‹‹‹Single Left Angle Quote ‘‘‘Left Single Quote ’’’Right Single Quote “““Left Double Quote ”””Right Double Quote ™™™Trademark Symbol ›››Sin.. CSS HTML5/퍼블리싱 팁 2016.11.09
div 영문만 나열했을 경우 문제 word-break:break-all; word-wrap:break-word; dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGddddddddddddddddddddddddddddddddddddddddddddd CSS HTML5/퍼블리싱 팁 2016.11.09
익스6 png배경을 위한 스타핵 익스6 png배경을 위한 스타핵(별핵) 익스 6에서 png를 사용하면 투명한 부분이 회색으로 나온다. 구글에서는 익스 6을 버렸지만 국내에서는 아직 익스6을 무시할 수 없다. 스타핵의 사용법은 다음과 같다. .trans_layer{width:800px; height:100px; background:url('labg.png') repeat left top; } * html .trans_layer {background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='labg.png',sizingMethod='scale'); } 스타핵을 사용하면 익스6에서도 동일하게 png를 사용할 수 있다. 주의할 점은 png배경을 준 클래스 다음에.. CSS HTML5/퍼블리싱 팁 2016.11.09
익스별 코딩문제 (css핵 정리) Quirks Mode IE7 Standards 모드 IE8 Standards 모드 가장 최신 버젼 IE의 Standards 모드 DTD가 없는 페이지는 여전히 Quirks Mode로, DTD가 있는 페이지는 IE 7 표준 모드로 렌더링 http://www.nmindplus.com/2006/06/28/css-hack/ CSS HTML5/퍼블리싱 팁 2016.11.09