마크 업 간의 차이점

Question

이 마크 업 간에는 다른 점을 혼동합니다.

<div class="pic"> 
<img src="http://www.lorempixel.com/333/333" alt=""> 
</div> 

난 내 배경을 볼 수 있지만 울부 짖는 소리와 같은 다른 마크 업 .. 내가 알아낼 수 없습니다 내가 한 때 지금

.pic { 
width: 600px; 
background: red; 
} 

CSS ..

다른 마크 업 :

<img class="pic" src="http://www.lorempixel.com/333/333" alt=""> 

같은 스타일 ..

Answer 1

첫 번째 경우 :

.pic { 
 
width: 600px; 
 
background: red; 
 
}

<div class="pic"> 
 
<img src="http://www.lorempixel.com/333/333" alt=""> 
 
</div>

여기 IMG 요소는 div 태그 안에 당신은 DIV 태그에 할당 600px의 폭을 포함 DIV 즉 .pic에 대한 몇 가지 CSS를 지정했습니다.

그리고 img 태그는 크기가있는 div 태그 안에로드됩니다. 이 이미지 크기는 600px보다 작으므로 배경색을 볼 수 있습니다. 600px보다 큰 경우 해당 div에서도 나옵니다.

두 번째 경우 :

.pic { 
 
width: 600px; 
 
background: red; 
 
}

<img class="pic" src="http://www.lorempixel.com/333/333" alt="">

다음

직접 태그를 IMG 해당 CSS를 할당. 따라서 img 태그의 너비는 600 픽셀입니다. 그래서 우리는 배경색을 볼 수 없습니다.