메뉴 건너뛰기

SONGGA

SONGGA-Material

제로보드
2015.08.03 23:41

홈페이지 div 레이아웃할때

조회 수 730 추천 수 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아펠리아 Views101630
    read more
  2. 냉장고 적정온도는 얼마가 적당할까요?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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