현재 위치

홈 ›› Forums ›› 공부 ›› 프로그래밍 QnA

table 없이 레이아웃을 스타일시트로..

lazycoder의 이미지
글쓴이: lazycoder / 작성시간: 금, 2007/02/09 - 11:08오후

로그인 박스가 있는데 코드가 현재 이렇습니다.
<?php


ID
PWD

?>

table 태그 없이 레이아웃을 설정하는 노하우를 알고 싶어서 질문드립니다.
혹시 stylesheet를 깊이 이해해야 하는거라면.. 바꾸는걸 포기하겠습니다. -_-;

Forums: 
프로그래밍 QnA
Necromancer의 이미지

글쓴이: Necromancer / 작성시간: 금, 2007/02/09 - 11:28오후

div 태그를 사용하고,
여기에 스타일시트 중 float, clear를 사용해서 레이아웃을 설정합니다.

http://ilmol.com/wp/2005/06/09/25/

이 글을 읽어보면 대략적인 감이 올겁니다.

Written By the Black Knight of Destruction

Written By the Black Knight of Destruction

죠커의 이미지

글쓴이: 죠커 / 작성시간: 토, 2007/02/10 - 2:57오전

div 태그가 스타일 쉬트를 이용해야 합니다만 어렵지 않습니다.
margin과 padding만 아셔도 반은 아신겁니다.

*****
*###*
*#A#*
*###*
*****

*와 #사이가 경계선 (border)라고 보신다면 경계션 밖의 공간은 margin, 안의 공간은 padding이라고 보시면 됩니다. A는 내용이 겠지요.

이 *를 상하좌우 균등하게 10px을 주고 싶다. 그러면 margin: 10px; 이면 됩니다.
상하를 5px 좌우를 10px 주고 싶다. 그러면 margin: 5px 10px; 이라고 주면 됩니다.
더 어렵게 상을 3px 하를 2px 좌를 5px 우를 3px 주고 싶다. 그러면 margin: 3px 3px 2px 5px;이라고 주면 됩니다. 포인트는 margin뒤의 속성은 무조건 상에서부터 시계방향입니다. (상 우 하 좌) 그리고 비어 있는 속성은 나머지 값으로 채웁니다. 예를 들어 상만 준다면 우하좌 모두 상 값을 따릅니다. 상 우만 준다면 하는 상을 좌는 우를 따릅니다. 상 우 하만 준다면 좌값은 우값을 다릅니다.

padding에서 수치도 동일합니다. 모든 것은 상우하좌로 시계 방향. 비어 있는 값은 대칭되는 값으로 채워진다고 보시고 마진과 패딩이 있다는 것을 감안하시면 대부분의 레이아웃은 소스를 보시면서 하나하나 이해하실 수 있을 겁니다.

- CN의 낙서장 / HanIRC:#CN

- 죠커's blog / HanIRC:#CN

lazycoder의 이미지

글쓴이: lazycoder / 작성시간: 토, 2007/02/10 - 6:43오전

두분 감사합니다. div, margin, padding, float, clear가 키워드네요. 그런데.. http://kangcom.com/common/bookinfo/bookinfo.asp?sku=200507280001
답변들을 참고하다가 위에 책을 보았는데 그냥 사서 보면 좋을것 같기도 하고.
이해는 나중 문제이고 지금은 대충 보고 배껴쓰면 되는데 책까지 사서 보려니 일이 커지는듯 하고..;;

lacovnk의 이미지

글쓴이: lacovnk / 작성시간: 토, 2007/02/10 - 1:21오후

login box라면..

fieldset, legend, dl, dt, dd를 사용하는 법도 있습니다. 저 책에 나옵니다 dokuwiki 로그인 박스를 보시면 됩니다 ㅎ

lazycoder의 이미지

글쓴이: lazycoder / 작성시간: 토, 2007/02/10 - 7:26오후

일단.. 배껴씁니다. ;;

댓글 달기

텍스트 포맷에 대한 자세한 정보

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
이것은 자동으로 스팸을 올리는 것을 막기 위해서 제공됩니다.