메뉴 건너뛰기

SONGGA

SONGGA-Material

제로보드
2015.08.03 23:41

홈페이지 div 레이아웃할때

조회 수 677 추천 수 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아펠리아 Views101613
    read more
  2. 자동차 타이어 보는법

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    Date2013.12.25 Category기타 By아펠리아 Views1900
    Read More
  19. 충북(忠北) 청원군(淸原郡)

    Date2013.12.25 Category기타 By아펠리아 Views2084
    Read More
  20. 언어선택옆에 언어별국기 출력하기

    Date2013.12.15 Category제로보드 By아펠리아 Views1587
    Read More
  21. 레이아웃설정에 언어팩추가하기

    Date2013.12.15 Category제로보드 By아펠리아 Views1681
    Read More
Board Pagination Prev 1 2 3 4 5 6 Next
/ 6
위로