메인슬라이드 이미지를 중앙부터 나오게는 할 수 없을까요?
738
2016.05.18 23:07
짧은주소
- - 짧은주소: http://v2.eyoom.net/bbs/?t=2Um 주소복사
본문
메인슬라이드 이미지를 보면 위에서부터 출력이되는대 이미지의 중앙을 기준으로 출력되게 할 수 있는 방법이 있을까요? 자꾸 여쭤봐서 죄송합니다. ㅜ.ㅜ
0
레벨 2
경험치 273
Progress Bar 19%
- 가입일 : 2016-05-13 01:18:49
- 서명 :
- 자기소개 :
Total 2,281건 24 페이지
게시판 이용안내
이윰빌더를 이용하시는 모든 회원님들이 서로 궁금한 부분을 질문 또는 답변을 하며 문제점을 서로 해소할 수 있는 공용 질답 게시판입니다.
질문 시 기본적인 예절을 지켜주세요.
- 질문 시 바른말을 이용 해 주세요.
- 질문자의 상황을 다른이가 예측하기 힘듭니다. 오류가 난 상황이나 환경등을 최대한 자세하게 알려주셔야만 원하시는 답을 얻을 확률이 높습니다.
- 질문의 유형에 따라 틀릴 수 있지만 문제가 되는 해당 페이지 주소가 있으면 가장 근접한 해법이 나올 가능성이 큽니다.
- 원하시는 답을 얻으시면 감사의 말씀을 전하는 센스를 발휘 해 주세요.
- 질문 전 한번쯤 읽어볼만한 글 : http://eyoom.net/bbs/board.php?bo_table=qna&wr_id=74
| 번호 | 제목 | 글쓴이 | 날짜 | 뷰 |
|---|---|---|---|---|
| 1,821 |
추양
|
2016.05.22 | 759 | |
| 1,820 |
뚜꽈
|
2016.05.22 | 589 | |
| 1,819 |
고래
|
2016.05.21 | 475 | |
| 1,818 |
비즈팔
|
2016.05.21 | 770 | |
| 1,817 |
강건마
|
2016.05.20 | 761 | |
| 1,816 |
라피도스
|
2016.05.20 | 589 | |
| 1,815 |
라피도스
|
2016.05.20 | 800 | |
| 1,814 |
톡톡톡
|
2016.05.19 | 554 | |
| 1,813 |
천사미카엘
|
2016.05.19 | 561 | |
| 1,812 |
빨간DJ
|
2016.05.19 | 551 | |
| 1,811 |
허거덩
|
2016.05.19 | 540 | |
| 1,810 |
레아엘
|
2016.05.19 | 833 | |
| 1,809 |
0000
|
2016.05.19 | 631 | |
| 1,808 |
천사미카엘
|
2016.05.19 | 684 | |
| 열람 |
여분필드
|
2016.05.18 | 739 | |
| 1,806 |
고래
|
2016.05.17 | 818 | |
| 1,805 |
0000
|
2016.05.17 | 608 | |
| 1,804 |
0000
|
2016.05.17 | 657 | |
| 1,803 |
오켕
|
2016.05.17 | 677 | |
| 1,802 |
앙기무띠
|
2016.05.16 | 661 |
댓글목록
이윰EGG님의 댓글
이미지가 위치가 중앙에 맞춰서 나오시길 원하시는 것 같습니다.
원하시는 구현을 위해서는 다양한 방법이 있을 수 있습니다.
그중 현재 이미지 슬라이더 구조를 활용한 방법은 basic2테마 기준 /basic2/css/style.css 파일 .header-slider-bg > img 에 스타일을 수정하시면 되겠습니다.
.header-slider-bg > img {position:absolute;top:0;left:0} 에서 top:50%로 변경하시고 margin-top:-이미지 절반값 을 주가해 주시면 되겠습니다.
margin-top에 넣는 값 예) 출력되는 이미지 높이가 800px일 결우 절반값 400을 넣어줌 margin-top:-400px
.header-slider-bg > img {position:absolute;top:50%;left:0;margin-top:-400px}반응형의 경우 가로폭에 따라 이미지 높이 값이 변하니 그에 맞춰 값을 수정하며 이때 미디어 쿼리를 사용하시면 되겠습니다.
미디어쿼리 사용예)
@media (min-width: 992px) { .header-slider-bg > img {margin-top:-200px} } @media (min-width: 768px) and (max-width: 991px) { .header-slider-bg > img {margin-top:-150px} }감사합니다.
축하합니다. 첫댓글 포인트 10포인트를 획득하였습니다.