메인페이지 레이아웃이 식상해서 바꿔보았습니다. 정보
메인페이지 레이아웃이 식상해서 바꿔보았습니다.본문
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 !? 짜증나서;; ㅋㅋ 막 도배했어염! ?
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
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; }
수고 많으십니다. 화이팅!
#top1 { height:30px; clear:left; }
#top2 { height:80px; clear:left; }
#top3 { height:55px; clear:left; }
수고 많으십니다. 화이팅!
후후훗!! 삽질의 결과!! 더럽게 나왓네요~ 필요없는 부분 지워야겟어요! ㅋㅋ 지적감사해요!
오 깔끔하네요 ^^
접기 옵션에 style="cursor:pointer;"
하면 커서 포인터 추가 하면 더 보기 좋지 않을까요?
접기 옵션에 style="cursor:pointer;"
하면 커서 포인터 추가 하면 더 보기 좋지 않을까요?
테이블은 표를 만들때 사용하는 것이지 레이아웃 만들라고 사용하는게 아닙니다.
그럼 웹표준이 아니지요.
그리고 <...>로 끝나는 태그는 모두 <... />로 처리하셔야 하구요.
<script language="javascript">는 모두 <script type="text/javascript">로 바꿔주세요.
그럼 웹표준이 아니지요.
그리고 <...>로 끝나는 태그는 모두 <... />로 처리하셔야 하구요.
<script language="javascript">는 모두 <script type="text/javascript">로 바꿔주세요.
테이블은 레이아웃만들때 사용하면 안된다는내용이 .웹표준 관련 규정에 있는가요?....그냥 궁금해서요,........
전 테이블 쓰는데 ㅇㅅㅇ
뭐든지, 그때그때 상황에 맞게끔 잘활용하면, 삼팔광땡인듯합니다
뭐든지, 그때그때 상황에 맞게끔 잘활용하면, 삼팔광땡인듯합니다
<table></table>태그는 표를 그릴때 사용하는 것이지요.
웹표준은 각 태그를 그 태그 뜻대로 바로 사용하는데에 있습니다.
레이아웃 그리라는 용도가 아니지만,
우리나라는 table로 처리하고 있지요.
웹표준은 각 태그를 그 태그 뜻대로 바로 사용하는데에 있습니다.
레이아웃 그리라는 용도가 아니지만,
우리나라는 table로 처리하고 있지요.
테이블사용해서 레이아웃 안짯어요!
div 를 이용해서 짯습니다.!! 표는 단지 최근게시물과 로그인창 인기검색어 검색창 뿐입니다. 나머지는 모두 div 레이어로 짯습니다.! 그리고 <.... />는 XHTML 표준입니다.
div 를 이용해서 짯습니다.!! 표는 단지 최근게시물과 로그인창 인기검색어 검색창 뿐입니다. 나머지는 모두 div 레이어로 짯습니다.! 그리고 <.... />는 XHTML 표준입니다.
현재 웹표준이 xhtml 아닌가요?
아님 말구요 -,.-
아님 말구요 -,.-
두 부분을 설명해주셨는데 전자는 '웹 접근성'에 해당하고 후자는 '웹 표준'에 해당됩니다.
ie 하고 파폭하고 차이가 나네요.
ie는 위로 붇는데 파폭은 10px떨어집니다.
ie는 위로 붇는데 파폭은 10px떨어집니다.
환인결과 ie7,8 구글크롬 파폭 정상작동되네요.
ie6는 없어서 그러는데 혹 ie6이신가요?
ie6는 독타입 및에 무언가 스크립트문 추가해야된다는 소리가 있던데
그걸 추가하면 해결될걸로 생각되네요
ie6는 없어서 그러는데 혹 ie6이신가요?
ie6는 독타입 및에 무언가 스크립트문 추가해야된다는 소리가 있던데
그걸 추가하면 해결될걸로 생각되네요
네이트온 가지고 계신가요
ie6,8 전부 상단에 붇습니다
ie6,8 전부 상단에 붇습니다
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; }
감사줄때 빼고는요
아래와 같이 하면 소스를 많이 줄일수 있읍니다.
#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; }
