어떤 분이 물었다.

"HTML.. DIV와 TABLE의 차이가 뭔가요? 저는 그동안 table로 작업을 많이 해왓는데, div로 되어 있는 곳이 많더라구요. 차이가 먼가요?"


웹개발(frontend)을 시작한지 몇년 안된 분들에게는 이게 무슨 소리인지... 아무리 생각해도 이해가 안되는 질문일 수도 있다.

하지만 필자는 웹코딩을 접한지 쫌(?) 되서 인지 이 글을 보자마자 무엇을 궁금해 하는지 알 수 있었다.(생각해보니 벌써 15년이 넘었네..)

예전에 웹을 만들때는 웹표준과 같은걸 신경쓰고 만들지 않았기 때문에 html 코딩 시 딱히 정해진 규칙이 없었다.

그렇게 때문에 table를 사용해서 레이아웃을 많이 짜곤 했다. 틀이 딱 잡혀 있기 때문에 안에 넣기만 하면 됬으니...


여튼 잡설은 치우고 다음과 같이 답변을 해 주었다.


예전에는 Table를 많이 썼습니다.
그 이유는 테이블은 형태가 정해져 있기 때문에 레이아웃을 잡기 편하거든요.
아마 질문자 님께서도 홈페이지를 만들때 틀잡기 위해 table를 썼는데 요즘 사이트를 보니 DIV로 많이 되어있어서 그걸 물어 보시는 것 같네요.
저도 예전(약 10년전?)에는 Table를 사용하여 코딩을 많이 했는데 요즘은 웹표준이라는 부분에 중요도가 높아지기 때문에 표준에 맞게 코딩을 하고 있습니다.

웹표준에 맞게 코딩했을때는 장점은 모든 브라우져에 최적화 되고 같은 형태로 보여진다는 장점이 있죠.
그래서 요즘은 기본으로 웹표준에 맞게 작업을 합니다.

Table로 했을 경우에도 큰 문제는 없지만 위에 말한 것과 같이 웹표준에 맞지 않게 되고 또한 브라우져별로 형태가 달리 보일 수도 있습니다.
그렇게 때문에 조금 번거롭지만 DIV 태그를 사용하여 형태를 잡고 CSS로 스타일을 조정하는 방법으로 진행하시는게 공부를 하시거나 직접 사이트를 구축 하시는데 더 좋습니다.

덧붙여, Table은 말그대로 게시판이나 테이블 형태의 데이터를 표현하는데 사용합니다.


1. 웹디자인, 웹퍼블리셔, 웹기획자, 웹개발자, 웹프로그래머, 웹마스터 등등 웹 관련한 직업에 대해서 어떤일을 하는지 알려주세요!
-. 웹디자인 : 말 그대로 포토샵과 같은 툴을 사용해서 전체적인 웹 디자인이나 상세 페이지 등을 만드는 일이에요. 요즘은 웹디자이너가 html, css 코딩 정도는 하는 추세이다.
-. 웹퍼블리셔 : 디자이너가 만든 디자인을 html/css/javascript(jquery)를 가지고 실제 사용자가 보는 페이지로 만드는 작업을 하는 사람이며, 어떠한 브라우져(익스플로러, 오페라, 사파리, 크롬, 파이어폭스)에서 보든 웹디자이너가 디자인한 형태로 웹이 보여지게 작업하는 역할을 한다.
-. 웹기획자 : 보통 PM이라고 하며 싸이트(웹) 하나를 만들기 위해 필요한 모든 사항을 체크하고 기획하며 스케쥴 관리까지 하는 사람이다.
-. 웹프로그래머 : 웹디자이너와 웹퍼블리셔와 다르게 사용자들이 보는 화면이 아닌 화면 뒤쪽에서 각종 처리를 할 수 있도록 작업하는 사람이다.
(예: 회원가입시 이미 가입된 회원인지 체크 해서 아닐 경우에만 회원가입 시키기) - 이는 예중에 몇 개이며 실제 사용자가 모르는 수많은 처리를 한다.
-. 웹마스터 : 위에 4가지 일을 혼자 할 수 있는 사람을 말한다.

2. 웹표준, 반응형, 크로스브라우징, 웹표준 개발이 다른건가요? 다르다면 어떻게 다른건가요?
-. 웹표준 : html를 코딩할때 정해진 규칙을 말한다. 이 표준에 맞게 작업하여야 위에 언급한 5개의 브라우져에 가장 최적화된 형태로 보여지게 된다.
-. 반응형 : 요즘(쫌 됬지만.) 트렌드이며 PC, 스마트폰, 테블릿에서 보았을 때 각 기기에 보기 편하게 자동으로 레이아웃이 최적화 되게 만드는 것이며 CSS라는 언어를 사용한다.
-. 크로스 브라우징 : 위에서 말한 5개의 브라우져 어디에서든 동일하게 보이게 작업하는 걸 말합니다.
-. 웹표준개발 : 웹표준에 맞춰 코딩(개발)하는 걸 말한다.

3. 카페24, 고도몰등 솔루션을 이해/사용하기
-. 솔루션이라고 하는 것은 이미 만들어 진 것을 사용하는 것이며, 이 때 필요한 스킬은 웹디자이너가 하는 역할 정도가 된다. 솔루션을 이해한다는건 이미 만들어 진걸 어떻게 사용하냐는 의미이며 예를 들어 메인 이미지를 만들었는데 어떻게 업로드 하는지 이런 형태를 말한다. 다시 말해 완성된 사이트를 관리자 페이지를 통해 유지보수하며 사용하는 형태이다.

4. 스스로 쇼핑몰하나를 디자인 할수 있는 정도에 코딩까지 배우고 싶은데 어디까지 배워야 할까요?
-. 쇼핑몰을 하나 디자인 하기 위해서는 약간의 기획 능력이 있어야 합니다. 어떤 기능이 필요하냐에 따라 전체 사이트의 페이지 수가 정해지고 그래야지 각 페이지 별로 디자인을 구상할 수 있기 때문이다. 기획자가 있다면 기획자의 요청에 맞게 디자인만 하면 되지만 스스로 하려면 생각 해야 할게 많다.(이 부분은 경험이 매우 중요하다.)
-. 코딩까지 하고 싶다면 HTML과 CSS정도까지 배우시면 좋겠고, 좀 더 트렌드에 맞춰 나가야겠다 생각하면 HTML5, CSS3 정도 공부해서 웹표준을 익히면 되겠고, 동적인 페이지까지 하고 싶다면 jquery(javascript)정도까지 공부하시면 좋다.

5. html,css만 알아도 사이트제작이 가능하다는데 맞나요?
-. 그렇다, 그냥 눈에 보이는 웹 사이트 제작은 디자인 능력, html, css만 가지고 제작 가능하다. 하지만 회원가입이나 사이트에서 영상 보기, 게시판, 방문자 수 계산 등 수많은 동적인 처리를 하기 위해선 다른 언어도 배워야 한다.

6. 자바스크립트, 제이쿼리까지 배우면 웹퍼블리셔쪽으로 나갈 수 있나요?
-. 웹퍼블리셔쪽으로 가고 싶으면 HTML5, CSS3, Jquery(javascript)를 공부하고, 웹표준과 반응형 웹까지 공부 해야 한다.(경험이 중요하다)

7. 반응형을 배우려면 처음부터 다시 배워야하는건가요? html, css, 자바스크립트, 제이쿼리 이렇게 4가지만 할수있으면 만들수있나요?
-. 처음 부터 다시 배우지 않아도 CSS를 공부하여 익숙해 졌을때 반응형을 공부하면 된다. 단순 반응형 만은 사실상 html, css 공부만으로도 가능하다.


+ Recent posts