현재 위치

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

css 참 어렵습니다..

cleol의 이미지
글쓴이: cleol / 작성시간: 월, 2005/06/20 - 8:19오후

div, p, img 와 css 만 가지고 멋있게 페이지를 만들어보려고 덤볐습니다. 이제까지 table 을 주로 사요하던터라 css 연습겸해서..

그런데 이거 참 불편하군요.

1 세로로 가운데를 맞춰줄 방법이 없나요? 그러니까 valign=MIDDLE 에 해당하는게 css 에는 없는 건가요? 일일이 margin-top 값을 줘서 세로 위치를 조절하고 있습니다.

2. div 안에 있는 div 를 가로로 가운데에 맞출 수 없나요?
바같 div 의 가운데에 안쪽 div 가 위치했으면 좋겠는데 이것도 안되는군요..

3.

.line1 {height:1; background-color:#FF0000}

<div class="line1"></div>

이런식으로 가로 라인을 만들어 사용해보려고 했습니다.
그런데 높이 1 이 안나오네요. 항상 글자 하나 높이로 사각형이 그려지는군요. 원래 높이 1 인 div 는 만들 수 없나요?

...

등등등

너무 불편합니다. 제가 잘 몰라서 그런지...

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

글쓴이: dragonkun / 작성시간: 월, 2005/06/20 - 8:47오후

저도 요즘 CSS 좀 들쳐보고 있는데요..

3번 같은 경우는..라인을 그렇게 그리는 것보다는..
border-bottom:1px solid #ff0000
나..border-top:1px solid #ff0000
같은 걸 이용하는 게 좋을 듯합니다..
(참고로 height:1px 같이 써 놓은 것들은 불여우에서는 제대로 보일겁니다.)

1번은 저도 궁금한 내용입니다..
vertical-align 이란 게 있긴 하던데..어떻게 동작하는 건지 잘 모르겠더군요;
아시는 분은 답변 부탁드립니다.

2번은 무슨 말씀인지 잘 감이 안오는군요..좀 더 자세히 설명해주셔야 할 듯합니다.

Emerging the World!

7339989b62a014c4ce6e31b3540bc7b5f06455024f22753f6235c935e8e5의 이미지

글쓴이: 7339989b62a014c... / 작성시간: 월, 2005/06/20 - 8:57오후

vertical-align 속성은 <td> 태그 또는 인라인 태그에서만 작동하는 것 같군요. :?

Quote:

'vertical-align'
Value: baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length> | inherit
Initial: baseline
Applies to: inline-level and 'table-cell' elements
futari의 이미지

글쓴이: futari / 작성시간: 월, 2005/06/20 - 10:04오후

우선.. 확실하지 않을 수 있음을 미리 밝힙니다. ^^a (발빼기 ㅋ)

1. 글자나 img, a 등등은 inline element입니다. div 같은 block element랑 다른 개념이죠.
따라서 vertical-align: middle을 쓰셔도 됩니다.

2. 이건 margin, padding 같은걸로 조절하시는게 좋을 듯 합니다.

3. 기본 font-size 때문에 그렇습니다. browser에 따라 조금 다릅니다.
line-height, font-size를 조절하시면 처리 가능합니다.

그나저나 css만 표준에 맞춰 쓰면 cross-browsing이 가능하리라는 생각은 그냥 꿈일 뿐입니다.

브라우저들이 표준을 다 지원 못합니다.

서로 다르게 하고, 익스플로러같은 경우는 표준을 쉽게 무시하죠..

div로 다 만드는것도 table만도 못한 호환성을 보여주죠.

가끔은 table쓰는게 속이 편합니다 ㅜ.ㅜ

-------------------------
The universe is run by the complex interweaving of three elements: matter, energy, and enlightened self-interest.
- G'kar, Babylon 5

댓글 달기

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

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