css 코딩 어떤방법이 더합리적인가요? > 십년전오늘

13.11.11 01:55:18

<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>

제사이트는 이렇게 CSS 넣어요

[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 넣어요

13.11.11 01:57:26

엄청 깔끔하네요 ㅎㅎㅎ

13.11.11 01:59:20

ㅎㅎ 감사합니다.
http://new.jeongum.com/ CSS 가 저게 전부에요

13.11.11 02:02:36

빈틈이없네요 ㅋㅋㅋㅋ

13.11.11 02:07:33

요즘 코딩하면.. php 로 프로그램하면서도 열다맞춘다는 ....

코드결벽증생기고잇음 ㅠㅠ;

13.11.11 02:10:58

코드가 깔끔하고 좋네요 ㅎㅎㅎㅎ 이뻐요 들여쓰기가 ㅋ

지운아빠 홈페이지 자기소개 아이디로 검색 전체게시물 회원게시물

13.11.11 02:16:06

그런가요. ㅎㅎ 감사합니다.

THIRD 자기소개 아이디로 검색 전체게시물 회원게시물

자기소개 아이디로 검색 전체게시물 회원게시물

13.11.11 02:58:38

내규가 없으시다면 편하신되로하시고
압축해서 릴리즈 하시면 되실듯합니다

13.11.11 09:48:37

13.11.11 10:35:18

그냥 편한데로 하면되는군요 ㅋㅋㅋ

균이 자기소개 아이디로 검색 전체게시물 회원게시물

자기소개 아이디로 검색 전체게시물 회원게시물

13.11.11 14:20:28

편한데로라굽쇼?
jquery버젼보면 min 화일이 따로 있잖아요
뜨워쓰기 조차 허용하지않게 만드는 이유가 무엇이겠습니까?
용량이 줄어들도록 하는 노력이 아니겠습니까?
간단한 것은 필요없지만 저 정도 길이라면 원본은 수정이 쉽게만들고 서버에 올리는 것은 압축해서 올리면 좋을테죠