왜 P 다음에 H1을 쓰면 안되는걸까?
예전 네이버 지식in 에서 답변글로 남기는 도중 시간이 오래걸려 다른분 답변이 먼저 채택되는 바람에 답변으로 남겨놓지는 않았지만,
글쓴 시간이 아까워서 보관용으로 저장하는 글입니다.
css 적용이 안되네요 미치겠네요 ;;제발 도와주세요
http://kin.naver.com/qna/detail.nhn?d1id=1&dirId=105&docId=170720916
style.css의 내용입니다
<!--
P{color:black ; font-size:10pt;}
P.one{color:white ; font-size:5pt; font-family:궁서;}
P.two{color:red ; font-size:15pt;}
P.three{color:black ; font-size:9pt;}
#A001 {color:black ; font-family:궁서 ; font-size:16pt;}
#A002 {color:black ; font-family:굴림 ; font-size:15pt;}
#A003 {color:blue ; font-faminly:굴림 ; font-size:12pt;}
-->
여기에 틀린점없나여?
이걸 1.html에 적용하려고합니다
<head>
<title>Movie 웜바디스 리뷰</title>
<LINK rel="stylesheet" type="text/css" href="style.css">
</head>
<body bgcolor="#cccccc" text="#6666ff" link=navy>
<bloackquote>
<p class="one" align="left">
<h1> 전미 박스오피스 1위를 휩쓴 로맨틱 좀비 열풍!<웜바디스>
</h1><br />
이렇게 적용을해봤는데 class가 안먹히네요 ;; 뭐가 잘못된건가요 ㅠ.ㅠ좀도와주세요
왜 p태그 다음에 h1을 쓰면 안되는걸까?
안녕하세요 Yanus Entertainment 한월입니다.
"P element" 에 대한 질문을 해주셨네요 ^^
이게 별거 아닌 내용인듯 하면서도 사실상 굉장히 중요한 내용입니다. ^^
/* 가장 중요한 정의 */
"P element(태그)는 block-level 요소를 포함할 수 없습니다"
-참조링크-
http://www.w3.org/TR/html401/struct/text.html#h-9.3.1
P Element 는 block-level 요소이지만 일반적인 block-level요소(DIV와 같은) 와는 다르게 다른 block-level요소를
포함할수 없는것이 특징입니다.
예시를 한번 들어보도록 하죠
예시 - http://www.yanus.co.kr/test/p_h1.yns
예시의 내용을 보시면 알겠지만 현재 css에 지정/부여한 클래스의 값은 .one, .two, .two h1이렇게 3가지가 있습니다.
적용된 내용을 살며보면...
"단락이 끊어집니다" 의 텍스트는 .two의 영향을 받고 있으나 "제목을 적습니다" 는 .two나 .two h1의 영향을 안받습니다.
그런데 .one의 영향은 받고 있습니다. (궁서체적용)
이것의 이유는 Source에 설명된 대로 "node" 라는 녀석이 만들어지는 "DOM" 의 특성때문입니다.
"DOM" 이란건 Document Object Model 의 줄임말인데.. 상세하게 설명을 하면 조금 복잡할테니 간단히 설명을 드리면..
브라우져가 소스를 해석해서 화면에 보여줄때 브라우져 내부에서 저장되어 있는 규칙을 따라 만들어집니다.
단순한 예를 들면 브라우져는 <br>태그를 '음.. <br>이군.. 그러면 <br>다음에 오는 어떤 내용은 한줄 밑으로 내려서 출력을 해야되지!' 라고 정해진 규칙에 따라 해석을 해서 보여주게 되는겁니다.
그러면 저 브라우져가 해석하는 규칙을 누가 정하는걸까요?
바로 위에 참조링크에 있는 "W3C (http://www.w3.org/)" 에서 규칙을 만들어내는겁니다.
저기서 어떠한 규칙을 정하면 그 규칙을 잘 수행할수 있도록 각 회사(마이크로소프트, 애플, 구글 등)가 규정에 맞게
브라우져를 만들어내는겁니다.
참조링크에 있는 내용도 바로 그런 규칙중에 하나이며 그걸 모든 회사의 브라우져에 반영을 해서 개발을 하게 되는겁니다.
만약 어떤 회사가 저걸 안지키고 <br>태그가 마음대로 2줄, 3줄 떨어져서 나오게 브라우져를 만든다면 곤란하지요 ^^
(일전에 마이크로소프트의 IE6,7,8 이 저런 표준규약을 안지켜서 굉장히 많은 문제가 되었습니다.)
다시 P element(태그)로 돌아와서...
그러한 규칙들 중 P에 대한 약속이 '<p></p> 사이에는 block-level요소를 넣지 말자' 라고 되어있는 겁니다.
그런데... 소스를 사람이 작성을 하는거다보니 가끔 실수를 하는 경우도 있겠지요?
그런걸 대비해서 하나의 규칙이 더 들어갑니다.
'만약 <p>다음에 block-level요소가 들어오면 이게 규칙를 모르는 사람이 만들었을수도 있으니 해석할때 자동으로 </p>를 넣은것처럼 해석을 해서 보여주세요' 라고 정하게 된겁니다.
그렇게 자동으로 넣은것처럼 되는것이 바로 node입니다.
(물론 완벽한 정의는 아닙니다만 아직 DOM에 대한 정확한 이해가 없으실거 같아 이해가 쉽게 설명을 드리는겁니다.)
소스보기를 하면 물론 </p>가 직접 생성된것은 아닙니다. 다만 눈에 보이지않게 내부에서 처리가 된것이지요^^
그래서 브라우져가 자체적으로 해석을 내린 결론이 바로 예시의 "Browser Recognized Source" 부분입니다.
작성한 소스대로 해석이 된게 아니고 "Browser Recognized Source" 처럼 브라우져가 나름대로 해석을 한거에요.
이제 왜 <h1>태그부분에 css가 안먹는지 이해가 되시나요?
P태그의 범위바깥으로 튕겨져 나와버렸기 때문에 .one의 속성은 적용을 받지만 .two나 .two h1의 속성은 적용을 안받게 되는거죠 ^^
예제의 "실행해보기" 에서 css 부분의 h1 {} 에 속성을 지정해보시면 정확히 적용이 되는것을 알수가 있습니다.
더불어서 css에서 .one h1을 만든다음 속성지정을 해도 역시나 잘 적용이 되게 됩니다.
현재의 h1은 독립적으로 인식이 되거나 div중 하나인 .one의 하부요소로만 인식이 되기 때문이죠 ^^
원래의 규칙에 맞는 정상적인 소스를 작성을 하게 되면
<h1>제목</h1>
<h2>부제목</h2>
<p>
내용
</p>
또는
<h1>제목</h1>
<p>
<span>부제목</span>
내용
</p>
이러한 형태가 규칙에 맞게 작성이 되는겁니다. ^^
어떻게 보면 그냥 안되나 보다 하고 무시하고 넘어갈수 있는 문제인데 이런 세세한 부분을 조금 아시게 되면 추후 공부하시는데 많은 도움이 되실겁니다 ^^
혹시라도 더 궁금하신 사항이 있으시면 의견달기란에 글을 남겨주세요 ^^
그럼 원하시는 답변이 되었길 빌면서...
Yanus Entertainment 마스터 - 한월 -
예전 네이버 지식in 에서 답변글로 남기는 도중 시간이 오래걸려 다른분 답변이 먼저 채택되는 바람에 답변으로 남겨놓지는 않았지만,
글쓴 시간이 아까워서 보관용으로 저장하는 글입니다.
css 적용이 안되네요 미치겠네요 ;;제발 도와주세요 |
http://kin.naver.com/qna/detail.nhn?d1id=1&dirId=105&docId=170720916 |
style.css의 내용입니다
<!--
P{color:black ; font-size:10pt;}
P.one{color:white ; font-size:5pt; font-family:궁서;}
P.two{color:red ; font-size:15pt;}
P.three{color:black ; font-size:9pt;}
#A001 {color:black ; font-family:궁서 ; font-size:16pt;}
#A002 {color:black ; font-family:굴림 ; font-size:15pt;}
#A003 {color:blue ; font-faminly:굴림 ; font-size:12pt;}
-->
여기에 틀린점없나여?
이걸 1.html에 적용하려고합니다
<head>
<title>Movie 웜바디스 리뷰</title>
<LINK rel="stylesheet" type="text/css" href="style.css">
</head>
<body bgcolor="#cccccc" text="#6666ff" link=navy>
<bloackquote>
<p class="one" align="left">
<h1> 전미 박스오피스 1위를 휩쓴 로맨틱 좀비 열풍!<웜바디스>
</h1><br />
이렇게 적용을해봤는데 class가 안먹히네요 ;; 뭐가 잘못된건가요 ㅠ.ㅠ좀도와주세요
왜 p태그 다음에 h1을 쓰면 안되는걸까? |
안녕하세요 Yanus Entertainment 한월입니다.
"P element" 에 대한 질문을 해주셨네요 ^^
이게 별거 아닌 내용인듯 하면서도 사실상 굉장히 중요한 내용입니다. ^^
/* 가장 중요한 정의 */
"P element(태그)는 block-level 요소를 포함할 수 없습니다"
-참조링크-
http://www.w3.org/TR/html401/struct/text.html#h-9.3.1
P Element 는 block-level 요소이지만 일반적인 block-level요소(DIV와 같은) 와는 다르게 다른 block-level요소를
포함할수 없는것이 특징입니다.
예시를 한번 들어보도록 하죠
예시 - http://www.yanus.co.kr/test/p_h1.yns
예시의 내용을 보시면 알겠지만 현재 css에 지정/부여한 클래스의 값은 .one, .two, .two h1이렇게 3가지가 있습니다.
적용된 내용을 살며보면...
"단락이 끊어집니다" 의 텍스트는 .two의 영향을 받고 있으나 "제목을 적습니다" 는 .two나 .two h1의 영향을 안받습니다.
그런데 .one의 영향은 받고 있습니다. (궁서체적용)
이것의 이유는 Source에 설명된 대로 "node" 라는 녀석이 만들어지는 "DOM" 의 특성때문입니다.
"DOM" 이란건 Document Object Model 의 줄임말인데.. 상세하게 설명을 하면 조금 복잡할테니 간단히 설명을 드리면..
브라우져가 소스를 해석해서 화면에 보여줄때 브라우져 내부에서 저장되어 있는 규칙을 따라 만들어집니다.
단순한 예를 들면 브라우져는 <br>태그를 '음.. <br>이군.. 그러면 <br>다음에 오는 어떤 내용은 한줄 밑으로 내려서 출력을 해야되지!' 라고 정해진 규칙에 따라 해석을 해서 보여주게 되는겁니다.
그러면 저 브라우져가 해석하는 규칙을 누가 정하는걸까요?
바로 위에 참조링크에 있는 "W3C (http://www.w3.org/)" 에서 규칙을 만들어내는겁니다.
저기서 어떠한 규칙을 정하면 그 규칙을 잘 수행할수 있도록 각 회사(마이크로소프트, 애플, 구글 등)가 규정에 맞게
브라우져를 만들어내는겁니다.
참조링크에 있는 내용도 바로 그런 규칙중에 하나이며 그걸 모든 회사의 브라우져에 반영을 해서 개발을 하게 되는겁니다.
만약 어떤 회사가 저걸 안지키고 <br>태그가 마음대로 2줄, 3줄 떨어져서 나오게 브라우져를 만든다면 곤란하지요 ^^
(일전에 마이크로소프트의 IE6,7,8 이 저런 표준규약을 안지켜서 굉장히 많은 문제가 되었습니다.)
다시 P element(태그)로 돌아와서...
그러한 규칙들 중 P에 대한 약속이 '<p></p> 사이에는 block-level요소를 넣지 말자' 라고 되어있는 겁니다.
그런데... 소스를 사람이 작성을 하는거다보니 가끔 실수를 하는 경우도 있겠지요?
그런걸 대비해서 하나의 규칙이 더 들어갑니다.
'만약 <p>다음에 block-level요소가 들어오면 이게 규칙를 모르는 사람이 만들었을수도 있으니 해석할때 자동으로 </p>를 넣은것처럼 해석을 해서 보여주세요' 라고 정하게 된겁니다.
그렇게 자동으로 넣은것처럼 되는것이 바로 node입니다.
(물론 완벽한 정의는 아닙니다만 아직 DOM에 대한 정확한 이해가 없으실거 같아 이해가 쉽게 설명을 드리는겁니다.)
소스보기를 하면 물론 </p>가 직접 생성된것은 아닙니다. 다만 눈에 보이지않게 내부에서 처리가 된것이지요^^
그래서 브라우져가 자체적으로 해석을 내린 결론이 바로 예시의 "Browser Recognized Source" 부분입니다.
작성한 소스대로 해석이 된게 아니고 "Browser Recognized Source" 처럼 브라우져가 나름대로 해석을 한거에요.
이제 왜 <h1>태그부분에 css가 안먹는지 이해가 되시나요?
P태그의 범위바깥으로 튕겨져 나와버렸기 때문에 .one의 속성은 적용을 받지만 .two나 .two h1의 속성은 적용을 안받게 되는거죠 ^^
예제의 "실행해보기" 에서 css 부분의 h1 {} 에 속성을 지정해보시면 정확히 적용이 되는것을 알수가 있습니다.
더불어서 css에서 .one h1을 만든다음 속성지정을 해도 역시나 잘 적용이 되게 됩니다.
현재의 h1은 독립적으로 인식이 되거나 div중 하나인 .one의 하부요소로만 인식이 되기 때문이죠 ^^
원래의 규칙에 맞는 정상적인 소스를 작성을 하게 되면
<h1>제목</h1>
<h2>부제목</h2>
<p>
내용
</p>
또는
<h1>제목</h1>
<p>
<span>부제목</span>
내용
</p>
이러한 형태가 규칙에 맞게 작성이 되는겁니다. ^^
어떻게 보면 그냥 안되나 보다 하고 무시하고 넘어갈수 있는 문제인데 이런 세세한 부분을 조금 아시게 되면 추후 공부하시는데 많은 도움이 되실겁니다 ^^
혹시라도 더 궁금하신 사항이 있으시면 의견달기란에 글을 남겨주세요 ^^
그럼 원하시는 답변이 되었길 빌면서...
Yanus Entertainment 마스터 - 한월 -