현재 위치

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

css 셀렉터 에러

nomail의 이미지
글쓴이: nomail / 작성시간: 화, 2010/10/12 - 12:47오후

안녕하세요.
css 잘 아시는 분 이거 좀 봐주세요.
아래 소스가 제대로 표시가 안됩니다. ㅜㅜ

div.content p h1 {font: 50px dotum;}

문법상으로 다 맞는것 같은데 위 셀렉터가 제대로 동작을 안합니다.
대신에 다음처럼 하면 코드가 제대로 먹구요.
div.content * {font: 50px dotum;}

뭐가 문제인가요??? 잘 아시는 분 답변 좀 부탁드릴게요.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
[geshifilter-html xmlns="http://www.w3.org/1999/xhtml"]&#10;&lt;head&gt;&#10;&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt;&#10;&lt;title&gt;TEST&lt;/title&gt;&#10;&lt;/head&gt;&#10;&#10;&lt;body&gt;&#10;    &lt;style type=&quot;text/css&quot;&gt;&#10;        h1 {font: 16px dotum;}&#10;        body {margin:100px auto; width:500px;}&#10;        .content {&#10;            border: 5px solid #ddd;&#10;            margin:0;&#10;            padding:0;&#10;            height: 300px;&#10;            text-align: center;&#10;        }&#10;        div.content p h1 {font: 50px dotum;}&#10;    &lt;/style&gt;&#10;&#10;    &lt;div class=&quot;content&quot;&gt;&#10;        &lt;p&gt; &lt;h1&gt; 데이터가 없습니다 &lt;/h1&gt; &lt;/p&gt;&#10;    &lt;/div&gt;&#10;&lt;/body&gt;&#10;[/geshifilter-html]

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

글쓴이: lacovnk / 작성시간: 화, 2010/10/12 - 12:58오후

validate 해보세요. 에러가 2개 뜰 텐데, 하나는 style이 head 안에 있어야 한다는 것.

두번째는 h1 이 p 안에 있을 수 없다는 것입니다.

개발자 툴로 찍어보면, 이 오류 때문에 결국 h1 이 p 밖으로 뛰쳐나오게 됩니다. :)

그 결과,     div.content>h1 {font: 50px 'dotum';} 는 잘 적용되게 되죠 :)

Firefox + firebug 또는 Chrome 개발자 툴을 잘 이용하세요.

nomail의 이미지

글쓴이: nomail / 작성시간: 화, 2010/10/12 - 1:19오후

lacovnk님 정말 감사합니다.
친절한 설명 덕분에 원인을 파악해서 잘 처리했습니다.
저도 크름Dev 버전을 쓰는데 개발자 툴은 미처 생각을 못했네요.
앞으로도 잘 활용하겠습니다. 정말 감사드립니다~~

댓글 달기

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

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