메인쪽의 슬라이드되는 곳에 텍스트를 어떻게 넣어야할까요?
본문
아래 url 보시면, 메인 상단 슬라이드되는 곳의 오른쪽 비어있는 곳에 텍스트를 넣을려고 합니다.
3줄 글자가 들어갑니다.
그런데, 아무리생각해도 잘 모르겠네요.,.
어떻게 넣어야할지..
대충 감이 오긴하는데, 왠지 하게되면 오류나거나 안될것 같아서 여쭈어 봅니다.
초보자라 고수님 부탁드립니다.
그리고, 그 바로 밑에 빨간선이 메인슬라이드와 간격이 떨어져있는데 붙일 수 있는 방법이 어떻게되나요?
border주는것 같긴한데 정확히 잘 모르겠네요..
암튼 고수님 답변주세요.
답변 3
main_visual 이미지 크기가 가변적이므로
#container .main_visual에 min-height가 불필요하고, 하단 분홍색 라인 <div class="visual_line"></div> 을 따로 넣지 말고 #container .main_visual에 보더 값을 넣어서 대체하는게 나아보임
그리고 이미지에 텍스트를 넣는건 bxSlider 소스에서 "captions: true, // 이미지의 title 속성이 노출된다."를 이용해서 이미지 태그에 title를 추가해서 입력하시면 될듯합니다.
<!-- S : MAIN VISUAL SLIDE -->
<div>
<ul class="bxslider">
<li>
<div>
<img src="images/main/main_visual.png" title="원하는 3줄 텍스트<br>원하는 3줄 텍스트<br>원하는 3줄 텍스트"/>
</div>
</li>
<li>
<div>
<img src="images/main/main_visual.png" title="원하는 3줄 텍스트<br>원하는 3줄 텍스트<br>원하는 3줄 텍스트"/>
</div>
</li>
</ul>
</div>
이렇게 입력하시고, 스타일 시트는
/common/layout.css에서
#container .main_visual {border-bottom:4px solid #ff596d;}
/common/jquery.bxslider.css에서
/* IMAGE CAPTIONS */
.bx-wrapper .bx-caption { position:absolute; bottom:0; left:0; background:#666\9; background:rgba(80, 80, 80, 0.50); width:100%; }
.bx-wrapper .bx-caption span { color:#fff; font-family:Arial; display:block; font-size:.85em; line-height:1em; padding:10px; }를
/* IMAGE CAPTIONS */
.bx-wrapper .bx-caption { position:absolute; top:150px; right:100px; width:100%; }
.bx-wrapper .bx-caption span { color:#fff; font-family:Arial; display:block; font-size:.85em; line-height:1em; padding:10px; }
이런식으로 사이트에 맞춰서 수정하시면 될것 같네요
/* 빨간선과 메인슬라이드 간격 붙도록 */
#container .main_visual { min-height: initial; }
.bx-wrapper img { display: block; }
/* 텍스트 예시 (실제로는 html, css 에 이부분의 스타일처럼 표현되도록 구성 필요) */
.bx-wrapper ul li div:before { content: "설명1\a description 2\a 12345"; position: absolute; right: 10%; top: 10%; white-space: pre; text-align: right; font-size: 2.0em; }
.bx-wrapper ul li .main_text{position:absolute; top:140px; right:350px;z-index:99999}를
.bx-wrapper ul li .main_text{position:absolute; top:20%; left:90%;z-index:99999} 처럼 위치를 %로 잡아주시는게 맞을것 같구요. 그리고 텍스트 사이즈도 px이 아닌 em단위로 설정을 하면 화면이 줄어들면 이미지와 같이 글자크기도 줄어들겠죠