메인슬라이드 이미지를 중앙부터 나오게는 할 수 없을까요?
742
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건 32 페이지
게시판 이용안내
이윰빌더를 이용하시는 모든 회원님들이 서로 궁금한 부분을 질문 또는 답변을 하며 문제점을 서로 해소할 수 있는 공용 질답 게시판입니다.
질문 시 기본적인 예절을 지켜주세요.
- 질문 시 바른말을 이용 해 주세요.
- 질문자의 상황을 다른이가 예측하기 힘듭니다. 오류가 난 상황이나 환경등을 최대한 자세하게 알려주셔야만 원하시는 답을 얻을 확률이 높습니다.
- 질문의 유형에 따라 틀릴 수 있지만 문제가 되는 해당 페이지 주소가 있으면 가장 근접한 해법이 나올 가능성이 큽니다.
- 원하시는 답을 얻으시면 감사의 말씀을 전하는 센스를 발휘 해 주세요.
- 질문 전 한번쯤 읽어볼만한 글 : http://eyoom.net/bbs/board.php?bo_table=qna&wr_id=74
| 번호 | 제목 | 글쓴이 | 날짜 | 뷰 |
|---|---|---|---|---|
| 1,661 |
LeeEvan
|
2016.03.09 | 630 | |
| 1,660 |
칠천피트
|
2016.03.09 | 768 | |
| 1,659 |
칠천피트
|
2016.03.09 | 671 | |
| 1,658 |
설악닷컴
|
2016.03.09 | 1,483 | |
| 1,657 |
제피
|
2016.03.08 | 693 | |
| 1,656 |
지노
|
2016.03.08 | 816 | |
| 1,655 |
zipper
|
2016.03.07 | 972 | |
| 1,654 |
고양이
|
2016.03.07 | 1,482 | |
| 1,653 |
크롱크롱
|
2016.03.04 | 732 | |
| 1,652 |
칠천피트
|
2016.03.04 | 751 | |
| 1,651 |
라자루스
|
2016.03.04 | 687 | |
| 1,650 |
고양이
|
2016.03.04 | 829 | |
| 1,649 |
서종득
|
2016.03.04 | 873 | |
| 1,648 |
도멘
|
2016.03.03 | 683 | |
| 1,647 |
알로하
|
2016.03.03 | 761 | |
| 1,646 |
통통맘
|
2016.03.03 | 610 | |
| 1,645 |
서종득
|
2016.03.03 | 834 | |
| 1,644 |
도멘
|
2016.03.02 | 543 | |
| 1,643 |
이현민
|
2016.03.02 | 505 | |
| 1,642 |
달달하고달콤한
|
2016.03.01 | 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포인트를 획득하였습니다.