auto가 default 값이라는 것만 알고 auto에 대해서는 크게 생각을 안했는데 img tag에 width, height에 auto를 지정해 주는 코드가 많았음. 어차피 default값으로 auto인데 굳이 지정해 주어야하나라는 생각에 정리 공부.
auto란? 브라우저가 해당 요소의 속성 값을 자동으로 계산해주는 것이다.예를 들어 margin에 0 auto를 주어 width 값이 정해 기준에 따라 좌/우 여백의 크기를 같게 설정 디바이스에 종류에따라 보이는 것이 다르게 보이게 해준다.
즉, margin의 auto는 width값에 따라 브라우저가 좌/우 여백의 크기를 같게 자동으로 계산해주었다.img tag
img tag에 height: auto에 코드를 보왔다. width 값을 정해주었으면 heigth: auto는 default값으로 알아서 지정되니 auto를 굳이 쓸 필요가 없다고 생각했으나 큰 오해이다. 이유는 HTMLImageElement의 속성 width, height에 있다.
<img src="이미지 url" width="600" height="400" style="width: 150px">위에 코드는 이미지가 브라우저 상에 width: 150px에 height: auto로 비율에 맞게 랜더링 될것으로 예상했으나 height: 400으로 깨진것을 확인할 수 있다. 이러한 에러때문에 width, height 둘 다 default auto를 쓰는것이 아닌 직접 auto를 쓰는 것이 좋다. 그럼 HTMLImageElement의 속성 width, height을 안쓰면 되는 것이 아닌가? 라는 생각이 들 것이다. 결론은 아니다.
HTMLImageElement width height
<img src="이미지 url 500 x 250" style="width: 100%; height: auto">위에 코드는 500 x 250의 기본 이미지를 나타내는 코드이며 250px의 디바이스에서 위의 코드의 이미지를 보게 되면 250 x 125의 이미지가 보이게 될 것이다. 즉, 이 말은 브라우저가 디바이스에 맞게 이미지를 조절해준다는 것인데 브라우저가 디바이스에 맞게 조절해 주는 것은 이미지가 로드 된 이후에나 가능하다. 그래서 이미지가 늦게 로드 될 수록 사용자는 영역이 움직이는 불편한 경험을 목격하게 된다. 하지만 width, height 속성에 원본 크기의 값을 넣어준다면 브라우저는 이미지가 로드되기 전 태그 파싱 단계에서 영역의 높이를 지정해줄 수 있다. 참고로 Img tag에 HTMLImageElement width height 속성은 원본 이미지 크기 그대로 지정해주는 것을 권장한다.
