이거 좋군요^^ 정보
이거 좋군요^^
본문
제가 코딩하는게 꼭 html+php+css모두 들어가버리는데..
이걸 html+php 와 css로 분리 했더니 너무 깔끔하고 좋네요..
게다가 목록테그(ul/li)만 쓰다보니 이제 테이블 못씁니다.
홈페이지 전체적으로(게시판 빼고) 소스내에 들어간 스타일 0%.. 100% css파일로 분리..
css.css - 작성한 css
*{margin: 0px;padding: 0px}
h1, h2 ,h3, h4, h5, h6{font-size:100%}
ol, ul{list-style:none;margin:0;padding:0}
address, caption, cite, code, dfn, em, strong, th, var{font-style:normal;font-weight:normal}
table{border-collapse:collapse;border-spacing:0px}
fieldset, img{border: none}
caption, th{text-align:left}
q:before, q:after{content:''}
form * {vertical-align:middle}
.full-size{width:825px;border-right:2px solid #F0F0F0}
.head{width:100.2%;padding-top:10px}
.head .left{padding-left:20px;float:left}
.head .right{padding-right:0;text-align:right;float:right;padding-right:5px}
.head-menu{width:100%;padding-top:10px;border-bottom:5px solid #F0F0F0}
.main-swf{width:100%;padding-top:2px;border-bottom:5px solid #F0F0F0}
.main{width:100.2%}
.main .left{padding-left:0;float:left;border-right:1px solid #F0F0F0}
.main .center{padding-left:0;float:left}
.main .right{padding-right:0;text-align:right;float:right;border-left:1px solid #F0F0F0}
/* 메뉴 마우스 오버 변경시 동일하게 들어가는 css */
.rollover img{display:inline;}
.rollover img.imgover{display:none;}
a.rollover:hover {display:inline;}
.rollover:hover img{display:none;}
.rollover:hover img.imgover{display:inline;}
/* 메뉴 마우스 오버 변경시 동일하게 들어가는 css 끝 */
.sub_top_banner{width:100%;height:170px;padding:0;font-size:0}
.sub{width:100.2%;padding:0}
.sub .left-menu{float:left;padding-left:0px;text-align:center}
.sub .left-menu .blank{height:100px; width:0px}
.sub .left{float:left;padding-left:0px;border-left:1px solid #F0F0F0;text-align:center}
.sub .left .content .text-right{text-align:right;width:100%;padding-right:5px}
.sub .left .content .right{text-align:right;padding-right:10px}
.sub .left .content .blank{height:100px;width:0px}
.sub .left .content .blank2{height:20px}
.sub .left .content .bar{height:10px;background-color:#FAFAFA}
.sub .left .content .img{padding-left:20px;padding-bottom:150px}
.sub .left .content .img .left{float:left;text-align:left}
.sub .left .content .border{padding-left:5px}
.sub .left .content .border img{border:1px solid #000}
.sub .left .content .sub2-text-box{text-align:left;padding-left:15px;width:567px}
.sub .left .content .sub2-text-box-last{text-align:left;padding-left:15px;width:567px;padding-bottom:15px}
.sub .left .content .plus{padding:0;font-size:0;height:304px}
0
댓글 8개
기쁜건 자사홈페이지 엔진 변경이라 주석을 거의 사용안했다는것!
*{margin: 0px;padding: 0px}
일 경우 모든 태그에 기본으로 랜더링이 들어가서 시간을 쬐큼 잡아 먹습니다.
태그를 정해서 {margin: 0px;padding: 0px}을 한꺼번에 주시는게 좋습니다.
body,p,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,table,th,td,form,fieldset,legend,input,textarea,button,select{margin:0;padding:0}
그리고,
0일 경우 px 단위를 안써주셔도 됩니다. 안쓰는게 권장사항이구요. ~ㅅ~/
*{margin: 0px;padding: 0px}
h1, h2 ,h3, h4, h5, h6{font-size:100%}
ol, ul{list-style:none;margin:0;padding:0}
address, caption, cite, code, dfn, em, strong, th, var{font-style:normal;font-weight:normal}
table{border-collapse:collapse;border-spacing:0px}
fieldset, img{border: none}
caption, th{text-align:left}
q:before, q:after{content:''}
form * {vertical-align:middle}
이부분은 제가 작성한것이 아니라서 0겂에 px를 붙여버렸네요..
부분적으로 자동으로 px를 적어버린것도 있구요 ^^
보통 css마지막 에는;를 안붙이고 0에는 px를 안붙이고 css사이를 띄어 쓰기 안하려고 하고 있습니다... ^^ 자동으로 적어버린것이라^^
전 위에것을 기본 셋팅으로 잡아요,ㅎ
jquery 쓸때도, css 잡아주고 쓰면 속도면에서 효과 보는듯..ㅎㅎ;
보통 *를 많이 썻는데..
그런 문제가 있었네요.. 감사합니다. 다음 코딩부터 참고 하겠습니다.
실수 라지요.
*{margin: 0px;padding: 0px}
h1, h2 ,h3, h4, h5, h6{font-size:100%}
ol, ul{list-style:none;margin:0;padding:0}
address, caption, cite, code, dfn, em, strong, th, var{font-style:normal;font-weight:normal}
table{border-collapse:collapse;border-spacing:0px}
fieldset, img{border: none}
caption, th{text-align:left}
q:before, q:after{content:''}
form * {vertical-align:middle}
이건 제가 짠게 아니구요 ㅋ
제대로 작동한디능-_- 문제점이있어요 ㅎㅎ
