You cannot see this page without javascript.

메뉴 건너뛰기

SONGGA

SONGGA-Material

제로보드
2015.08.03 23:41

홈페이지 div 레이아웃할때

조회 수 988 추천 수 0 댓글 0
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부

 

 

ly_01.jpg

 

 

테이블이 쉽다고 하셨는데 단순하므로 쉬울지 몰라도 div 보다 로딩속도가 느립니다. 그리고 테이블의 원래 용도는 데이터를 표형식으로 나타내어 주는 것이지 페이지 레이아웃을 잡는 데에 쓰라고 있는 것이 아닙니다.

또한 table tr td 등 레이아웃을 표현하려면 너무 많은 코드들이 사용됩니다. 따라서 추후에 디자인을 변경할 일이 생겨도 직관적이지 않기 때문에 더욱 많은 시간과 노력이 소요될 수 있구요. div ul li 등 의 코드로 레이아웃을 만드시는 것을 추천드리는 바입니다.

 

서론이 길었네요 툴 일체 쓰지 않고 한글자한글자 타이핑하여 작성한 레이아웃입니다 전 그러한 방법이 익숙해서 그런지는 몰라도.. 질문자님도 몇번 하시다 보면 하드코딩이 더욱 효율적이라는 것을 알게 되실 것입니다.

 

코드입니다

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 

<title>Insert title here</title> 

<style> 

div {border:1px solid #000; vertical-align:top; overflow:hidden;} 

#wrapper {margin:10px auto; width:800px;} 

#top {height:50px;} 

#topflash {height:100px;} 

#mainflash {height:200px;} 

#middle{} 

.l, .r {float:left;} 

#middle #l {width:400px;} 

#middle #r {border:0;} 

#middle #l #piclink {height:30px;} 

#middle #l #phpboard {height:60px;} 

#middle #third {height:100px;} 

#middle #third div {border:0;} 

#middle #third #pic {width:200px; height:100px; border-right:1px solid #000;} 

#middle #third #java {width:194px; height:100px;} 

#middle #r {height:185px; width:394px;} 

#earea {height:100px;} 

#copyfootter {height:50px;} 

</style> 

</head> 

<body> 

<div id="wrapper"> 

<div id="top">최상단메뉴</div> 

<div id="topflash">top메뉴 플래시</div> 

<div id="mainflash">main 플래시</div> 

<div id="middle"> 

<div id="l" class="l"> 

<div id="piclink">그림링크</div> 

<div id="phpboard">php게시판 링크 호출부분</div> 

<div id="third"> 

<div class="l" id="pic">그림영역</div> 

<div class="r" id="java">자바 메뉴 호출</div> 

</div> 

</div> 

<div id="r" class="r">php 파일호출</div> 

</div> 

<div id="earea">이벤트 영역부분</div> 

<div id="copyfootter">copy 푸터영역</div> 

</div> 

</body> 

</html> 

 

 table은 일체 들어가지 않았습니다.

 

 


  1. 설치및 자료받는 방법 : 파일 전송 프로토콜 - CuteFTP Professional

    Date2008.10.19 Category공지사항 By아펠리아 Views101650
    read more
  2. 크롬 광고 차단 하는 방법

    Date2019.10.11 CategoryInternet By아펠리아 Views18
    Read More
  3. [속보] 울타리

    Date2019.10.02 Category홈페이지/HTML By아펠리아 Views6
    Read More
  4. 냉장고 적정온도는 얼마가 적당할까요?

    Date2019.08.06 Category도구/기계 By아펠리아 Views73
    Read More
  5. 자동차 타이어 보는법

    Date2018.11.29 Category자동차/운전면허 By아펠리아 Views122
    Read More
  6. 홍삼 부작용, 잘 알고 먹어야 합니다.

    Date2018.05.31 Category건강 By아펠리아 Views21
    Read More
  7. 화장품 유통기한

    Date2017.06.23 Category화장품 By아펠리아 Views46
    Read More
  8. 화장품이 골동품 되기 전에 사용해라. - Time to throw out.

    Date2017.06.09 Category화장품 By부자사랑 Views44
    Read More
  9. 애플 펜슬 지원되는 아이패드 프로 9.7을 구입했다.

    Date2017.02.24 Category도구/기계 By아펠리아 Views377
    Read More
  10. 비행기 탈 때만 ‘비행기 모드’? 천만에!

    Date2017.02.09 Category도구/기계 By아펠리아 Views658
    Read More
  11. 마이그레이션 이용방법 (데이터 백업및 복구)

    Date2016.10.27 Category제로보드 By아펠리아 Views143
    Read More
  12. 귀에 양파 한 조각을 넣어봅니다. 이내 믿을 수 없는 일이 일어납니다.

    Date2016.02.01 Category건강 By아펠리아 Views220
    Read More
  13. 이중주차, 함부로 밀지 마세요.

    Date2016.01.21 Category자동차/운전면허 By아펠리아 Views597
    Read More
  14. 인터넷 익스플로러 새창이 계속 떠요ㅠ

    Date2016.01.18 CategoryWindows By아펠리아 Views1108
    Read More
  15. css의 background-position으로 롤오버 구현

    Date2015.08.04 Category홈페이지/HTML By아펠리아 Views342
    Read More
  16. 홈페이지 div 레이아웃할때

    Date2015.08.03 Category제로보드 By아펠리아 Views988
    Read More
  17. 진주가루 ( Pearl Powder)

    Date2014.05.09 Category창업/사업 By아펠리아 Views1413
    Read More
  18. 터키석,Turkish (turquoise,터쿼이즈)

    Date2014.05.08 Category건강 ByChangjunSong Views1581
    Read More
  19. 로그인 전 과 후 다르게 표현

    Date2014.03.08 Category제로보드 By아펠리아 Views1011
    Read More
  20. nginx 에서 서브도메인 사용시 로그인유지방법

    Date2014.03.08 Category제로보드 By아펠리아 Views1205
    Read More
  21. 충북 청원군 읍·면 일제강점기 이름 바꾼다

    Date2013.12.25 Category기타 By아펠리아 Views1944
    Read More
Board Pagination Prev 1 2 3 4 5 6 Next
/ 6
위로