현재 위치

홈 ›› Forums ›› 공부 ›› 강좌

왕초보 두가지만 질문 드리고자 합니다.

kimyh의 이미지
글쓴이: kimyh / 작성시간: 화, 2008/03/18 - 6:28오후

1, 테이블을 만든후 테이블내에 여름, 가을, 겨울이라는 단어를 넣을때
여름 이라는 단어는 테이블 우상단에 넣고 가을 이라는 단어는 좌 상단, 겨울은 우하단에 넣고 싶을때 이것이 style='padding-top:10px'같은 것을 이용하여 단어마다 위치를 지정 할수 있는지요.

<TD style='padding-top:10px'> TD내에 이런식으로 넣으면 테이블내의 모든단어를 상단에서 10픽셀 만끔 띄우는것으로 단어 하나나의 위치를 콘트롤하는 방법을 알고 싶습니다.

2, 그리고 우리나라라는 단어를 세로가 아닌 가로로 나오게 할려면 어떻게 해야 하는지요.

알고 계신 선배님들의 고견 부탁 드립니다.

Forums: 
강좌
cppig1995의 이미지

글쓴이: cppig1995 / 작성시간: 화, 2008/04/01 - 8:01오후

가로와 세로를 심각하게 착각 중이신 것 같습니다.
우리나라야 각 글자 사이에 줄바꿈(line BReak)을 넣으면 되겠지요.


돼지군 작업실 rev. E: E-Prot (가명), Fourword 64bit OS, ...
Ubuntu Hardy Beta on I4 'jeongu' / 서명 변경일 2008/3/26

Real programmers /* don't */ comment their code.
If it was hard to write, it should be /* hard to */ read.

cppig1995의 이미지

글쓴이: cppig1995 / 작성시간: 화, 2008/04/01 - 8:02오후

위치조정의 경우 애초에 테이블 접근방식이 잘못된 듯 하군요.


돼지군 작업실 rev. E: E-Prot (가명), Fourword 64bit OS, ...
Ubuntu Hardy Beta on I4 'jeongu' / 서명 변경일 2008/3/26

Real programmers /* don't */ comment their code.
If it was hard to write, it should be /* hard to */ read.

dragonkun의 이미지

글쓴이: dragonkun / 작성시간: 수, 2008/06/18 - 2:07오후

1.

&lt;table&gt;
  &lt;tr&gt;&lt;td&gt;가을&lt;/td&gt;&lt;td&gt;여름&lt;/td&gt;&lt;/tr&gt;
  &lt;tr&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;겨울&lt;/td&gt;&lt;/tr&gt;
&lt;/table&gt;

2.

우&lt;br /&gt;
리&lt;br /&gt;
나&lt;br /&gt;
라

혹은 

&lt;div style="width:1em;"&gt;
우리나라
&lt;/div&gt;

ps. html 과 css 에 대해서 처음부터 차근차근 공부해보시는 게 어떠신지요?
--
Emerging the World!

Emerging the World!

amorette의 이미지

글쓴이: amorette / 작성시간: 금, 2008/06/20 - 8:38오전

하나의 테이블 cell 안에 div 가 각자 모서리에 위치합니다.
absolute 를 쓰면 고정적인 위치 (top, left) = (0, 0) 에 옮길 수 있지만,
화면 내에서 작동하므로,
상위 div 인 #box 를 relative 로 설정해주면, 그 내에서 움직이게 됩니다.
(참고: http://blog.userland.fr/post/2007/01/21/Align-bottom-in-float-based-CSS-column-layout)

&lt;style&gt; #box { position: relative; width: 100%; height: 100%; }
#box .a { position: absolute; top: 0px; left: 0px; }
#box .b { position: absolute; top: 0px; right: 0px; }
#box .c { position: absolute; right: 0px; bottom: 0px; }
&lt;/style&gt;
&lt;table width=200 height=100 border=2&gt;&lt;tr&gt;&lt;td&gt;
&nbsp;&nbsp;&lt;div id="box"&gt;
&nbsp;&nbsp;&lt;div class="a"&gt;여름&lt;/div&gt;
&nbsp;&nbsp;&lt;div class="b"&gt;가을&lt;/div&gt;
&nbsp;&nbsp;&lt;div class="c"&gt;겨울&lt;/div&gt;
&lt;/div&gt;
&lt;/tr&gt;&lt;/table&gt;

결과물:
.---------------.
|여름　　가을|
|　　　　　　|
|　　　　　　|
|　　　　겨울|
'---------------'

amorette의 이미지

글쓴이: amorette / 작성시간: 금, 2008/06/20 - 8:49오전

아시겠지만,

style 태그는 따로 외부 파일로 만들어 놓거나 헤더에 놓고,
질문하신데로 각각을 style="" 안에 몰아넣으셔도 됩니다.

그러면 style 태그는 사라지겠지만 아무래도 보기도 어렵고,
유지하기도 쉽지 않겠죠..

이번엔 2번 질문에 답입니다.

가로로 입력되는게 기본이니까 그냥

&lt;div&gt;우리나라&lt;/div&gt;

하면 될 것 같습니다.

혹시 테이블 셀의 크기가 작더라도 다음 줄로 넘어가지 않고,
테이블 선을 넘어서 강제적으로 가로로 출력하고 싶다면,

style="position: absolute;"

해주시면 됩니다.

댓글 달기

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

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