테마를 이용중입니다
본문
그누보드 - 반응형 비즈니스 포인트 테마 > 그누보드5 테마 (sir.kr)
여기 높이를 수정하고 싶은데
[code]
.slider-item .slider-1, .slider-item .slider-2, .slider-item .slider-3 {
background-image: url(../images/background-slider-1.jpg);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
height: 100%;
width: 100%;
display: table
}
[code]
의
height: 100%;
width: 100%; 의 height: 100%;를 300px;요렇게 해봤는데 이 방법이 아닌거 같아서..
어떻게 수정해야 하나요?
답변 1
다음과 같이 해 볼 수 있을 것 같습니다.
.slider-item .slider-1, .slider-item .slider-2, .slider-item .slider-3 {
background-image: url(../images/background-slider-1.jpg);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
height: 300px; /* 변경된 부분 */
width: 100%;
display: table;
}
이렇게 줄이면 이미지는 줄지만 줄어든만큼 공간이 생겨서요
다른부분도 수정해야 할거 같아서..
만약 이미지의 크기를 줄였을 때 공간이 남는다면, 다른 부분도 적절히 조정해주어야 할 것으로 보입니다.
예를 들어 다음과 같이 해 볼 수 있을 것 같습니다.
.slider-item .slider-1, .slider-item .slider-2, .slider-item .slider-3 {
background-image: url(../images/background-slider-1.jpg);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
height: 300px; /* 변경된 부분 */
width: 100%;
display: flex; /* 수정된 부분 - display 속성을 flex로 변경 */
justify-content: center; /* 추가된 부분 - 가로 중앙 정렬 */
align-items: center; /* 추가된 부분 - 세로 중앙 정렬 */
}
이렇게 하면 이미지가 300px로 줄어들 때에도 가로와 세로 중앙에 위치하게 됩니다. 필요에 따라 추가적인 스타일링이나 조정이 필요할 수 있을 것 같습니다.
사용하시는 테마를 직접적으로 테스트 하지 못하는 관계로 참고하셔서 원하시는 형태로 구현을 하시면 되지 않을까 합니다.
답변을 작성하시기 전에 로그인 해주세요.
