CSS를 처음 배우게 되면 이미지를 내가 원하는대로 넣는 것이 쉽지 않다. 그중에서도 박스의 크기와 이미지의 크기가 서로 다른 경우에는 여기에 맞춰서 넣는 방법을 가장 많이 사용하는데 이것을 한번 배워보자
이 내용은 기초중에서도 왕기초이다. 일단 아래와 같은 HTML 코드가 있다고 가정하자.
<div class="profile"> <img src="image.jpg"> </div>
CSS 박스안에 이미지 넣는 방법 : 순서
- 먼저 박스의 크기를 정해준다. width, height
- css에서 박스를 부모요소로 정하고 기준을 잡기 위해 position: relative를 해준다.
- 박스를 넘치는 이미지를 보여주지 않기 위해서 overflow: hidden을 해준다.
- 여기까지가 부모요소(위의 html에서 클래스 profile)의 세팅이다.
- 이제 자식요소인 img를 박스 안에 넣어야 한다.
- 먼저 자식요소라는 것을 밝히기 위해 position: absolute를 해준다.
- 부모요소 기준으로 위치를 잡아준다. top:0, left:0 부모요소인 div 태그의 왼쪽 상단에 이미지를 위치시킨다는 말이다.
- 이미지의 크기를 정해준다. width:100%, height:100% 부모요소의 100%크기로 꽉 채우라는 말이다.
- 이미지를 제대로 보여주기 위해 object-fit : cover을 해준다.
CSS 코드로 보면 아래와 같다.
.profile
{
position: relative;
width: 60px;
height: 60px;
border-radius: 50%; /*둥그런 원으로 만들기 위함*/
overflow: hidden;
}
.profile img
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
위의 그림과 같이 결과가 나온다. 홈페이지에서 보면 프로필 사진 메뉴 같은 곳에서 많이 사용한다. position의 relative와 absolute의 관계를 알아야 합니다.
position: relative를 하면 아무것도 변하지 않습니다. “나는 내 하위에 있는 position의 부모다” 라고 선언하는 역할을 많이 수행합니다. 이렇게 선언해두면 하위태그에서 position: absolute라고 설정하면 그 태그는 모든 위치를 상위태그(position:relative를 선언한)를 기준으로 잡아서 움직입니다.
즉, 하위태그에서 top:10px; left:20px 이라고 적으면 무작정 화면에서의 상단과 왼쪽이 기준이 아니라 상위태그가 위치한 곳에서부터 아래로 10px, 왼쪽으로 20px움직이는 것입니다.
위의 링크를 참조하시면 좀 더 이해가 쉬울 것입니다.