css 코딩 어떤방법이 더합리적인가요?
1. #head{width:200px; height:200px; padding:0px; margin:0px;}
2. #head{
width:200px;
height:200px;
padding:0px;
margin:0px;}
전2번방식으로 사용하는데 1번은 아이디와 클래스명 보기가 쉽고. 2번은 속성값을 수정하는게 더편한거같습니다.
어떤방식이 더효과적일까요?
|
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기
댓글 12개
@import url('http://fonts.googleapis.com/earlyaccess/nanumgothic.css');
/* Default CSS */
html {
overflow-y: scroll;
}
/* Gnuboard5 기본 CSS */
table, tr, td, div, a, p, section, header, nav, article, aside, footer, span {
font-family: 'Nanum Gothic', sans-serif;
}
html, h1, h2, h3, h4, h5, h6, form, fieldset, img {
margin: 0;
padding: 0;
border: 0;
}
h1, h2, h3, h4, h5, h6 {
font-size: 9pt;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
font-size: 9pt;
}
header ul, nav ul, footer ul {
margin: 0;
padding: 0;
list-style: none;
font-size: 9pt;
}
label, input, select, img {
vertical-align: middle;
font-size: 9pt;
}
textarea, select {
font-size: 9pt;
}
input {
margin: 0;
padding: 0;
border-radius: 0;
font-family: 'Nanum Gothic', sans-serif;
font-size: 9pt;
}
input[type=text], input[type=password], input[type=submit], input[type=image] {
font-size: 9pt;
}
button {
border-radius: 0;
font-size: 1em;
font-size: 9pt;
}
table, tr, td, div {
font-size: 9pt;
}
p {
margin: 0;
padding: 10px 0;
line-height: 1.7em;
word-break: break-all;
font-size: 9pt;
}
hr {
display: none;
font-size: 9pt;
}
pre {
overflow-x: scroll;
font-size: 9pt;
}
a:link, a:visited {
color: #000;
text-decoration: none;
font-size: 9pt;
}
a:hover, a:focus, a:active {
color: #000;
text-decoration: none;
font-size: 9pt;
}
.hide {
display: none;
}
/* 초기상태 숨김설정 */
div:after { /* div 높이조절 버그 해결 */
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/* Layout CSS */
body {
text-align: center;
margin: 0;
padding: 0;
border: 0;
}
#wrap {
position: relative;
width: 1000px;
margin: 0 auto;
text-align: left;
}
#header {
position: relative;
z-index: 2;
width: 100%;
min-height: 100px;
}
#gnb {
position: relative;
width: 100%;
height: 75px;
margin-top: 5px;
}
#gnb_background {
position: absolute;
width: 100%;
height: 40px;
left: 0px;
top: 105px;
z-index: -100;
background: #555555;
background: url("../img/ft_wood.jpg");
}
#container {
position: relative;
width: 100%;
margin-top: 5px;
}
#container:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
#container_lnb {
width: 150px;
min-height: 500px;
float: left;
}
#container_lnb div {
margin-bottom: 5px; /* lnb skin 추가시 자동간격 */
}
#container_lnb div div {
margin-bottom: 0px; /* lnb skin 추가시 자동간격이 모든 div에 가해지는 것을 방지 */
}
#container_article {
width: 620px;
min-height: 500px;
margin-left: 5px;
margin-right: 5px;
float: left;
}
#container_article div {
margin-bottom: 5px; /* article skin 추가시 자동간격 */
}
#container_article div div {
margin-bottom: 0px; /* article skin 추가시 자동간격이 모든 div에 가해지는 것을 방지 */
}
#container_aside {
position: relative;
width: 220px;
min-height: 500px;
float: left;
background: #efefef;
}
#footer {
position: relative;
width: 100%;
min-height: 40px;
border-top: 5px solid #555555;
text-align: center;
}
#ad_right {
position: absolute;
top: 185px;
right: -150px;
width: 145px;
z-index: 0;
min-height: 350px;
background: #efefef;
}
@media (max-width: 1280px) {
#ad_right {
display: none;
}
}
/* GNB CSS */
#gnb_headnav {
width: 100%;
height: 40px;
background: #555555;
background: url("../img/ft_wood.jpg");
line-height: 3.4em;
color: #bbbbbb;
}
#gnb_headnav a {
color: white;
font-weight: 900;
text-shadow: 0px 0px 5px black;
}
#gnb_headnav a:hover {
color: #ffa5eb;
font-weight: 900;
}
#gnb_subnav {
margin: 0;
height: 33px;
border: 1px solid #dddddd;
background: #fafafa;
overflow-y: hidden;
}
#gnb_subnav .gnb_sub {
line-height: 33px;
color: black;
}
#gnb_subnav .gnb_sub a {
color: black;
}
#gnb_subnav .gnb_sub a:hover {
color: #ff3f3f;
}
/* HEADER LOGO */
#hd_logo {
position: absolute;
bottom: 20px;
left: 0px;
}
/* HEADER W3C */
#hd_w3c {
position: absolute;
top: 20px;
left: 0px;
}
/* HEADER DECORATION LEEFT */
#hd_decoration_left {
position: absolute;
bottom: -178px;
right: -170px;
width: 197px;
height: 230px;
background: url("../img/ft_wood2.png");
}
@media (max-width: 1280px) {
#hd_decoration_left {
display: none;
}
}
/* LNB_LATEST */
.lnb_latest {
margin: 0;
}
.lnb_latest .lnb_header {
margin: 0px;
height: 20px;
padding-left: 5px;
padding-top: 5px;
background: #dddddd;
color: black;
}
.lnb_latest .lnb_header a:hover {
color: #316abf;
}
.lnb_latest .lnb_article {
margin: 0px;
height: 110px;
background: #fafafa;
border: 1px solid #dddddd;
border-top: 0px;
line-height: 20px;
}
.lnb_latest .lnb_article ol {
line-height: 20px;
margin: 0px;
padding-top: 6px;
padding-left: 8px;
border: 0px;
list-style-position: inside;
}
/* Roll ISSUE CSS */
#roll_issue {
background: #555555;
margin: 0px;
height: 300px;
}
.roll_issue_left {
float: left;
width: 64%;
height: 300px;
overflow-y: hidden;
position: relative;
}
.roll_issue_left .roll_tc {
position: absolute;
width: 100%;
top: 0px;
height: 1800px;
}
.roll_issue_left .roll_tc .roll_issue_left_img {
width: 100%;
height: 300px;
overflow-y: hidden;
position: relative;
}
.roll_issue_left .roll_tc .roll_issue_left_img img {
top: 0px;
position: relative;
}
.roll_issue_left .roll_tc .roll_issue_left_img .roll_issue_left_img_category {
position: absolute;
left: 0px;
top: 0px;
width: 10px;
height: 10px;
color: white;
z-index: 1;
}
.roll_issue_left .roll_tc .roll_issue_left_img .roll_issue_left_img_bottom {
cursor: pointer;
position: absolute;
bottom: 0px;
left: 0px;
padding-top: 10px;
padding-bottom: 10px;
width: 100%;
color: black;
z-index: 1;
background: black;
}
.roll_issue_left .roll_tc .roll_issue_left_img .roll_issue_left_img_bottom .roll_issue_left_img_bottom_title {
font-size: 12pt;
font-weight: 600;
color: white;
max-width: 100%;
}
.roll_issue_left .roll_tc .roll_issue_left_img .roll_issue_left_img_bottom .roll_issue_left_img_bottom_contents {
font-size: 10pt;
font-weight: 600;
color: white;
max-width: 100%;
}
.roll_issue_right {
float: left;
width: 36%;
height: 300px;
}
.roll_issue_right .roll_issue_right_nav {
width: 100%;
height: 36px;
padding-top: 7px;
padding-bottom: 5px;
border-top: 1px solid #222222;
border-bottom: 1px solid #888888;
cursor: pointer;
text-align: right;
}
.roll_issue_right .roll_issue_right_nav .roll_issue_right_nav_title {
font-size: 10pt;
font-weight: 600;
color: #eeeeee;
}
.roll_issue_right .roll_issue_right_nav .roll_issue_right_nav_contents {
font-size: 9pt;
font-weight: 600;
color: #cccccc;
}
/* 3Line Latest CSS */
.line3_latest {
width: 100%;
}
.line3_latest .line3_latest_left {
width: 201px;
height: 102px;
position: relative;
background: #fafafa;
margin-right: 5px;
border: 1px solid #dddddd;
border-top: 25px solid #dddddd;
float: left;
}
.line3_latest .line3_latest_center {
width: 202px;
height: 102px;
position: relative;
background: #fafafa;
border: 1px solid #dddddd;
border-top: 25px solid #dddddd;
float: left;
}
.line3_latest .line3_latest_right {
width: 201px;
height: 102px;
position: relative;
background: #fafafa;
margin-left: 5px;
border: 1px solid #dddddd;
border-top: 25px solid #dddddd;
float: left;
}
.line3_latest div .line3_latest_title {
position: absolute;
left: 5px;
top: -20px;
}
.line3_latest div .line3_latest_title a {
color: black;
}
.line3_latest div .line3_latest_title a:hover {
color: #316abf;
}
.line3_latest div .line3_latest_list ol {
line-height: 18px;
margin: 0px;
padding-top: 6px;
padding-left: 8px;
border: 0px;
list-style-position: inside;
}
</style>[/code]
제사이트는 이렇게 CSS 넣어요
http://new.jeongum.com/ CSS 가 저게 전부에요
코드결벽증생기고잇음 ㅠㅠ;
압축해서 릴리즈 하시면 되실듯합니다
jquery버젼보면 min 화일이 따로 있잖아요
뜨워쓰기 조차 허용하지않게 만드는 이유가 무엇이겠습니까?
용량이 줄어들도록 하는 노력이 아니겠습니까?
간단한 것은 필요없지만 저 정도 길이라면 원본은 수정이 쉽게만들고 서버에 올리는 것은 압축해서 올리면 좋을테죠
그거말씀드린거에요~그냥 편한데로 해야겠네요~