[HTML] HTML table, div 태그의 비교 ( 레이아웃의 변화 )

 

 

안녕안녕!

 

div를 다음에 설명을 하려고해!

 

div는 table과 좀 밀접한 부분이 많은데!

그래서 준비했어!

 

table과 div!

 

" div가 뭔지도 모르는데 설명한다고 알겠냐!? "

그래서 차근차근 설명해 줄게!

---

이건 10년도 훨씬 넘은 이야기야

"지금이 팝콘 가져오는 시간이야"

 

화면의 구성을 설계하는걸 

' 레이아웃 ' 이렇게 불러!

 

그런데 예전에는 table로 레이아웃을했어

 

"표만들라고 줬더니 레이아웃을 그려 ?"

그래 뭐 그렇다고 치자!

 

근데 이게 아주 큰 단점이 있었지.

유지보수가 정말 아주 매우 엄처~엉 번거롭고

뭔가 추가라도 되는날에는 아주 머릿속부터 소스까지

개판이 되었었어.

 

이렇게 생긴 퍼즐에

다른 퍼즐 하나가 더 들어와야 한다고 하면!

 

각 열과 행을 계산하면서 

추가시 발생되는 문제점이 알파고처럼 솨라라라락 나와야

그나마 할만하지.. 안그러면 

 

뜬볼처럼  달려야 할지 말아야 할지

머뭇거리다가 죽도 밥도 안되버리는 거야

다른 문제는 스타일에 한계가 발생되는거야!

 

나는 막 쥬쥬의 옷입히기 처럼

이렇게도 저렇게도 바꿔보고싶은데

제 아무리 바꿔도 마인크레프트인거야

 

그런데 위에서는 자꾸 고퀄로 만들어내래

멋진거하나 만드려고 레고조각 붙이고 붙이다 보니까

 

 

아니?

핵 고퀄이잖아?

근데 아주 그냥 집을 만들었어!

그러다 보니 어때?

쬐만한 레고가 집이 되었으니

"이거 감당이 안돼.. 어이가 없네...?"

어이없음을 선언하지

 

왜..? 무겁거든

랜더링이 막.. 어우 속터지거든?

 

쉽게 말해 렉이 걸리는거지

 

요즘에 인터넷창 3초만 늦게 켜진다?

렉걸린다고 랜선 뽑았다 끼웠다 인터넷 업체 전화한다구

 

 

그러면서 2004~5년 정도에 우리 나라에서는 정보진흥원이

 

"아! 님들 div로 레이아웃을 잡으쎄오! 부탁좀 합니다!"

"아! 알겠숨다 그래보겠숨다"

하면서 선배들이 으쌰으쌰 한거지

 

 

출처 : w3schools ( 블로그 하단에 링크되어 있어)

 

여긴 거의 바이블같은 곳이야

거기서 말을 하고 있지

 

" 표는! 테이블로 정의해야해!"

하면서 말로 시작하면서 노란박스에서는

 

"테이블로 레이아웃좀 하지마! 테이블로 페이지 레이아웃을 하는건 역사적으로 잘못한거야!"

노란색으로 강조를 해버렸어

---

div은 division의 약자야

말 그대로 나눈다 뭐 그런거거든

 

웹에 대한 표준을 지키자!! 라면서

table = 표 만들때 라는 인식을 심어주지

 

출처 : w3schools ( 블로그 하단에 링크되어 있어)

 

 

얘는 봐바. 아주 평화로워

`div는 css랑 절친이야 절친! 웹페이지를 레이아웃 할 수 있어!" 

이렇게 설명을 해주고 있어

 

근데 사실 div도 말도 많고 탈은 많았지..

 

"table은 반듯~ 하니 좋은데 div는 삐뚤~하냐!!"

"table이 더 편해!! 아무런 차이가 없잖아!!"

 

처음에는 이렇게 반발이 많았지

 

생각해봐 

 

태어나서 지금까지

 

2g 애니콜 자판 두들기다가

갤럭시가 나와서 터치패드 두들긴단 말이야

 

삼성 갤럭시 s와 애니콜

 

처음에는 적응 안됐어

지금은 으엄청 빠르지!

 

그래서 div 태그 써보니까

흠..? 테이블보다 유지보수도 쉽고..

심지어 가독성도 좋아졌어!

속도도 빨리지고 말이야

 

코드도 줄어드니 아주 맘에 들거든?

 

그래서 점점 적응하고 발전하게 되지

 

사실 언어들은 보면 

마치 우리가 쓰는 한글과 같아

 

계속 변하고 생기고 사라지지

 

그 과정에서도 table의 속성들이 많이 사라지고

div의 속성들이 변화가 되었고 말이야.

 

그 과정을 거치면서 div+css를 통해 더욱 더 많은 표현을 할 수 있게 되고

그와 더불어 java script나, jquery를 통해 더욱 동적인 페이지를 만들어주고

기술적으로 발전 할 수 있던거지!

 

그대신 짜증나는건.. div태그는 가로세로 정렬이 없다는거..

그래도 쓰라면 쓰지..

 

 

오늘의 얘기는 여기까지야!

부디 재미있었길 바라면서

 

이 부분에 대해서 아는 선배님이라면

추억팔이를 해도 환영이고 

태클로 까도 환영이야!

 

모두가 재미있었길 바라면서 

 

table과 div의 이야기였어! 

 

그럼 오늘도! 20000!