CSS를 수정해 보려고 하는데 쉽지 않네요.

CSS를 수정해 보려고 하는데 쉽지 않네요.

QA

CSS를 수정해 보려고 하는데 쉽지 않네요.

본문

CSS를 수정해 보려고 하는데 쉽지 않네요.

군/구를 시/도 가로 사이즈와 같은 사이즈로 조절을 하려고 하는데 

잘 안됩니다.

아래의 css에서 어디를 수정해야 하나요?

감사합니다.

 

3661044743_1663245295.1933.png

 

=========================================================================================

 

<?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>
답변을 작성하시기 전에 로그인 해주세요.
전체 806
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT