현제 페이지를 한개 만들어 보고 있는데요 막히는 부분이 있어서요
본문
http://jisim.or.kr/theme/basic1/c.php
위 링크에 보시면 왼쪽과 오른쪽 버튼이 되어 있는데
왼족 오른쪽 가운데 버튼을 한개 더 놓으려고 합니다.
그리고 백그라운드 이미지 같은 경우에는 왼쪽 오른쪽 나누는 것이 아니고 하나로만 사용을 하고 싶은데
위치값과 width 100% 로 주었는데도 별 반응이 없어서요
소스 상에서 보면 왼쪽 이미지와 오른족 이미지 모두다 버튼하고 같이 묶여 있는 것 같은데...뭐가 잘 못 되었는지 모르겠습니다.
intro1 intro2 intro3 버튼 같은 경우에는 이렇게 나누면 될 것 같은데 문제는 배경 이미지가 하나로 되지 않는 다는 것이 좀 무제가 있어요
혹시 알려 주실분은 좀 넣어주시면 감사 드리겠습니다.
답변 5
전체를 감싸고 있는 main_intro_wrap 클래스에 아래 처럼 css를 줘보세요.
.container1, .container2의 background css는 제거하시고요.
- width: 100%;
- height: 100%;
- position: relative;
- background: url(./img/back01.jpg) no-repeat;
- background-size: cover;
안녕하세요 친절하게 해주셔서 정말 감사 드립니다.
여기서 제가
<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 이거 같은 경우에는 어디에 넣어야 되나요
원형 한개가 더 생기기는 했는데 아래로 떨어져 버려서요....
죄송합니다.
.main_intro_wrap 에 position:absolute를 지워주세요. position:relative는 그대로 두시고요.
- position: absolute !important;
- top: 0;
- left: 50%;
- margin-left: -25%;
정말 감사 드립니다.
근데 화면을 줄이게 되면 intro3 원형이 위에 2개 나오고 아래에 1개가 나오는데
이것을 균일하게 아래료 하나씩 나열하게 하려면 어디를 손을 봐야 하는지요...
죄송ㅎ바니다. 제가 지식이 좀 부족해서요
죄송합니다.
반응형으로 하시는군요. 좀 수정해야 겠네요.
새로 추가한 .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}
아이고 죄송합니다.
다 했는데요
덕분에 많이 배웠습니다.
그런데 이미지가 잘리네요
아래쪽으로 원형배너는 배치가 되었는데요
이것은 혹시 이미지가 작아서 그런간가요
아님 뭐가 도 잘 못 되었나요
화면을 줄였을때요
margin-left:-150px 하니 원형 베너가 사라지더라구요
그래서 그냥 전 -10% 주었더니 pc 형태에서는 그럭저럭 보이더라구요
이렇게 조정은 했는데 화면을 줄이게 되면 원형배너가 아래로 떨어지기는 하는데 백그라운드 이미자가 잘리는 현상이 생겨서요
배경 이미지를 고정시켜 스크롤을 움직여도 유지하는 방법입니다.
전 이게 깔끔한 것 같습니다.
현재 .main_intro_wrap에서 아래 2줄을 제거하시고
- background: url(./img/back02.jpg) no-repeat;
- background-size: cover;
- background: url(./img/back02.jpg) no-repeat;
- background-size: cover;
- height: 100%;
- background-attachment: fixed;
정말 감사 드립니다.
덕분에 잘 해결이 되었습니다.
한가지 더 의문점이 있는 것은 PC 에서 화면을 줄이게 되면 정상적으로 원형이 새로로 잘 나열이 되는데요
그런데 휴대폰으로 보면 겹쳐 보이는데 이것은 왜 그런 건가요
페이지에 html 선언도 안하셨고 head도 미포함 meta 태그도 미포함입니다.
태그 입력하시고 반응형에 맞는 meta 태그도 넣으시길 바랍니다.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
정말로 감사 드립니다.
바쁘신데 이렇게 신경써서 성심성의껏 답변 해주셔서 정말 감사 드립니다.
오늘 남은 하루도 좋은 하루 되세요
정말로 감사 드립니다.