메인페이지 레이아웃이 식상해서 바꿔보았습니다. > 자유게시판

자유게시판

메인페이지 레이아웃이 식상해서 바꿔보았습니다. 정보

메인페이지 레이아웃이 식상해서 바꿔보았습니다.

본문

http://dnstjs5033.dothome.co.kr/

Skip and Open 기능이 있는 메인 페이지입니다.

한라인 한라인을 접기 형식으로 보고싶은것만 볼수 있습니다. 다양한 정보를

작은 공간에 많이 넣을 수 있습니다.

그리고 많은 새로운 컨텐츠를 메인페이지에 노출시켜줍니다.

전체적으로 상당히 보기 편한 깔끔한 이미지를 유지합니다.

최대한 웹표준으로 갈려고 CSS 작성해봣는데;; 이렇게 작업하는건 처음이라서 그런지;;;

CSS 엄청나게 삽질하고 있네염 ;;

/* Home Main CSS */
  #wrap { width:100%; text-align:center; }
      #top
          #top1 { width:1000px; height:30px; margin:0 auto; clear:left; text-align:center; }
          #top2 { width:1000px; height:80px; margin:0 auto; clear:left; text-align:center; }
          #top3 { width:1000px; height:55px; margin:0 auto; clear:left; text-align:center; }
      #topm { width:100%; margin:0 auto; clear:left; text-align:center; }
          #topm1 { width:1000px; height:40px; margin:0 auto; text-align:center; clear:left;}
          #topm2 { width:1000px; height:160px; margin:0 auto; clear:left;}
              #topm2_1 { float:left; width:242px; padding:0 10px 0 0; margin:0 auto; }
              #topm2_2 { float:left; width:496px; padding:0 10px 0 0; margin:0 auto; }
              #topm2_3 { float:left; width:242px; padding:0 0 0 0; margin:0 auto; }
          #topm3 { width:1000px; height:40px; margin:0 auto; text-align:center; clear:left;}
          #topm4 { width:1000px; height:160px; margin:0 auto; clear:left;}
              #topm4_1 { float:left; width:242px; padding:0 10px 0 0; margin:0 auto; }
              #topm4_2 { float:left; width:243px; padding:0 10px 0 0; margin:0 auto; }
              #topm4_3 { float:left; width:243px; padding:0 10px 0 0; margin:0 auto; }
              #topm4_4 { float:left; width:242px; padding:0 0 0 0; margin:0 auto; }
      #middle { width:1000px; margin:0 auto; clear:left; }
          #middle1 { width:200px; text-align:center; float:left; padding:0 10px 0 0;}
          #middle2 { width:630px; text-align:center; float:left; padding:0 0 0 0; }
          #middle3 { width:150px; text-align:center; float:left; padding:0 0 0 10px; }
      #tail { width:1000px; margin:0 auto; clear:left; }
          #tail1 { width:1000px; text-align:center; height:100px;}

clear !? 짜증나서;; ㅋㅋ 막 도배했어염! ?
추천
0

댓글 14개

#top {width:1000px; margin:0 auto; text-align:center}
          #top1 { height:30px; clear:left; }
          #top2 { height:80px; clear:left; }
          #top3 { height:55px; clear:left; }

수고 많으십니다. 화이팅!
테이블은 표를 만들때 사용하는 것이지 레이아웃 만들라고 사용하는게 아닙니다.
그럼 웹표준이 아니지요.

그리고 <...>로 끝나는 태그는 모두 <... />로 처리하셔야 하구요.
<script language="javascript">는 모두 <script type="text/javascript">로 바꿔주세요.
테이블은 레이아웃만들때 사용하면 안된다는내용이 .웹표준 관련 규정에 있는가요?....그냥 궁금해서요,........
<table></table>태그는 표를 그릴때 사용하는 것이지요.
웹표준은 각 태그를 그 태그 뜻대로 바로 사용하는데에 있습니다.

레이아웃 그리라는 용도가 아니지만,
우리나라는 table로 처리하고 있지요.
테이블사용해서 레이아웃 안짯어요!

div 를 이용해서 짯습니다.!! 표는 단지 최근게시물과 로그인창 인기검색어 검색창 뿐입니다. 나머지는 모두 div 레이어로 짯습니다.!  그리고 <.... />는 XHTML 표준입니다.
환인결과 ie7,8 구글크롬 파폭 정상작동되네요.

ie6는 없어서 그러는데 혹 ie6이신가요?

ie6는 독타입 및에 무언가 스크립트문 추가해야된다는 소리가 있던데

그걸 추가하면 해결될걸로 생각되네요
clear 는 되도록 쓰지마세요
감사줄때 빼고는요

아래와 같이 하면 소스를 많이 줄일수 있읍니다.

#wrap { width:980px; margin:0 auto;}

  #top{ clear:both;  }

    #top1,#top2,#top3 { width:1000px;  text-align:center; }
    #top1 { height:30px;  }
    #top2 {  height:80px; }
    #top3 {  height:55px; }
전체 196,884 |RSS
자유게시판 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT