웹 프로그래밍에서.. 테이블 시작과 끝.. 찾기

xyhan의 이미지

지금 웹 프로그래밍을 공부 중입니다...

음 그런데.. 프로그램을 하다보면..
테이블 <tr><td> 구조가
너무 복잡해져서 한번 엉키면..
어디서 짝이 틀렸는지 찾기가 매우 힘듭니다..
일일이 따라가다 까먹습니다..

vi 에서 영역 연산자 짝을 찾아 주는
것처럼.. void function { }

테이블 도 짝 맞추기를 쉽게 할수 있는
방법이 있다면 가르켜 주세요...

저는 php이클립스를 사용하고 있는데..
Vi는 명령어를 너무 자주 까먹어서 귀찮아 지네요...

nohmad의 이미지

1. 가급적이면 테이블을 사용하지 않는 방향으로 하시는 것이 좋습니다.
반드시 표가 필요한 상황이 아니라, 단지 화면 레이아웃을 위한 것이라면
테이블 쓰지 않고 CSS만으로 하는 것이 좋습니다.

2. 출력문을 지루하게 반복하지 않도록 템플릿 사용을 고려해보십시요.

bear의 이미지

들여쓰기를 잘하세요..

그러면 조금은 찾기가 수월 해 질수 있습니다.^^;;

그리고 프로그램 소스도 깔끔해지거든요..^^

jw0717의 이미지

bear wrote:
들여쓰기를 잘하세요..

그러면 조금은 찾기가 수월 해 질수 있습니다.^^;;

그리고 프로그램 소스도 깔끔해지거든요..^^

저도 비슷한 생각이네요. 거기다 보기와 편하게만 하자면.. html. 코드를

다분리하는방법도 있겟네요....^^;;

웹프로그렘을 1년 반정도 했었는데 저같은경우는 사실 css나 html코딩은 어려워서..들여쓰기가 최선이더군요..

처음에는 같 테이블별로... 주석달아서 시리얼 번호를 매겼다는..-_-;;;

maddie의 이미지

1. css의 사용 : 강추입니다. 테이블을 자주 사용하더라도 그 크기가 작아지기 때문에 훨씬 편해집니다. 테이블 안에 테이블을 사용하지 않게끔 되기 때문에 거의 꼬일리가 없습니다.

2. 들여쓰기 : css만 익숙하면 들여쓰기는 크게 중요치는 않게 느낍니다만은 들여쓰기도 좋은 방법입니다. 한눈에 들어오니깐요.

3. 하일라이팅을 대단히 잘해주는 에디터를 사용하세요 : vim만큼 잘해주는 거 못봤습니다만은 윈도환경에서 울트라에디터 정도면 충분하다 느꼈습니다.

4. html을 먼저 짜고 프로그래밍을 입히세요 : 프로그래밍이 들어가면 가독성이 더 떨어지는 게 당연합니다. html을 먼저 코딩하여 모양을 다 본 후 프로그래밍을 짜는 것이 그래서 편합니다. 프로그래밍에서 나오는 모든 요소들을 펑션화하여 간단히 표시하거나, 혹은 템플릿을 이용하면 더 쉽게 하실 수 있습니다.

5. tiny html과 같은 validater이용 : 아마 validate로 구글에서 검색하면 자동으로 html페이지의 규정 준수 여부를 확인할 수 있습니다. 이것도 완전히 꼬인 코드를 보는데 도움을 줍니다.

6. html태그를 대문자로 사용합니다. : TD,TR등의 태그를 대문자로 써보세요. 가독성이 엄청 좋아집니다. (요즘엔 xhtml을 쓰고 있는데 이게 규정에 어긋난다고 하더군요. 하여간 나오는데에는 지장없습니다.)

7. 파이어버드의 플러그인 이용 : 웹디벨로퍼 플러그인이라는 게 있습니다. 아까 제가 언급한 validate서비스라든지 페이지 내의 셀 요소를 박스를 쳐서보여주는 기능 등이 있지요. 꼬인 코드가 어디서 꼬인건지 비주얼하게 보여줍니다.

제가 하는 방법은 이 정도인데...혼자 공부를 하실 터이니..해당없겠지만, 디자이너와 작업을 하는 경우라면 디자이너에게 아예 코딩을 맡기지 않던가, 무슨 수를 해서라도 드림위버나 나모의 사용을 막아야 합니다. 절대로요. html-kit나 ultraediter를 이용하게 하고 css를 가르쳐주어야 오래 편하게 일할 수 있습니다.

힘없는자의 슬픔

kirrie의 이미지

솔직히 업체에서 Html로 코딩을 하려면 table 아니고서는 레이아웃을 맞추기 힘듭니다. (물론 IE를 기준으로 작성한다고 가정해서)
요즘 디자이너의 상상력이 타의 추정을 불허하기 때문에 1픽셀 단위까지 맞춰서 코딩하려면 CSS와 DIV를 가지고서는 정말 어렵고 복잡하거든요. (물론 불가능한건 아니지만.)
시간에 쫓기고 업무량에 쫓기고 하다보면 table태그 아니면 다른건 눈에 잘 들어오질 않는다니까요..

요즘에 저도 회사를 관두고 소일거리 하면서 시간을 보내는데요, 가급적이면 table태그를 지양하고 CSS와 DIV로만 가지고 하려고 노력하는데, 왠만큼 팀웍이 정비되고 업무표준이 서있지 않으면 Co-Work 상황에선 힘들겠다는 생각이 듭니다.

참고로, 좀 구식이지만 전 table태그가 길어질 것 같으면 태그의 시작과 끝에 일일이 주석을 달아줍니다. 나중에 그 주석만 search하면 어디서부터 시작해서 어디까지 끝났는지 쉽게 볼 수 있으니까요. ^^;;

--->
데비안 & 우분투로 대동단결!

정태영의 이미지

스택 =3=33

오랫동안 꿈을 그리는 사람은 그 꿈을 닮아간다...

http://mytears.org ~(~_~)~
나 한줄기 바람처럼..

progcom의 이미지

테이블은 지양하는게 낫습니다.
픽셀 단위 컨트롤은 <div>태그를 사용하는게 훨씬 간편합니다.
컴포넌트별로 개별 div로 만들고, CSS로 position: absolute로 지정하면 간단히 해결됩니다. width, height와 함께 top|bottom, left|right로 설정할 수 있고, 심지어 개별적인 스크롤바를 가질수도 있습니다 :)
어렵다기 보다는 테이블을 너무 쓰다보니 그쪽에 익숙한것 뿐이라고 봅니다.

ez8의 이미지

css 사용을 추천드립니다.

다만, IE쪽은 몇몇의 경우 트릭을 써야 다른 브라우져와

동일하게 보이는 것 같더군요.

댓글 달기

Filtered HTML

  • 텍스트에 BBCode 태그를 사용할 수 있습니다. URL은 자동으로 링크 됩니다.
  • 사용할 수 있는 HTML 태그: <p><div><span><br><a><em><strong><del><ins><b><i><u><s><pre><code><cite><blockquote><ul><ol><li><dl><dt><dd><table><tr><td><th><thead><tbody><h1><h2><h3><h4><h5><h6><img><embed><object><param><hr>
  • 다음 태그를 이용하여 소스 코드 구문 강조를 할 수 있습니다: <code>, <blockcode>, <apache>, <applescript>, <autoconf>, <awk>, <bash>, <c>, <cpp>, <css>, <diff>, <drupal5>, <drupal6>, <gdb>, <html>, <html5>, <java>, <javascript>, <ldif>, <lua>, <make>, <mysql>, <perl>, <perl6>, <php>, <pgsql>, <proftpd>, <python>, <reg>, <spec>, <ruby>. 지원하는 태그 형식: <foo>, [foo].
  • web 주소와/이메일 주소를 클릭할 수 있는 링크로 자동으로 바꿉니다.

BBCode

  • 텍스트에 BBCode 태그를 사용할 수 있습니다. URL은 자동으로 링크 됩니다.
  • 다음 태그를 이용하여 소스 코드 구문 강조를 할 수 있습니다: <code>, <blockcode>, <apache>, <applescript>, <autoconf>, <awk>, <bash>, <c>, <cpp>, <css>, <diff>, <drupal5>, <drupal6>, <gdb>, <html>, <html5>, <java>, <javascript>, <ldif>, <lua>, <make>, <mysql>, <perl>, <perl6>, <php>, <pgsql>, <proftpd>, <python>, <reg>, <spec>, <ruby>. 지원하는 태그 형식: <foo>, [foo].
  • 사용할 수 있는 HTML 태그: <p><div><span><br><a><em><strong><del><ins><b><i><u><s><pre><code><cite><blockquote><ul><ol><li><dl><dt><dd><table><tr><td><th><thead><tbody><h1><h2><h3><h4><h5><h6><img><embed><object><param>
  • web 주소와/이메일 주소를 클릭할 수 있는 링크로 자동으로 바꿉니다.

Textile

  • 다음 태그를 이용하여 소스 코드 구문 강조를 할 수 있습니다: <code>, <blockcode>, <apache>, <applescript>, <autoconf>, <awk>, <bash>, <c>, <cpp>, <css>, <diff>, <drupal5>, <drupal6>, <gdb>, <html>, <html5>, <java>, <javascript>, <ldif>, <lua>, <make>, <mysql>, <perl>, <perl6>, <php>, <pgsql>, <proftpd>, <python>, <reg>, <spec>, <ruby>. 지원하는 태그 형식: <foo>, [foo].
  • You can use Textile markup to format text.
  • 사용할 수 있는 HTML 태그: <p><div><span><br><a><em><strong><del><ins><b><i><u><s><pre><code><cite><blockquote><ul><ol><li><dl><dt><dd><table><tr><td><th><thead><tbody><h1><h2><h3><h4><h5><h6><img><embed><object><param><hr>

Markdown

  • 다음 태그를 이용하여 소스 코드 구문 강조를 할 수 있습니다: <code>, <blockcode>, <apache>, <applescript>, <autoconf>, <awk>, <bash>, <c>, <cpp>, <css>, <diff>, <drupal5>, <drupal6>, <gdb>, <html>, <html5>, <java>, <javascript>, <ldif>, <lua>, <make>, <mysql>, <perl>, <perl6>, <php>, <pgsql>, <proftpd>, <python>, <reg>, <spec>, <ruby>. 지원하는 태그 형식: <foo>, [foo].
  • Quick Tips:
    • Two or more spaces at a line's end = Line break
    • Double returns = Paragraph
    • *Single asterisks* or _single underscores_ = Emphasis
    • **Double** or __double__ = Strong
    • This is [a link](http://the.link.example.com "The optional title text")
    For complete details on the Markdown syntax, see the Markdown documentation and Markdown Extra documentation for tables, footnotes, and more.
  • web 주소와/이메일 주소를 클릭할 수 있는 링크로 자동으로 바꿉니다.
  • 사용할 수 있는 HTML 태그: <p><div><span><br><a><em><strong><del><ins><b><i><u><s><pre><code><cite><blockquote><ul><ol><li><dl><dt><dd><table><tr><td><th><thead><tbody><h1><h2><h3><h4><h5><h6><img><embed><object><param><hr>

Plain text

  • HTML 태그를 사용할 수 없습니다.
  • web 주소와/이메일 주소를 클릭할 수 있는 링크로 자동으로 바꿉니다.
  • 줄과 단락은 자동으로 분리됩니다.
댓글 첨부 파일
이 댓글에 이미지나 파일을 업로드 합니다.
파일 크기는 8 MB보다 작아야 합니다.
허용할 파일 형식: txt pdf doc xls gif jpg jpeg mp3 png rar zip.
CAPTCHA
이것은 자동으로 스팸을 올리는 것을 막기 위해서 제공됩니다.