12-1. img 태그로 이미지 넣기
이미지를 웹 사이트에 추가하는 방법이 몇 개 있는데
가장 많이 쓰이는 방법은 img 태그를 사용하는 것입니다.
<img alt="HTML" src="https://www.w3schools.com/whatis/img_js.png">img 태그의 속성(attribute)에는 width, height가 있어서 html에서 직접 수정 가능합니다.
하지만 유지보수나 좋은 코딩 습관을 위해 css는 항상 style.css에서 작성하는 것이 좋습니다.
img {
width: 150px;
}위의 코드를 style.css에 추가해주세요.
원래 왼쪽 노란색 이미지의 크기는 344px * 390px 였고,
파란색 이미지의 크기는 512px * 512px 이었습니다.
css에 가로만 지정해주었는데 원본의 세로 값으로 남아있는 것이 아니라, 가로의 150px 비율에 맞춰서 세로도 알맞게 줄어들었습니다.
이렇게 가로/세로 중에서 하나의 값만 입력하여도
브라우저에서 알아서 같은 비율로 나머지 크기도 줄여줍니다.
12-2. background-image로 이미지 넣기
첫 번째 방법은 html에서 img 태그로 이미지를 생성하는 것이었습니다.
또 다른 방법은 css를 이용해 이미지를 생성하는 것입니다.
즉, 사이트에 이미지가 있을 때 어떤것은 img 태그로 만들고, 어떤것은 css의 background-image 속성으로 이미지를 추가했는지 사용자는 알기 어렵습니다.
개발자도구를 열어서 직접 확인해야만 알 수 있습니다.
<div class="bg-img">배경이미지</div>
.bg-img {
background-color: yellow;
background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/1280px-HTML5_logo_and_wordmark.svg.png");
}background-color 는 배경색을 추가하는 것이고
background-image 는 배경 이미지를 추가하는 것입니다.
background-color 를 추가하지 않으면 하얀색 바탕화면이 나와서, 영역을 한 눈에 보기 어려워서 노란색으로 칠했습니다.
div.bg-img에 노란 배경색을 칠했습니다.
노란색 영역, 즉 div.bg-img의 가로크기는 화면 전체이고,
세로 크기는 "배경이미지" 텍스트 높이 만큼이네요.
이것처럼 div태그는 자식태그, 즉 div태그 내부에 있는 내용이나 요소의 크기에 의해 세로가 결정됩니다.
div의 가로크기는 화면의 가로 크기만큼입니다.
이렇게 가로 전체를 차지하는 것을 block 요소라고 하며
p, header, h1 등등이 block 요소입니다.
div태그는 자식태그나 div태그 내부에 있는 내용의 세로크기가 곧 div태그의 세로가 됩니다.
div태그의 가로크기는 div태그의 내부에 뭔가가 있기만 하면 화면 전체의 너비가 곧 자기의 가로크기가 됩니다.
그래서 div.bg-img의 노란색 배경이
가로는 화면 전체 너비만큼 칠해졌고,
세로는 딱 글씨 크기만큼 칠해진 것입니다.
div.bg-img의 내용인 "배경이미지"를 지우고 재실행 하면 결과화면에서 사라집니다
내부에 아무것도 없어서 가로와 세로크기가 모두 0이 되었습니다.
div.bg-img의 크기는 0px*0px이 되었습니다.
배경이미지가 짤려서 나오기 때문에
div.bg-img에 height값을 주어 배경이미지가 좀 더 잘 보일 수 있도록 하겠습니다.
.bg-img에 아래 값을 추가해주세요.
.bg-img {
height: 300px;
}아무래도 가로도 너무 커서 작게 줄여야겠습니다.
아래 값을 추가해주세요.
.bg-img {
width: 300px;
}그런데 div.bg-img 크기는 줄었는데 원본 이미지는 줄지 않았습니다.
네! 이미지를 담는 영역인 div.bg-img의 크기만 줄인것이고,
배경이미지의 실제 크기는 원본크기 그대로 이면서
그 중에서 div.bg-img 의 크기(300px*300px)만큼만 보여지는 것입니다.
배경이미지 크기를 div.bg-img 크기만큼 줄이려고 합니다.
해당 배경이미지가 div.bg-img의 가로크기만큼 꽉채워 그려주라는 의미입니다.
.bg-img {
background-size: 100%;
}이제는 div.bg-img 내의 텍스트도 지우고, 노란색 배경색도 지워보겠습니다.
실행해보셨나요? 네, 위의 img 태그로 사용해서 이미지를 넣은거나
css의 background-image로 이미지를 넣은거나 차이가 없어보입니다.
그리고 이제는 div.bg-img의 내용(텍스트)이 없는데도 화면에 사라지지 않았습니다.
아까는 내용(텍스트)이 없어서 자동으로 가로세로가 0px*0px 이었기 때문입니다.
현재는 css에서 가로, 세로를 고정했기 때문에
그 크기만큼 영역을 차지하고 있어서 화면에서 보이는 것입니다.
