안녕하세요
본문
안녕하세요 혹시 이렇게 구성은 되어 있는데요
모니터 사이즈 22인치와 24인치 20인치 에서 볼때 원형이 가로로 잘 정렬이 되게 하려면 어떻게 해야 하나요
이리저리 해보아도 잘 되지 않아서요
혹시 media 1280 이런 식으로 지정을 해서 처리를 해야 하는지 궁금 합니다.
고수님들의 답변 부탁 드립니다.
아래 소스는 현제 인트로 페이지로 되어 있는데요 모니터 사이즈에 따라 정상적으로 나오지 않아서요
<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
<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 이하는 따로 미디어쿼리 사용하면 됩니다.
네 정말 감사 드립니다.
그럼 1280 이하는 어떤식으로 작성을 해야 하나요
혹시 예시라도 알려 주실 수 있나요
죄송합니다.
아직 실력이 좀 부족해서요 ㅎㅎㅎㅎㅎ
위의 대로 하니 잘 되요 피씨에서는 ㅎㅎㅎ
미디어쿼리 사용해서 추가한 div 크기를 줄이고
원 크기를 (a 태그) 300 아래로 줄이면 되겠네요.
반응형으로 해야 되는거라면 레이아웃 자체를 변경하면 됩니다.
@media all and (max-width:1152px) {
}
답변을 작성하시기 전에 로그인 해주세요.
