AWS AWS 디딤 클라우드

알림톡 통합메시징(알림톡)

이니톡 결제 이니톡(알림톡) 결제!

일본결제지원 일본결제지원!

이전 목록 다음
채택완료

현제 페이지를 한개 만들어 보고 있는데요 막히는 부분이 있어서요

꿈의세계
프로필 보기이 회원 글보기이 회원의 댓글보기
 2017-09-13 (수) 12:05:05 2,025

http://jisim.or.kr/theme/basic1/c.php

위 링크에 보시면 왼쪽과 오른쪽 버튼이 되어 있는데

왼족 오른쪽 가운데 버튼을 한개 더 놓으려고 합니다.

그리고 백그라운드 이미지 같은 경우에는 왼쪽 오른쪽 나누는 것이 아니고 하나로만 사용을 하고 싶은데

위치값과 width 100% 로 주었는데도 별 반응이 없어서요

소스 상에서 보면 왼쪽 이미지와 오른족 이미지 모두다 버튼하고 같이 묶여 있는 것 같은데...뭐가 잘 못 되었는지 모르겠습니다.

intro1 intro2 intro3 버튼 같은 경우에는 이렇게 나누면 될 것 같은데 문제는 배경 이미지가 하나로 되지 않는 다는 것이 좀 무제가 있어요

혹시 알려 주실분은 좀 넣어주시면 감사 드리겠습니다.
  

그누보드
|

답변 5개 / 댓글 5개

채택된 답변
+20 포인트
ffear
프로필 보기이 회원 글보기이 회원의 댓글보기
 2017-09-13 (수) 12:19:23

전체를 감싸고 있는 main_intro_wrap 클래스에 아래 처럼 css를 줘보세요.

.container1, .container2의 background css는 제거하시고요. 


.main_intro_wrap {
  1. width: 100%;
  2. height: 100%;
  3. position: relative;
  4. background: url(./img/back01.jpg) no-repeat;
  5. background-size: cover;
}

가운데 버튼 추가는 똑같이 container3를 하나 더 만들고 position:absolute 줘서 가운데에 위치시키면 됩니다.
단, .main_intro_wrap CSS에 영향을 받으면 안되니 CSS는 따로 주는 게 좋을 것 같네요.

답변에 대한 댓글 1개

꿈의세계
프로필 보기이 회원 글보기이 회원의 댓글보기
 2017-09-13 (수) 12:57:55
안녕하세요 친절하게 해주셔서 정말 감사 드립니다.
여기서 제가
<div class="main_intro container3">
<a href="#">
<img src="<?php echo G5_THEME_URL; ?>/img/btn01.png">
<span> <br><b>지시엘앤씨</b></span>
<p> <br> <br> </p>
</a>
</div>
만들고 그리고 css
.main_intro_wrap .container3 a:hover p{color:#ffd237;}
.main_intro_wrap .container3 a:hover{background:rgba(255,198,0,0.5); border-color:rgba(255,198,0,0.5);}
적용을 했는데 해결은 됬는데요
position:absolute 이거 같은 경우에는 어디에 넣어야 되나요
원형 한개가 더 생기기는 했는데 아래로 떨어져 버려서요....
죄송합니다.
ffear
프로필 보기이 회원 글보기이 회원의 댓글보기
 2017-09-13 (수) 16:39:46

페이지에 html 선언도 안하셨고 head도 미포함 meta 태그도 미포함입니다.

태그 입력하시고 반응형에 맞는 meta 태그도 넣으시길 바랍니다.

Copy 
<!DOCTYPE HTML><html><head>    <meta charset="UTF-8">    <title></title></head><body>    </body></html>

답변에 대한 댓글 1개

꿈의세계
프로필 보기이 회원 글보기이 회원의 댓글보기
 2017-09-13 (수) 16:54:31
정말로 감사 드립니다.
바쁘신데 이렇게 신경써서 성심성의껏 답변 해주셔서 정말 감사 드립니다.
오늘 남은 하루도 좋은 하루 되세요
정말로 감사 드립니다.
ffear
프로필 보기이 회원 글보기이 회원의 댓글보기
 2017-09-13 (수) 16:24:03

배경 이미지를 고정시켜 스크롤을 움직여도 유지하는 방법입니다.

전 이게 깔끔한 것 같습니다.

현재 .main_intro_wrap에서 아래 2줄을 제거하시고


  2. background: url(./img/back02.jpg) no-repeat;
  3. background-size: cover;

body에 새로운 css를 추가합니다.

body {
  1. background: url(./img/back02.jpg) no-repeat;
  2. background-size: cover;
  3. height: 100%;
  4. background-attachment: fixed;
}

답변에 대한 댓글 1개

꿈의세계
프로필 보기이 회원 글보기이 회원의 댓글보기
 2017-09-13 (수) 16:31:22
정말 감사 드립니다.
덕분에 잘 해결이 되었습니다.
한가지 더 의문점이 있는 것은 PC 에서 화면을 줄이게 되면 정상적으로 원형이 새로로 잘 나열이 되는데요
그런데 휴대폰으로 보면 겹쳐 보이는데 이것은 왜 그런 건가요
ffear
프로필 보기이 회원 글보기이 회원의 댓글보기
 2017-09-13 (수) 14:54:14

반응형으로 하시는군요. 좀 수정해야 겠네요.

새로 추가한 .container3 을 .main_intro_wrap .container3로 바꿔주시고요.

position:absolute !important를 position:absolute;로 바꿔주세요 (!important 제거)

그리고 width:300px; 추가해주시고요.

margin-left:25%를 margin-left:-150px로 바꿔주세요. 


그리고

@media(max-width:767px){

}


위 미디어쿼리 안에 아래 내용을 넣어주세요. 

.main_intro_wrap .container3 {position:relative !important;margin-left:0;top:0;left:0} 

답변에 대한 댓글 1개

꿈의세계
프로필 보기이 회원 글보기이 회원의 댓글보기
 2017-09-13 (수) 15:17:51
아이고 죄송합니다.
다 했는데요
덕분에 많이 배웠습니다.
그런데 이미지가 잘리네요
아래쪽으로 원형배너는 배치가 되었는데요
이것은 혹시 이미지가 작아서 그런간가요
아님 뭐가 도 잘 못 되었나요
화면을 줄였을때요
margin-left:-150px 하니 원형 베너가 사라지더라구요
그래서 그냥 전 -10% 주었더니 pc 형태에서는 그럭저럭 보이더라구요
이렇게 조정은 했는데 화면을 줄이게 되면 원형배너가 아래로 떨어지기는 하는데 백그라운드 이미자가 잘리는 현상이 생겨서요
ffear
프로필 보기이 회원 글보기이 회원의 댓글보기
 2017-09-13 (수) 13:08:36

.main_intro_wrap 에 position:absolute를 지워주세요. position:relative는 그대로 두시고요. 


.container3 {
  1. position: absolute !important;
  2. top: 0;
  3. left: 50%;
  4. margin-left: -25%;
}

위 CSS를 추가해주세요.

답변에 대한 댓글 1개

꿈의세계
프로필 보기이 회원 글보기이 회원의 댓글보기
 2017-09-13 (수) 14:11:49
정말 감사 드립니다.
근데 화면을 줄이게 되면 intro3 원형이 위에 2개 나오고 아래에 1개가 나오는데
이것을 균일하게 아래료 하나씩 나열하게 하려면 어디를 손을 봐야 하는지요...
죄송ㅎ바니다. 제가 지식이 좀 부족해서요
죄송합니다.

답변을 작성하려면 로그인이 필요합니다.