웹프로그래밍/HTML

HTML 이미지 스타일 우선순위

유노brain 2023. 9. 4. 09:37
반응형

HTML 이미지 조정 vs CSS

결론부터 말하면  HTML 내부 요소 안에서의 정보가 CSS 정보보다 우선한다.

 

예시

<!DOCTYPE html>
<html>
    <head>
        <style>
            img{
                width:50%;
                height:50%;
            }
        </style>
    </head>
<body>

<h1>This part is HTMl</h1>
<p><img src="eximage.jpg" alt="fish" style="width:150px; height:200px; float:left">
This image will float to the left of the text</p>

<hr>
<h1>This part is CSS</h1>
<p><img src="eximage.jpg" alt="fish" style="width:15; height:10; float:left">
compare a picture</p>
</body>
</html>

위의 코드를 보면 HTML 부분의 요소들 즉 이미지는 위의 <head>부분의 <style>영향을 받지 않는다.

하지만 CSS부분에서는 위의 <style>부분의 영향을 받는 것을 볼 수 있다.

 

즉 결론적으로 내부의 요소들이 우선이며 그 다음 CSS부분에따라 이미지의 크기,너비 설정이 달라진다.

반응형