안녕하세요 혹시 이렇게 구성은 되어 있는데요
모니터 사이즈 22인치와 24인치 20인치 에서 볼때 원형이 가로로 잘 정렬이 되게 하려면 어떻게 해야 하나요
이리저리 해보아도 잘 되지 않아서요
혹시 media 1280 이런 식으로 지정을 해서 처리를 해야 하는지 궁금 합니다.
고수님들의 답변 부탁 드립니다.
아래 소스는 현제 인트로 페이지로 되어 있는데요 모니터 사이즈에 따라 정상적으로 나오지 않아서요
Copy
<html lang="ko">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>행복을 만들어가는 사회적협동조합 지심</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=yes">
<style>
@import url(//fonts.googleapis.com/earlyaccess/nanumgothic.css);
@import url(//fonts.googleapis.com/earlyaccess/nanummyeongjo.css);
@import url(//fonts.googleapis.com/earlyaccess/jejugothic.css);
@import url(//fonts.googleapis.com/earlyaccess/jejuhallasan.css);
body *{font-family: 'Nanum Gothic', sans-serif !important;}
body {background: url(http://www.jisim.or.kr/theme/basic1/img/back02.jpg) no-repeat; background-size: cover; height: 100%; background-attachment: fixed; }
.main_intro_wrap{width:100%; height:100%; position:static; }
.main_intro_wrap h1{display:block; font-size:34px; font-weight:normal; color:#fff; text-shadow:0 0 3px rgba(0,0,0,0.4); text-align:center; position:absolute; top:10%; left:0; right:0; z-index:50; letter-spacing:-3px; animation-duration:0.7s; animation-name:intro_title; animation-fill-mode:both; animation-delay:0.2s;}
.main_intro_wrap h1 span{color:#ffc600; font-size:58px; font-weight:800;}
.main_intro_wrap h1:after{content:' '; display:block; font-size:20px; text-align:center; color:rgba(255,255,255,0.8); margin-top:10px; letter-spacing:-1px;}
.main_intro_wrap {width: 100%; height: 100%; position: relative; }
.main_intro_wrap .main_intro{width:50%; height:100%; float:left; position:relative;}
.main_intro_wrap .main_intro a{display:block; width:300px; height:300px; border:1px solid #fff; border-radius:50%; position:absolute; top:35%; left:50%; margin-left:-150px; text-align:center; transition:all 0.25s; animation-duration:1s; animation-name:intro_circle; animation-fill-mode:both; animation-delay:0.7s;}
.main_intro_wrap .main_intro a img{width:90px; margin-top:58px;}
.main_intro_wrap .main_intro a span{display:block; font-size:33px; position:absolute; top:55%; left:0; right:0; bottom:0; color:#fff; letter-spacing:-1px;}
.main_intro_wrap .main_intro p{font-size:16px; color:#fff; position:absolute; top:100%; left:0; right:0; text-align:center; text-shadow:0 0 3px rgba(0,0,0,0.3); transition:all 0.25s;}
.main_intro_wrap .container1 a:hover p{color:#06cfc4;}
.main_intro_wrap .container2 a:hover p{color:#ffd237;}
.main_intro_wrap .container3 {width:300px; position: absolute; top: 0; left: 50%; margin-left: -8%; }
.main_intro_wrap .container3 a:hover p{color:#ffd237;}
.main_intro_wrap .container1 a:hover{background:rgba(11,162,154,0.5); border-color:rgba(11,162,154,0.5);}
.main_intro_wrap .container2 a:hover{background:rgba(255,198,0,0.5); border-color:rgba(255,198,0,0.5);}
.main_intro_wrap .container3 a:hover{background:rgba(255,198,0,0.5); border-color:rgba(255,198,0,0.5);}
@keyframes intro_title{
from{opacity:0; visibility:hidden; top:5%;}
to{opacity:1; visibility:visible; top:10%;}
}
@keyframes intro_title2{
from{opacity:0; visibility:hidden; top:38%;}
to{opacity:1; visibility:visible; top:43%;}
}
@keyframes intro_circle{
from{opacity:0; visibility:hidden; top:30%;}
to{opacity:1; visibility:visible; top:35%;}
}
@media(max-width:767px){
.main_intro_wrap .main_intro{width:100%; height:50%; float:none;}
.main_intro_wrap h1{font-size:24px; top:38%; animation-duration:0.7s; animation-name:intro_title2; animation-fill-mode:both; animation-delay:0.2s;}
.main_intro_wrap h1 span{font-size:34px;}
.main_intro_wrap h1:after{content:''; display:none;}
.main_intro_wrap .main_intro a{margin:0; padding:0; width:200px; height:200px; border:1px solid #fff; border-radius:50%; position:absolute; top:0 left:0; margin-top:-13%; margin-left:-100px;text-align:center; transition:all 0.25s; animation-duration:1s; animation-name:intro_circle; animation-fill-mode:both; animation-delay:0.7s;}
.main_intro_wrap .main_intro a img{width:45px; margin-top:40px;}
.main_intro_wrap .main_intro a span{display:block; font-size:28px; position:absolute; top:48%; left:0; right:0; bottom:0; color:#fff; letter-spacing:-1px;}
.main_intro_wrap .main_intro p{display:none;}
.main_intro_wrap .container3 {position:relative !important;margin-left:0;top:0;left:0}
}
</style>
</head>
<body>
<div class="main_intro_wrap">
<h1>행복을 만들어 드리는 기업<br><span>고객을 먼저 생각하는 기업</span></h1>
<div class="main_intro container1">
<a href="http://jisim.or.kr/index.php">
<img src="http://www.jisim.or.kr/theme/basic1/img/btn01.png">
<span>사회적협동조합<br><b>지심</b></span>
<p>꿈과 희망이 있는 <br>행복한 공동체 </p>
</a>
</div>
<div class="main_intro container2">
<a href="http://jisim.or.kr/index.php">
<img src="http://www.jisim.or.kr/theme/basic1/img/btn01.png">
<span><br><b>지심퍼니처</b></span>
<p>가구제작 및 생산<br>직업재활서비스<br></p>
</a>
</div>
<div class="main_intro container3">
<a href="http://jisim.or.kr/index.php">
<img src="http://www.jisim.or.kr/theme/basic1/img/btn01.png">
<span><br><b>지심엘앤씨</b></span>
<p>조명기구사업<br>CCTV 사업<br></p>
</a>
</div>
</body>
</html>
답변 1개 / 댓글 2개
채택된 답변
+20 포인트
2017-11-21 (화) 17:30:51
<div style="width:1280px; margin:0 auto;">
<div class="main_intro container1"></div>
<div class="main_intro container2"></div>
<div class="main_intro container3"></div>
</div>
세개의 div 를 이렇게 감싼 다음
.main_intro 의 width 를 50% 에서 33% 로 변경하고
아래에 있는 스타일 지워보세요.
.main_intro_wrap .container3 { width:300px; position: absolute; top: 0; left: 50%; margin-left: -8%; }
.main_intro_wrap .container3 { } <= 이렇게요
1280 이하는 따로 미디어쿼리 사용하면 됩니다.
답변에 대한 댓글 2개
2017-11-21 (화) 19:52:19
2017-11-21 (화) 20:45:39
미디어쿼리 사용해서 추가한 div 크기를 줄이고
원 크기를 (a 태그) 300 아래로 줄이면 되겠네요.
반응형으로 해야 되는거라면 레이아웃 자체를 변경하면 됩니다.
@media all and (max-width:1152px) {
}
원 크기를 (a 태그) 300 아래로 줄이면 되겠네요.
반응형으로 해야 되는거라면 레이아웃 자체를 변경하면 됩니다.
@media all and (max-width:1152px) {
}
답변을 작성하려면 로그인이 필요합니다.
그럼 1280 이하는 어떤식으로 작성을 해야 하나요
혹시 예시라도 알려 주실 수 있나요
죄송합니다.
아직 실력이 좀 부족해서요 ㅎㅎㅎㅎㅎ
위의 대로 하니 잘 되요 피씨에서는 ㅎㅎㅎ