반응형
프로젝트를 진행하다보면 모바일에서도 확인이 가능해야 할 페이지가 존재한다.
예를 들어, 에러페이지인데 이미지를 보여준다던가....
각각의 모바일마다 해상도가 다르기 때문에, 이미지 비율을 유지하여 보여주도록 해야하는데, 이때 간단하게 css로만 설정하여 반응형으로 만들어 적용해봤다.
1. CSS
.container {
height: 100vh;
width: 100vw;
}
.img_item {
width: 100%;
height: 100%;
margin: 0 auto;
background-image: url("이미지URL");
background-repeat: no-repeat;
background-position: center center;
backgorund-size: 100% 100%;
}2. html
<body>
<div class="containter">
<div class="img_item">
</div>
</div>
</body>간단하게 설명을 해보자면
- div 태그를 하나 만들어서 현재 보고있는 해상도 전체에 맞는 박스를 하나 생성한다.
- width: 100vw, height: 100vh => 현재 해상도의 가로,세로 100%로 적용시킨다.
- 그 안에 img를 넣을 div 태그를 하나 더 생성한다.
- width: 100%, height: 100% => 현재 박스 크기를 100%로 사용한다.
- margin 0 auto => 가운데 정렬(아래 background-postion 때문에 필요 없을 수 있다....)
- background-image: url("이미지url") => 해당 div에 적용할 백그라운드 이미지url(프로젝트 img나 일반 외부 서버 url을 입력한다.)
- background-repeat: no-repeat => 반복 여부
- background-position: center center => 백그라운드 이미지의 위치(가운데 정렬)
- background-size : 100% 100% => 백그라운드 이미지의 크기(100% 100%로 하면 전체로 감싸지는데, 이 비율을 조절해서 이미지 크기를 조절하면 된다.)
이외에 다양한 방법이 있겠지만 간단하게 적용할 때 사용하면 좋을 듯 하다.
반응형
'FrontEnd > HTML|JSP' 카테고리의 다른 글
| [HTML, CSS] div 안에 텍스트가 범위 밖으로 나가는 현상 해결(자동 줄바끔 처리) (0) | 2022.03.30 |
|---|---|
| [JSP] include 사용하기 (0) | 2022.01.15 |
| [HTML] 카카오톡 URL 공유시 미리보기 meta 정보 등록하기 (2) | 2021.05.16 |
