회고록 블로그
HTML 공부: img 태그로 사이즈를 조절하고 CSS로도 이미지의 사이즈를 조절하면 어떻게 될까 본문
HTML 공부: img 태그로 사이즈를 조절하고 CSS로도 이미지의 사이즈를 조절하면 어떻게 될까
김간장 2021. 3. 4. 16:12HTML 공부하다가 궁금한 점이 생겨서 찾아보았다.
※ 본 글은 초급자가 머릿속에서 혼자 고민하고 탐구하여 낸 결론입니다.
따라서, 본 글에 나오는 결론 등은 개인의 추측일 뿐 정답이 아닐 가능성이 99.9% 입니다.
이미지를 <img> 태그로 사이즈 조절을 하고, 동시에 CSS로도 사이즈 조절을 하면 어떻게될까?
사전과제. 우선 CSS로 이미지 사이즈(width, height)를 조절할 수 있는지 먼저 확인한다.
<!DOCTYPE html>
<html>
<head>
<style>
img {
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<img src="img.jpg" alt="소나무 이미지" title="클릭하지 마십시오">
</body>
</html>
=> 결과: CSS로도 이미지의 사이즈를 조절할 수 있다.
이제, <img> 태그의 속성인 width, height로 이미지의 사이즈를 조절해보자. (CSS도 그대로 둘 것임)
구분이 가능토록 <img> 태그에서의 사이즈는 500px로 설정했고
CSS로는 50px로 설정했다.
<!DOCTYPE html>
<html>
<head>
<style>
img {
/* CSS에서 img 태그에 대하여 width와 height를 50px로 설정해보자 */
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<!-- img 태그에서 width, height 속성을 각각 500px로 설정해보자 -->
<img src="img.jpg" width="500px" height="500px" alt="소나무 이미지" title="클릭하지 마십시오">
</body>
</html>
=> 결과: CSS에서 설정한 사이즈(width:50px, height:50px)가 화면에 출력되었다.
??
왜.. CSS로 설정한 이미지 사이즈(width, height=50px)가 출력된거지..?
그리고 CSS에서 이미지 사이즈 조절이 가능하면 왜 <img> 태그에서도 사이즈 조절이 가능한거지..? 왜? Why?
(CSS로 이미지 사이즈를 조절하는 것은 모든 이미지의 사이즈를 일괄 변경할 때에나 사용하는 것인가?)
동공에서 팝핀이 일어나고 있다.
모르는 것을 발견했다면 그 해답을 찾아내야만 속이 시원해지는 것이 바로... 인지상정! (?)
하나씩 그 이유를 찾아보기로 했다.
질문1. CSS에서 이미지 사이즈 조절이 가능하면, 왜 <img> 태그에서도 사이즈 조절이 가능하도록 둔걸까?
그 이유를 꾸역꾸역... 여기저기 찾으러 다녔다가, 능력자님의 글을 가져왔다.
세상에는 능력 좋은 분들이 많이 계시는 것 같다. 능력자님 감사합니다.
출처: blog.wystan.net/2007/08/01/img-tag-with-width-and-height
wystan's tales > img 태그에 width와 height 속성이 필요한 이유
앞서 포스팅한 HTML Transitional과 Strict 규격 비교라는 글에서 엄격한 문서 타입(Strict DTD)에서는 ‘표현(presentation)’을 담당하던 속성들이 대부분 사라졌다고 알려드린 바 있습니다. 하지만 일부 태
blog.wystan.net
내가 이해한 바로는 이렇게 되는 것 같다.
우선 웹브라우저가 HTML를 해석하는 과정은 이런 것 같다.
1) 웹브라우저는 HTML 문서를 해석하다가
2) 이미지(<img>태그), CSS(<style>태그) 등의 태그를 만나게 되면
3) 웹서버에서 순차적으로 '이미지 보내줘', 'CSS 보내줘' 등을 요청하고 그 결과를 받아서 화면에 출력하는 것 같다.
그러니까.. 아마 이런 순서인 것 같다.
이제, 이미지가 있다고 하자. 그리고 이 이미지의 사이즈를 CSS에서 조절하고 있다고 하자.
HTML 파일
...
<head>
<link rel="stylesheet" href="style.css">
</head>
...
<img src="img.jpg" alt="소나무 이미지" title="클릭하지 마십시오">
</body>
</html>
CSS 파일
...
<style>
img {
/* CSS에서 img 태그에 대하여 width와 height를 50px로 설정해보자 */
width: 50px;
height: 50px;
}
</style>
...
웹 브라우저가 HTML을 로딩할 때, <img> 태그를 만났다.
그럼 그때 웹 브라우저는 '화면에서 그 이미지가 차지할 영역을 대충 엄청 크게(?) 계산해놓고 렌더링'을 하나보다.
(아직 사이즈를 모르니까 대충 이 정도면 되겠지 하고 미리 엄청 크게크게 어림잡아놓는 느낌..?)
그리고 CSS 파일을 웹 서버로부터 받아서 이미지의 크기(width, height)를 제대로 조정할 것이다.
문제는... 웹서버로 부터 결과를 받아올 때까지 계속 그 큰 영역을 낭비해두어야 한다(?)
대충 불편하기 짝이없는 상황인 것 같다. (?)
하지만 <img> 태그에서 사이즈를 지정하게 되면 웹브라우저가 HTML을 해석할 때 이미지의 사이즈도 함께 알게 되고
그 사이즈 만큼 계산해서 렌더링 하기 때문에 불편함(?)을 줄일 수 있다는 것으로 이해하였다.
그래서 <img> 태그에서도 속성(width, height)을 이용해 사이즈를 조절할 수 있도록 남겨둔 것이라고... 이해하였다..
(맞는지 확인이 필요해보인다..)
질문2. 그럼 다시 본래의 질문 사항으로 돌아가서,
왜 아래의 코드는 CSS로 설정한 이미지 사이즈가 출력되었을까? (왜 width: 50px, height: 50px로 출력되었을까?)
<!DOCTYPE html>
<html>
<head>
<style>
img {
/* CSS에서 img 태그에 대하여 width와 height를 50px로 설정해보자 */
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<!-- img 태그에서 width, height 속성을 각각 500px로 설정해보자 -->
<img src="img.jpg" width="500px" height="500px" alt="소나무 이미지" title="클릭하지 마십시오">
</body>
</html>
내 예상 결과:
HTML 문서가 위에서부터 순차적으로 처리된다고 했으니까,
<style>이 먼저 처리될 것이고 그 다음 <img> 태그가 처리되겠구나.
마지막으로 처리된 <img> 태그의 영향을 받아서 이미지 사이즈가 조절되는 것인가보다.
또는 CSS 우선순위에 따라서 HTML에서 <img> 태그로 지정한 크기가 출력되겠구나.
(예상 결과: 이미지의 크기는 width=500px, height=500px)
하지만 결과는 내 예상에 빗나갔다. (width=50px, height=50px로 출력됨)
뭔지 모르겠지만 'HTML 문서를 해석하고 출력'하는 그 부분에 좀더 깊은 이해가 필요할 것 같아서,
도움이 될 것 같은 내용을 하나 더 스크랩 해왔다.
능력자님 감사합니다.
[HTML5] 브라우저에서 HTML이 처리되는 과정
그림 한큐로 설명 아래는 자세히... 브라우저에서 네트워크를 처리하는 컴포넌트가 서버와 통신을 통해서 데이터를 가져옵니다. 이렇게 가져온 HTML 데이터는 분석 과정을 거치게 되는데, 이 과
znznzn.tistory.com
HTML 문서를 처리하는 것은 생각보다 복잡했다.
위의 능력자님 블로그를 들어가면
글의 앞 부분쪽에 '렌더링 엔진은 렌더 트리를 구성할 때 CSS의 참견을 받는다' 라고 되어있다.
렌더링 엔진이라는 것이 '렌더트리'라는 구조를 만들어내는데,
이 '렌더트리'가 화면에 출력되는 요소들을 추려서 만들어진 것 같다.
(화면에 어떤 요소들을 출력할까 결정해주는게 렌더링 엔진이고 그 모음들이 렌더 트리인 듯)
그리고 '렌더트리'를 구성할 때에는 CSS의 참견을 많이 받는다고 하는 것으로 보아
화면에 출력되는 요소들을 구성할 때 CSS를 참고한다는 말 같다.
더 아래에는 '화면에 보여질 요소들을 파악한 렌더트리는 이제 CSS를 이용해 화면의 어떤 위치에 보여주어야 하는지를 결정하는데, 이작업이 레이아웃을 구성하는 작업'이라는 문장도 있다.
아직 확실하게 이해한 것은 아니지만, 렌더링 엔진이 화면에 보여줄 요소들을 구성할 때 CSS를 참고하기 때문에,
우선순위가 HTML 파일 < CSS 파일이 된 것이 아닐까.. 그래서 CSS에서 지정한 이미지의 크기(width:50px, height:50px)가 출력된 것이 아닐까..
+ 추가) 그러니까... '렌더트리'를 구성할 때 width, height가 정해진다는 것인가?
음... 아마 아래의 능력자님의 글에서 해답을 찾을 수 있을 것 같다.
출처: feel5ny.github.io/2018/06/07/rendering_engine_2/#html_parse
렌더링 엔진(2) - 렌더 트리 구축
https://d2.naver.com/helloworld/59361 를 읽고 정리했습니다. 브라우저의 주요 기능 브라우저의 기본 구조 렌더링 엔진 동작 과정 HTML 파싱 (for DOM트리 구축) 렌더 트리 구축 렌더 트리 배치 렌더 트리 그
feel5ny.github.io
능력자님의 글을 보면 "렌더링트리" 부분에 "렌더러는 너비, 높이 그리고 위치와 같은 기하학적 정보를 포함한다"고 적혀있다.
(렌더링트리와 렌더트리가 같은 말이겠지..?)
즉, 렌더트리를 구성할 때 width, height가 포함되어 트리가 구성되는 것 같다.
그러면 렌더트리는 대략 이런 모습인건가.
렌더트리는 CSS의 참견을 받는다고 했으니까 <img>태그의 width, height 속성은 무시해버리는건가..?
나중에 웹 브라우저가 HTML을 해석하고 출력하는 방법에 대해서 좀 더 공부해서 답을 알아와야겠다.. ㅠㅠ
지금은 추측만 가능할 뿐. 답을 모르겠다.
이제 막 개발을 배우기 시작한 초보라서 정확하게 이해한 것인지 모르겠다.
당장은 나에게 너무 어려운 내용이라서 (ㅠㅠ) 이렇게 추측으로만 공부하고.. 나중에 다시 알아봐야겠다.
어쨌든 결과만 정리해보자면,
HTML 문서에서 <img> 태그를 통해 각각의 이미지의 사이즈를 별도로 지정해주고 있었는데,
나중에 CSS 파일에서 <img> 태그에 대하여 width, height 스타일을 적용해버리면...
=> CSS 파일의 스타일이 적용된다.
그러므로,
"CSS 파일에서 전체 <img> 태그의 기본 사이즈(디폴트)를 지정해놓고
HTML 문서에서 특정 <img> 태그의 사이즈만 조절해야지"는 먹히지 않는다는 것을 알았다.
(※ <img> 태그에게 class명을 지정해주고 CSS에서 그 class선택자의 스타일을 조절해주는건 가능했다)
'2. 프로그래밍 언어 공부 > HTML+CSS' 카테고리의 다른 글
| [공부 필기] 생활코딩 CSS 수업 필기_20210308 (0) | 2021.03.08 |
|---|---|
| [공부 필기] 생활코딩 CSS 수업 필기_20210306 (0) | 2021.03.07 |
| CSS 공부: 선택자에 따라 스타일을 적용하는 순서가 있을까 (0) | 2021.03.04 |
| [공부 필기] 생활코딩 CSS 수업 필기_20210304 (0) | 2021.03.04 |
| [공부 필기] 생활코딩 HTML 수업 필기_20210303 (0) | 2021.03.03 |
