CSS를 수정해 보려고 하는데 쉽지 않네요.
본문
CSS를 수정해 보려고 하는데 쉽지 않네요.
군/구를 시/도 가로 사이즈와 같은 사이즈로 조절을 하려고 하는데
잘 안됩니다.
아래의 css에서 어디를 수정해야 하나요?
감사합니다.
=========================================================================================
<?php
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가
?>
<style>
.navbar {
overflow: hidden;
background-color: #333;
}
.navbar a {
float: left;
font-size: 14px;
color: white;
text-align: center;
padding: 1px 15px;
text-decoration: none;
}
.subnav {
float: left;
overflow: hidden;
}
.subnav .subnavbtn {
font-size: 14px;
border: none;
outline: none;
color: white;
padding: 1px 1px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover, .subnav:hover .subnavbtn {
background-color: #ff8900;
}
.subnav-content {
display: none;
position: absolute;
left: 0;
background-color: #ff8900;
width: 100%;
z-index: 1;
}
.subnav-content a {
float: left;
color: white;
text-decoration: none;
padding: 5px 20px;
}
.subnav-content a:hover {
background-color: #eee;
color: black;
}
.subnav:hover .subnav-content {
display: block;
}
/* 반응형 중간기기 1300px 사이즈 이하*/
@media all and (max-width:1300px){
}
/* 반응형 중간기기 1200px 사이즈 이하*/
@media all and (max-width:1200px){
}
/* 반응형 중간기기 1100px 사이즈 이하*/
@media all and (max-width:1100px){
}
/* 반응형 중간기기 768사이즈 이하 */
@media screen and (max-width: 768px) {
.navbar {
/** overflow: hidden; 잠시 차단 **/
background-color: #333;
}
.navbar a {
float: left;
font-size: 14px;
color: white;
text-align: center;
padding: 3px 2px;
text-decoration: none;
}
.subnav {
float: left;
overflow: hidden;
}
.subnav .subnavbtn {
font-size: 14px;
border: none;
outline: none;
color: white;
padding: 3px 2px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover, .subnav:hover .subnavbtn {
background-color: #ff8900;
}
.subnav-content {
display: none;
position: absolute;
left: 0;
background-color: #ff8900;
width: 100%;
z-index: 1;
}
.subnav-content a {
float: left;
color: white;
text-decoration: none;
padding: 5px 10px;
}
.subnav-content a:hover {
background-color: #eee;
color: black;
}
.subnav:hover .subnav-content {
display: block;
}
}
/* 반응형 작은기기 480사이즈 이하 */
@media screen and (max-width: 480px) {
.navbar {
/** overflow: hidden; 잠시 차단 **/
background-color: #333;
}
.navbar a {
float: left;
font-size: 14px;
color: white;
text-align: center;
padding: 3px 3px;
text-decoration: none;
}
.subnav {
float: left;
overflow: hidden;
}
.subnav .subnavbtn {
font-size: 14px;
border: none;
outline: none;
color: white;
padding: 3px 3px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover, .subnav:hover .subnavbtn {
background-color: #ff8900;
}
.subnav-content {
display: none;
position: absolute;
left: 0;
background-color: #ff8900;
width: 100%;
z-index: 1;
}
.subnav-content a {
float: left;
color: white;
text-decoration: none;
padding: 5px 8px;
}
.subnav-content a:hover {
background-color: #eee;
color: black;
}
.subnav:hover .subnav-content {
display: block;
}
}
/* 반응형 작은기기 360사이즈 이하 */
@media screen and (max-width: 360px) {
}
</style>
<div class="navbar">
<div class="subnav">
<button class="subnavbtn"><a href="<?php echo G5_BBS_URL; ?>/board.php?bo_table=manpower_information">전국</a></button>
</div>
<div class="subnav">
<button class="subnavbtn"><a href="<?php echo G5_BBS_URL; ?>/board.php?bo_table=manpower_information&sca=&sfl=wr_7&stx=서울">서울</a> </button>
<div class="subnav-content">
<a href="<?php echo G5_BBS_URL; ?>/board.php?bo_table=manpower_information&sca=&sfl=wr_7||wr_8&stx=서울&stx=강남구">강남구</a>
<a href="<?php echo G5_BBS_URL; ?>/board.php?bo_table=manpower_information&sca=&sfl=wr_7||wr_8&stx=서울&stx=강동구">강동구</a>
<a href="<?php echo G5_BBS_URL; ?>/board.php?bo_table=manpower_information&sca=&sfl=wr_7||wr_8&stx=서울&stx=강북구">강북구</a>
<a href="<?php echo G5_BBS_URL; ?>/board.php?bo_table=manpower_information&sca=&sfl=wr_7||wr_8&stx=서울&stx=강서구">강서구</a>
<a href="<?php echo G5_BBS_URL; ?>/board.php?bo_table=manpower_information&sca=&sfl=wr_7||wr_8&stx=서울&stx=관악구">관악구</a>
<a href="<?php echo G5_BBS_URL; ?>/board.php?bo_table=manpower_information&sca=&sfl=wr_7||wr_8&stx=서울&stx=광진구">광진구</a>
<a href="<?php echo G5_BBS_URL; ?>/board.php?bo_table=manpower_information&sca=&sfl=wr_7||wr_8&stx=서울&stx=구로구">구로구</a>
<a href="<?php echo G5_BBS_URL; ?>/board.php?bo_table=manpower_information&sca=&sfl=wr_7||wr_8&stx=서울&stx=금천구">금천구</a>
<a href="<?php echo G5_BBS_URL; ?>/board.php?bo_table=manpower_information&sca=&sfl=wr_7||wr_8&stx=서울&stx=노원구">노원구</a>
<a href="<?php echo G5_BBS_URL; ?>/board.php?bo_table=manpower_information&sca=&sfl=wr_7||wr_8&stx=서울&stx=도봉구">도봉구</a>
<a href="<?php echo G5_BBS_URL; ?>/board.php?bo_table=manpower_information&sca=&sfl=wr_7||wr_8&stx=서울&stx=동대문구">동대문구</a>
<a href="<?php echo G5_BBS_URL; ?>/board.php?bo_table=manpower_information&sca=&sfl=wr_7||wr_8&stx=서울&stx=동작구">동작구</a>
<a href="<?php echo G5_BBS_URL; ?>/board.php?bo_table=manpower_information&sca=&sfl=wr_7||wr_8&stx=서울&stx=마포구">마포구</a>
<a href="<?php echo G5_BBS_URL; ?>/board.php?bo_table=manpower_information&sca=&sfl=wr_7||wr_8&stx=서울&stx=서대문구">서대문구</a>
<a href="<?php echo G5_BBS_URL; ?>/board.php?bo_table=manpower_information&sca=&sfl=wr_7||wr_8&stx=서울&stx=서초구">서초구</a>
<a href="<?php echo G5_BBS_URL; ?>/board.php?bo_table=manpower_information&sca=&sfl=wr_7||wr_8&stx=서울&stx=성동구">성동구</a>
<a href="<?php echo G5_BBS_URL; ?>/board.php?bo_table=manpower_information&sca=&sfl=wr_7||wr_8&stx=서울&stx=성북구">성북구</a>
<a href="<?php echo G5_BBS_URL; ?>/board.php?bo_table=manpower_information&sca=&sfl=wr_7||wr_8&stx=서울&stx=송파구">송파구</a>
<a href="<?php echo G5_BBS_URL; ?>/board.php?bo_table=manpower_information&sca=&sfl=wr_7||wr_8&stx=서울&stx=양천구">양천구</a>
<a href="<?php echo G5_BBS_URL; ?>/board.php?bo_table=manpower_information&sca=&sfl=wr_7||wr_8&stx=서울&stx=영등포구">영등포구</a>
<a href="<?php echo G5_BBS_URL; ?>/board.php?bo_table=manpower_information&sca=&sfl=wr_7||wr_8&stx=서울&stx=용산구">용산구</a>
<a href="<?php echo G5_BBS_URL; ?>/board.php?bo_table=manpower_information&sca=&sfl=wr_7||wr_8&stx=서울&stx=은평구">은평구</a>
<a href="<?php echo G5_BBS_URL; ?>/board.php?bo_table=manpower_information&sca=&sfl=wr_7||wr_8&stx=서울&stx=종로구">종로구</a>
<a href="<?php echo G5_BBS_URL; ?>/board.php?bo_table=manpower_information&sca=&sfl=wr_7||wr_8&stx=서울&stx=중구">중구</a>
<a href="<?php echo G5_BBS_URL; ?>/board.php?bo_table=manpower_information&sca=&sfl=wr_7||wr_8&stx=서울&stx=중랑구">중랑구</a>
</div>
</div>
답변 2
반응형 미디어쿼리 부분은 제외하고 살짝 재구성해 봤습니다.
<style>
.navbar {
/* overflow: hidden; */
background-color: #333;
position: relative;
}
.navbar a {
float: left;
font-size: 14px;
color: white;
text-align: center;
padding: 1px 15px;
text-decoration: none;
}
.subnav {
float: left;
/* overflow: hidden; */
}
.subnav .subnavbtn {
font-size: 14px;
line-height: 20px;
border: none;
outline: none;
color: white;
padding: 5px 1px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover, .subnav:hover .subnavbtn {
background-color: #ff8900;
}
.subnav-content {
display: none;
position: absolute;
left: 0;
background-color: #ff8900;
width: 100%;
/* z-index: 1; */
top: 30px; /* .subnav .subnavbtn : line-height(20) + padding-top(5) + padding-bottom(5) = 30 */
}
.subnav-content a {
float: left;
color: white;
text-decoration: none;
padding: 5px 20px;
}
.subnav-content a:hover {
background-color: #eee;
color: black;
}
.subnav:hover .subnav-content {
display: block;
}
.navbar::after {
content: "";
display: block;
clear: left;
}
.subnav-content::after {
content: "";
display: block;
clear: left;
}
</style>
<div class="navbar">
<div class="subnav">
<button class="subnavbtn"><a href="<?php echo G5_BBS_URL; ?>/board.php?bo_table=manpower_information">전국</a></button>
</div>
<div class="subnav">
<button class="subnavbtn"><a href="<?php echo G5_BBS_URL; ?>/board.php?bo_table=manpower_information&sca=&sfl=wr_7&stx=서울">서울</a> </button>
<div class="subnav-content">
<a href="<?php echo G5_BBS_URL; ?>/board.php?bo_table=manpower_information&sca=&sfl=wr_7||wr_8&stx=서울&stx=강남구">강남구</a>
<a href="<?php echo G5_BBS_URL; ?>/board.php?bo_table=manpower_information&sca=&sfl=wr_7||wr_8&stx=서울&stx=강동구">강동구</a>
<a href="<?php echo G5_BBS_URL; ?>/board.php?bo_table=manpower_information&sca=&sfl=wr_7||wr_8&stx=서울&stx=강북구">강북구</a>
<a href="<?php echo G5_BBS_URL; ?>/board.php?bo_table=manpower_information&sca=&sfl=wr_7||wr_8&stx=서울&stx=강서구">강서구</a>
<a href="<?php echo G5_BBS_URL; ?>/board.php?bo_table=manpower_information&sca=&sfl=wr_7||wr_8&stx=서울&stx=관악구">관악구</a>
<a href="<?php echo G5_BBS_URL; ?>/board.php?bo_table=manpower_information&sca=&sfl=wr_7||wr_8&stx=서울&stx=광진구">광진구</a>
<a href="<?php echo G5_BBS_URL; ?>/board.php?bo_table=manpower_information&sca=&sfl=wr_7||wr_8&stx=서울&stx=구로구">구로구</a>
<a href="<?php echo G5_BBS_URL; ?>/board.php?bo_table=manpower_information&sca=&sfl=wr_7||wr_8&stx=서울&stx=금천구">금천구</a>
<a href="<?php echo G5_BBS_URL; ?>/board.php?bo_table=manpower_information&sca=&sfl=wr_7||wr_8&stx=서울&stx=노원구">노원구</a>
<a href="<?php echo G5_BBS_URL; ?>/board.php?bo_table=manpower_information&sca=&sfl=wr_7||wr_8&stx=서울&stx=도봉구">도봉구</a>
<a href="<?php echo G5_BBS_URL; ?>/board.php?bo_table=manpower_information&sca=&sfl=wr_7||wr_8&stx=서울&stx=동대문구">동대문구</a>
<a href="<?php echo G5_BBS_URL; ?>/board.php?bo_table=manpower_information&sca=&sfl=wr_7||wr_8&stx=서울&stx=동작구">동작구</a>
<a href="<?php echo G5_BBS_URL; ?>/board.php?bo_table=manpower_information&sca=&sfl=wr_7||wr_8&stx=서울&stx=마포구">마포구</a>
<a href="<?php echo G5_BBS_URL; ?>/board.php?bo_table=manpower_information&sca=&sfl=wr_7||wr_8&stx=서울&stx=서대문구">서대문구</a>
<a href="<?php echo G5_BBS_URL; ?>/board.php?bo_table=manpower_information&sca=&sfl=wr_7||wr_8&stx=서울&stx=서초구">서초구</a>
<a href="<?php echo G5_BBS_URL; ?>/board.php?bo_table=manpower_information&sca=&sfl=wr_7||wr_8&stx=서울&stx=성동구">성동구</a>
<a href="<?php echo G5_BBS_URL; ?>/board.php?bo_table=manpower_information&sca=&sfl=wr_7||wr_8&stx=서울&stx=성북구">성북구</a>
<a href="<?php echo G5_BBS_URL; ?>/board.php?bo_table=manpower_information&sca=&sfl=wr_7||wr_8&stx=서울&stx=송파구">송파구</a>
<a href="<?php echo G5_BBS_URL; ?>/board.php?bo_table=manpower_information&sca=&sfl=wr_7||wr_8&stx=서울&stx=양천구">양천구</a>
<a href="<?php echo G5_BBS_URL; ?>/board.php?bo_table=manpower_information&sca=&sfl=wr_7||wr_8&stx=서울&stx=영등포구">영등포구</a>
<a href="<?php echo G5_BBS_URL; ?>/board.php?bo_table=manpower_information&sca=&sfl=wr_7||wr_8&stx=서울&stx=용산구">용산구</a>
<a href="<?php echo G5_BBS_URL; ?>/board.php?bo_table=manpower_information&sca=&sfl=wr_7||wr_8&stx=서울&stx=은평구">은평구</a>
<a href="<?php echo G5_BBS_URL; ?>/board.php?bo_table=manpower_information&sca=&sfl=wr_7||wr_8&stx=서울&stx=종로구">종로구</a>
<a href="<?php echo G5_BBS_URL; ?>/board.php?bo_table=manpower_information&sca=&sfl=wr_7||wr_8&stx=서울&stx=중구">중구</a>
<a href="<?php echo G5_BBS_URL; ?>/board.php?bo_table=manpower_information&sca=&sfl=wr_7||wr_8&stx=서울&stx=중랑구">중랑구</a>
</div>
</div>
</div>
답변 감사합니다.