안녕안녕!

 

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!

 

 

 

  1. Favicon of https://eehtl.tistory.com BlogIcon 말 그리고 말 2020.02.14 22:31 신고

    table과 div 비교가 확 와닿아요ㅎㅎ

    • Favicon of https://kecoz.tistory.com BlogIcon kecoz 2020.02.14 22:37 신고

      또샤님께 큰 도움이 되었다면
      제겐 큰 다행과 감사뿐입니다 : )
      오늘도 감사하고 즐거운 밤 보내세요 !

  2. Favicon of https://comprejin.tistory.com BlogIcon 진독해 2020.02.14 22:51 신고

    어렵지만 뭔가 알 것도 같은, 처음 수학을 접한 기분이 듭니다.

    • Favicon of https://kecoz.tistory.com BlogIcon kecoz 2020.02.14 22:53 신고

      앗 그런가요 ㅋㅋㅋ
      제가 아직 기똥차게 설명하기엔
      턱없이 부족한가봐요 ㅠㅠ
      항상 감사합니다 : )

    • Favicon of https://comprejin.tistory.com BlogIcon 진독해 2020.02.15 00:14 신고

      아니에요 이쪽 분야의 지식이 부족해서 그런겁니다ㅜ

    • Favicon of https://kecoz.tistory.com BlogIcon kecoz 2020.02.15 00:17 신고

      제가 보기엔 수학님은 똑똑하셔서 금방 배우실것 같아요!! : )

  3. Favicon of https://haa-yee.tistory.com BlogIcon 혜니웨이 2020.02.14 23:15 신고

    말투가 친근해서 과외해주시는 느낌이에요 >< 예체능문과 출신은 정독중이랍니다 쓰앵님!

    • Favicon of https://kecoz.tistory.com BlogIcon kecoz 2020.02.14 23:30 신고

      앗 감사합니다 혜니님!! : ) 저도 사실 혜니님꺼 자주보는거 아시져 ? ㅋㅋ
      더 노력해서 더 좋은 자료 많이 올릴게요 ! 화이팅!

  4. Favicon of https://oyg0420.tistory.com BlogIcon oyg0420 2020.02.15 00:09 신고

    혹시 styled-component 도 사용하시나요? 굉장히 좋습니다 ㅎ

    • Favicon of https://kecoz.tistory.com BlogIcon kecoz 2020.02.15 00:12 신고

      좋은꿀팁 감사합니다! 제가 안그래도 리액트를 이번에 슬슬 보고 있거든요! 한번 꼭 써보고 컨텐츠로도 활용해볼게요 히힣 : )

    • Favicon of https://oyg0420.tistory.com BlogIcon oyg0420 2020.02.15 00:44 신고

      네네ㅋㅋ 리액트와 타입스크립트 같이 사용한다면 개발할때 너무 좋아요! 지금은 자바스크립트 글만 쓰다보니 리액트와 타입스크립트에 대한 글을 못쓰고 있네요 ㅜ ㅎㅎ

    • Favicon of https://kecoz.tistory.com BlogIcon kecoz 2020.02.15 00:45 신고

      크 핫한 언어는 다 하고 계시는군요!!

  5. Favicon of https://oyg0420.tistory.com BlogIcon oyg0420 2020.02.15 00:52 신고

    네네 회사 다 도입해서ㅋㅋ사용하고 있어요 그래도 배울게 산떠미네요 😂

    • Favicon of https://kecoz.tistory.com BlogIcon kecoz 2020.02.15 01:24 신고

      부럽습니다 ㅜ ㅜ 크으...배움의기회잖아요!ㅎㅎ

    • Favicon of https://kecoz.tistory.com BlogIcon kecoz 2020.02.15 01:24 신고

      부럽습니다 ㅜ ㅜ 크으...배움의기회잖아요!ㅎㅎ

  6. Favicon of https://freesia1092.tistory.com BlogIcon 예쁜엄마♡ 2020.02.15 11:28 신고

    멋짐폭발😀👍

    • Favicon of https://kecoz.tistory.com BlogIcon kecoz 2020.02.15 11:57 신고

      아이 별말씀을요오오 ㅎㅎ 항상 감사합니다 엄마님 😁👍

  7. Favicon of https://rassori.tistory.com BlogIcon 라소리Rassori 2020.02.15 14:37 신고

    div가 깔끔하긴 해~ kecoz는 이런거 많이 알아서 넘 좋겠다 부러워ㅠ
    잘 보고 갑니다ㅋㅋㅋ

    • Favicon of https://kecoz.tistory.com BlogIcon kecoz 2020.02.15 14:40 신고

      ㅋㅋㅋ아니 근데 내가 라소리보다 못하는게 많지 뭐야!그래서 "흠.. 내가 범접하긴 무리야" 하고 넘어갔지이! 감사합니다아 ㅋㅋㅋ😁

  8. 알 수 없는 사용자 2020.04.07 01:39

    div좀 그만 쓰라고 하던 유투버님이 생각나요 ㅋㅋㅋㅋㅋㅋㅋㅋ
    쉽다가도 어렵네요 ㅎㅎㅎ

    • Favicon of https://kecoz.tistory.com BlogIcon kecoz 2020.04.07 03:17 신고

      저도 아직말해요 ㅋㅋ
      "뭐가 이리많어 아이고 참"이러지요 ㅋㅋㅋㅋ