1. CSS box-sizing
margin, border, padding, content
모든 요소는 margin, border, padding의 스타일을 갖고 있다
CSS 박스 모델의 기본값에서 width와 height는
요소의 content 크기에만 적용된다.-> content-box
따라서 width의 크기를 지정해주어도 실제 박스의 크기는 border, padding가 더해져 나와 원하는 결과가 나오지않을수 있다.
->border-box를 사용한다
box-sizing: border-box;
width와 height 속성이 안쪽 여백(padding)과 테두리(border)는 포함하고 바깥여백(margin)은 포함하지 않는다.
- 보이는 대로 width값을 주고 그 안으로 padding과 border을 주는 것이 원하는 결과를 얻기 쉽다.
tip💘
- 거의 대부분의 웹페이지에 box-sizing 속성을 기본적으로 적용하는데 일일이 태그에 적용하여 코드가 길어지는 것을 방지하기 위해 아래와 같은
*selector를 사용한다.
*selector는 모든 태그에 적용할 수 있다.* { box-sizing: border-box; }
2. img 넣는 두가지 방법
2-1 👀 HTML의 <img /> 태그를 이용한 img 넣기
- alt: 서버에서 이미지가 삭제됐거나 잘못된 이미지 주소일 경우 정상적으로 뜨지않을때 이미지 대신 보여줄 정보 텍스트이다.
- src: 이미지 파일 경로 or 이미지 url 주소
<img class="img_tag" alt="sample1" src="https://www.w3schools.com/whatis/img_js.png">
- img 태그를 사용한 뒤 css로 가로나 세로의 크기를 지정해주면 지정해준 값을 기준으로 원본 이미지의 세로와 가로 값의 비율에 맞춰 크기가 조정된다.
ex)
img { width: 150px; }
2-2 👀 CSS의 background-image를 사용하여 img 넣기
- 일단 html에 이미지 넣을 영역을 만들어 준다.
<div class="bg-img"></div>
- CSS를 사용해 배경에 이미지를 넣는다.
.bg-img { background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/1280px-HTML5_logo_and_wordmark.svg.png");
🧨 주의
div태그의 세로크기는 자식태그나 div태그 내부에 있는 내용의 세로크기 가 곧 자기의 세로크기가 되고
div태그의 가로크기는 div태그의 내부에 뭔가가 있기만 하면 화면 전체의 너비가 곧 자기의 가로크기가 된다.
😢 -> 따라서 div태그에 내용이 없으므로 크기가 없어 이미지가 나타나지 않는다.
😉 --> CSS로 크기조정하기
여기서 아래처럼 CSS로 이미지를 담는 영역인 div.bg-img의 height값과 width값을 주게 되면 이미지의 원본 크기가 조정되는 것이 아니라 담는 영역의 크기만 조정된다.
.bg-img { height: 300px; width: 300px; }
😥 -> 담는 영역이 이미지보다 작으면 이미지 담는 영역만큼만 보여져 원본 사진이 잘려나온다
😉👍 ->배경이미지를 담는 영역 ex)div.bg-img의 크기 만큼 꽉채워주라는 background-size: 100%;를 같이 사용하면 이미지의 크기가 담는 영역에 맞춰 조정되어 원하는 크기의 이미지를 얻을수있다.
.bg-img { width: 300px; background-size: 100%; }
