다른 블록 요소가 포함된 경우 블록 요소를 CSS와 인라인으로 변경하는 것이 잘못된 것인가요?
https://stackoverflow.com/questions/746531
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian문제
인라인 요소 안에 블록 요소를 넣는 것이 잘못되었다는 것을 알고 있지만 다음은 어떻습니까?
다음과 같은 유효한 마크업을 상상해 보세요.
<div><p>This is a paragraph</p></div>
이제 다음 CSS를 추가하세요.
div {
display:inline;
}
이로 인해 인라인 요소에 블록 요소가 포함되는 상황이 발생합니다(div는 인라인이 되고 p는 기본적으로 블록임).
페이지 요소가 여전히 유효합니까?
CSS 규칙이 적용되기 전이나 후에 HTML이 유효한지 언제 어떻게 판단합니까?
업데이트: 그 이후로 HTML5에서는 링크 태그 안에 블록 수준 요소를 넣는 것이 완벽하게 유효하다는 것을 배웠습니다. 예:
<a href="#">
<h1>Heading</h1>
<p>Paragraph.</p>
</a>
이는 큰 HTML 블록을 링크로 만들려는 경우 실제로 매우 유용합니다.
해결책
로부터 CSS 2.1 사양:
인라인 상자에 인플로우 블록 수준 상자가 포함된 경우 인라인 상자(및 동일한 줄 상자 내의 인라인 조상)는 블록 수준 상자(및 연속되거나 다음으로만 분리된 모든 블록 수준 형제) 주위에서 분리됩니다. 축소 가능한 공백 및/또는 흐름 외부 요소), 인라인 상자를 블록 수준 상자의 양쪽에 하나씩 두 개의 상자(양쪽이 비어 있더라도)로 분할합니다.구분선 이전과 구분선 이후의 줄 상자는 익명 블록 상자에 포함되며, 블록 수준 상자는 해당 익명 상자의 형제가 됩니다.이러한 인라인 상자가 상대 위치 지정의 영향을 받는 경우 결과 변환은 인라인 상자에 포함된 블록 수준 상자에도 영향을 미칩니다.
이 모델은 다음 규칙이 적용되는 경우 다음 예에 적용됩니다.
p { display: inline } span { display: block }이 HTML 문서와 함께 사용되었습니다:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <HEAD> <TITLE>Anonymous text interrupted by a block</TITLE> </HEAD> <BODY> <P> This is anonymous text before the SPAN. <SPAN>This is the content of SPAN.</SPAN> This is anonymous text after the SPAN. </P> </BODY>P 요소에는 익명 텍스트 청크(C1), 블록 수준 요소, 익명 텍스트 청크(C2)가 차례로 포함됩니다.결과 상자는 C1 주변의 익명 블록 상자, SPAN 블록 상자 및 C2 주변의 또 다른 익명 블록 상자를 포함하는 BODY를 나타내는 블록 상자입니다.
익명 상자의 속성은 둘러싸는 비익명 상자에서 상속됩니다(예: DIV에 대한 하위 섹션 제목 "익명 블록 상자" 바로 아래의 예에서).상속되지 않은 속성에는 초기 값이 있습니다.예를 들어 익명 상자의 글꼴은 DIV에서 상속되지만 여백은 0입니다.
익명 블록 상자를 생성하는 요소에 설정된 속성은 해당 요소의 상자와 콘텐츠에 계속 적용됩니다.예를 들어 위의 예에서 P 요소에 테두리가 설정된 경우 C1(줄 끝에서 열림)과 C2(줄 시작에서 열림) 주위에 테두리가 그려집니다.
일부 사용자 에이전트는 다른 방법으로 블록을 포함하는 인라인에 테두리를 구현했습니다. 예를 들어 이러한 중첩된 블록을 "익명 라인 상자" 안에 넣어서 해당 상자 주위에 인라인 테두리를 그리는 방식입니다.CSS1과 CSS2는 이 동작을 정의하지 않았으므로 CSS1 전용 및 CSS2 전용 사용자 에이전트는 이 대체 모델을 구현하고 여전히 CSS 2.1의 이 부분을 준수한다고 주장할 수 있습니다.이는 본 사양이 출시된 이후에 개발된 UA에는 적용되지 않습니다.
당신이 원하는 대로 하세요.모든 경우를 포괄하는지, 아니면 오늘날의 브라우저에서 일관되게 구현되는지는 확실하지 않지만 동작은 CSS에 분명히 지정되어 있습니다.
다른 팁
유효한 경우에 관계없이 요소 구조가 잘못되었습니다. 인라인 요소 내부에 블록 요소를 넣지 않는 이유는 브라우저가 요소를 쉽게 예측할 수있는 방식으로 렌더링 할 수 있기 때문입니다.
HTML 또는 CSS에 대한 규칙을 중단하지 않더라도 의도 한대로 렌더링 할 수없는 요소를 만듭니다. 브라우저는 HTML 코드가 유효하지 않은 것처럼 요소를 처리해야합니다.
HTML과 CSS는 여전히 유효합니다. 이상적으로는 이와 같은 작업을 수행 할 필요는 없지만 CSS의 특정 비트는 실제로는 안정적인 스타일 시트 나 해킹에 의지하지 않고 인터넷 익스플로러의 이중 마진 버그를 얻는 데 편리한 (그리고 구문 적으로 유효하지만 의미 적으로 유효하지 않은) 방법입니다. 당신의 CS. (x) HTML은 CSS보다 시맨틱 값이 더 많으므로 CSS가 의미 적으로 유효한 것이 덜 중요합니다. 제 생각에는 코드를 무효화하지 않고 성가신 브라우저 문제를 해결하기 때문에 허용됩니다.
HTML은 CSS와 독립적으로 검증되므로 페이지는 여전히 유효합니다. 나는 CSS 사양이 그것에 대해 아무 말도하지 않는다고 확신하지만, 그에 대해 나를 인용하지 마십시오. 그러나 일부 브라우저에서 의도 한대로 렌더링 할 수 있지만 모든 것을 테스트해야 할 수도 있기 때문에 이와 같은 기술을 사용하는 데 매우주의를 기울일 것입니다.
페이지 요소가 여전히 유효합니까?
HTML 의미에서 "유효", 예; HTML은 CSS에 대해 아무것도 모릅니다.
그러나 브라우저에서 얻는 렌더링은 CSS 사양에 의해 '정의되지 않은'이므로 전혀 다른 것처럼 보일 수 있습니다. 하나의 특정 브라우저 (브라우저 가이 케이스를 어떻게 렌더링하는지 알고있는 경우)를 목표로하는 CSS 해킹에 이러한 규칙을 포함시킬 수 있지만 일반적으로 브라우저에 제공되지 않아야합니다.
규칙을 검증하는 경우 내 머리 꼭대기를 모르지만 사용 권장합니다. W3C HTML 유효성 검사기 그리고 W3C CSS 유효성 검사기 그것을 결정하기 위해. 이것이 도움이되기를 바랍니다!
아니요, 잘못된 선택이 아닙니다. 요구 사항에 따라 사용할 수 있습니다.
당신이 따르는 논리가 있고 당신이 이와 같이 그것을 구현하게된다면, 그것은 잘못이 아닙니다. 일하는 일은 이상하기 때문에 "잘못된"것이 아닙니다. 예, 그것은 매우 드문 일이지만 도움이되고 실수가 아닙니다. 의도적입니다. HTML과 CSS는 다른 방법이 아니라 당신에게 봉사해야하므로 추악하기 때문에 그렇게하지 말라고 말하는 의견을 듣지 마십시오.
솔루션을 "무효"하고 블록 주위에 먼 길을 제안하는 것이 일반적입니다. 때때로 당신은 당신이 한 일을 다시 생각할 수 있습니다. 그러나 당신이 한 일에 대한 여러 가지 이유가있을 수 있으며 그들은 그것들을 고려하지 않습니다.
인라인 내부의 블록을 정기적으로 사용합니다. 유효하고 작동합니다. 대부분의 경우 필요하지 않습니다. 그래서 뭐. XHTML이 우리에게 항상 속성 주위에 인용문을 말하라고 말했을 때 (그리고 그렇지 않은 경우 모두가 당신에게 소리를 지르 셨습니다!), 이제 HTML5는 내부에 공간이 없으면 생략 할 수 있습니다. 단일 태그 후 마지막 슬래시는 어떻게 되었습니까? "u003Cbr /> "? 켜져. 표준 변경. 그러나 브라우저는 비표준을 계속 지원합니다. 센터는 더 이상 사용되지 않습니다. 우리는 2013 년에도 여전히 작동합니다. 수직 센터링을위한 테이블? 때로는 유일한 방법입니다. 계획대로 호버? 그냥 가십시오.
중요한 것들에 집중하십시오.
(x) HTML은 유효하고 CSS는 유효하다고 생각합니다. 결과가 유효합니까? 예, 원하는대로 브라우저를보고 있다면.
