CSS의 Width/Height VS HTML attributes의 Width/Height
January 25, 2020
HTML의 여러 엘리먼트를 스타일링 하기 위해 다양한 방법이 존재한다. 엘리먼트 자체가 약속에 의해 스타일을 포함하는 경우가 있고, 브라우저가 임의로 스타일링 하는 경우도 있으며 css 파일로 적용할 수 있다. 아니면 inline style등으로 지정할 수 있는데 이 모든 스타일 옵션은 정해진 우선순위를 따른다. 보통 inline style 속성은 가장 강력한 스타일 방법중에 하난데, 재밌게도 HTML 속성(attribute)로서 스타일을 지정할 수 있는 엘리먼트들이 있고, 그 경우에 우선순위가 낮다.
<!-- valid, works, is a good idea -->
<img width="500" height="400" src="..." alt="...">
<iframe width="600" height="400" src="..."></iframe>
<svg width="20" height="20"></svg>
<!-- not valid, doesn't work, not a good idea -->
<div width="40" height="40"></div>
<span width="100" height="10"></span>
// 출처: 하단 링크여기서 의아할 수 있는 부분이 있다. 위에서 언급 하였듯이, 스타일은 우선순위를 갖고 있고, inline이 아주 강력한 우선순위를 갖음에도(보통 !important만이 우회할 유일한 방법이다) inline과 유사하게 엘리먼트의 속성으로서 추가하는 스타일은 그 우선순위가 가장 낮다(css보다도!)
어찌보면 무언가 논리적이지 못해 보일 수 있다 생각할 수 있지만 이 방식은 보통 잘못되는 상황에서의 대처에 유용하게 쓰인다고 한다. 쉽게 생각하면 default 값으로서 문제가 생겼을때만 적용되고 평상시에는 무시해도 되는 정도의 우선순위를 갖는 fallback styling 으로서의 역할을 하는것 이다.
즉 기타 스타일링 자원이 아직 로드 되지 않았을 때나, 불러오는데 문제가 생겨서 정상적인 형태를 유지하게 하기 어려울 때 사용 되는 것이다. 본문의 내용에 따르면 svg의 경우 이 속성없이는 잘못된 상황에서 정말 이상한 형태가 나오기도 한다고 한다.
이제 이런것도 있음을 알게 되었으니, 다음 글로는 css의 스타일 우선순위에 대해 다시 한번 살펴보고 정리하도록 해야겠다.