야한남자

css 코딩 어떤방법이 더합리적인가요?

· 2013-11-11 (월) 01:34:11 · 1344 · 12
1. #head{width:200px; height:200px; padding:0px; margin:0px;}

2. #head{
width:200px; 
height:200px;
padding:0px; 
margin:0px;}

전2번방식으로 사용하는데 1번은 아이디와 클래스명 보기가 쉽고. 2번은 속성값을 수정하는게 더편한거같습니다.
어떤방식이 더효과적일까요?
|

댓글 12개

2013-11-11 (월) 01:55:18
[code]<style>/* font */
@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 넣어요
엄청 깔끔하네요 ㅎㅎㅎ
2013-11-11 (월) 01:59:20
ㅎㅎ 감사합니다.
http://new.jeongum.com/ CSS 가 저게 전부에요
빈틈이없네요 ㅋㅋㅋㅋ
2013-11-11 (월) 02:07:33
요즘 코딩하면.. php 로 프로그램하면서도 열다맞춘다는 ....

코드결벽증생기고잇음 ㅠㅠ;
코드가 깔끔하고 좋네요 ㅎㅎㅎㅎ 이뻐요 들여쓰기가 ㅋ
2013-11-11 (월) 02:16:06
그런가요. ㅎㅎ 감사합니다.
내규가 없으시다면 편하신되로하시고
압축해서 릴리즈 하시면 되실듯합니다
2013-11-11 (월) 09:48:37
cc
그냥 편한데로 하면되는군요 ㅋㅋㅋ
편한데로라굽쇼?
jquery버젼보면 min 화일이 따로 있잖아요
뜨워쓰기 조차 허용하지않게 만드는 이유가 무엇이겠습니까?
용량이 줄어들도록 하는 노력이 아니겠습니까?
간단한 것은 필요없지만 저 정도 길이라면 원본은 수정이 쉽게만들고 서버에 올리는 것은 압축해서 올리면 좋을테죠
저는 한줄로하느냐 여러줄로하느냐를 물어본거에요 ㅎ 그래서 편한데로 한줄로하거나 여러줄로 하거나~
그거말씀드린거에요~그냥 편한데로 해야겠네요~
댓글을 작성하시려면 로그인이 필요합니다.

자유게시판

202,886건
+
제목 글쓴이 날짜 조회
13-11-11 조회 1,464
13-11-11 조회 1,368
13-11-11 조회 1,320
13-11-11 조회 1,266
13-11-11 조회 2,641
13-11-11 조회 1,345
13-11-11 조회 1,441
13-11-10 조회 1,172
13-11-10 조회 1,230
13-11-10 조회 1,247
13-11-10 조회 1,050
13-11-10 조회 1,042
13-11-10 조회 1,320
13-11-10 조회 1,349
13-11-10 조회 1,185
13-11-10 조회 1,277
13-11-10 조회 1,269
13-11-10 조회 1,264
13-11-10 조회 1,265
13-11-10 조회 1,211