box-sizing : border-box 전체 선택자 질문입니다

23.10.15 21:43 작성 조회수 235

0

안녕하세요 선생님,

HTML+CSS+JS 포트폴리오 실전 퍼블리싱 (시즌2)강의의 섹션7 : English Academy 헤더 드롭다운 네비게이션(2) 강의를 듣던 중에 .gnb li에 border-right: 1px을 주니까 마지막 트리거 버튼이 아래로 밀리는 현상이 생겨서 질문 드립니다.

전체 선택자에 box-sizing : border-box 를 입력했는데 왜 이럴까 싶어서 해당 태그(.gnb li)에 직접 box-sizing : border-box를 주니까 해결은 됐습니다만 이유가 궁금해서 질문드려요.

해당 태그에 float속성이 영향을 끼치는건가요?

 

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>헤더 드롭다운 네비게이션</title>
  <!-- jQuery CDN -->
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <link rel="stylesheet" href="navigation2.css">
</head>
<body>
  <div class="container">
    <header>
      <div class="banner-outer">
        <div class="banner">
          <span class="close-banner"><i class="xi-close-thin"></i></span>
          <img src="images/banner.png" alt="">
        </div>
      </div>
      <div class="lnb-outer">
        <div class="lnb">
          <div class="logo">
            <a href="#"><img src="images/logo.png" alt=""></a>
          </div>
          <div class="lnb-nav">
            <a href="#">Login</a>
            <a href="#">Register Membership</a>
            <a href="#">Education Gift</a>
            <a href="#">Voucher Learning Mail</a>
            <a href="#">Customer enter</a>
          </div>
        </div>
      </div>
      <div class="gnb-outer">
        <nav>
          <ul class="gnb">
            <li>
              <a href="#">Take a lecture</a>
            </li>
            <li>
              <a href="#">Infinite refund course</a>
              <div class="dropdown">
                <a href="#">TOEIC refund Course</a>
                <a href="#">Infinite pass</a>
                <a href="#">TOEIC speaking Pass</a>
              </div>
            </li>
            <li>
              <a href="#">Instructor introduction</a>
            </li>
            <li>
              <a href="#">Free lecture</a>
              <div class="dropdown">
                <a href="#">TOEIC refund Course</a>
                <a href="#">TOEIC</a>
                <a href="#">Free special TOEIC lecture</a>
                <a href="#">TOEIC 5 minutes in practice</a>
                <a href="#">Pronunciation travel</a>
                <a href="#">Daily TOEIC VOCA</a>
                <a href="#">Speaking practice</a>
                <a href="#">Writing practice</a>
              </div>
            </li>
            <li>
              <a href="#">Event <em>13</em></a>
              <div class="dropdown">
                <a href="#">Event in progress</a>
                <a href="#">End event</a>
                <a href="#">Wouter Announcement</a>
              </div>
            </li>
            <li>
              <a href="#">Class room</a>
              <div class="dropdown">
                <a href="#">Lecture while taking</a>
                <a href="#">Questions / Reviews</a>
                <a href="#">Coupon</a>
                <a href="#">Course voucher</a>
                <a href="#">Payment / Shipping</a>
                <a href="#">Level test</a>
              </div>
            </li>
            <li>
              <div class="trigger">
                <span></span>
                <span></span>
                <span></span>
              </div>
            </li>
          </ul>
        </nav>
      </div>
    </header>
    <section>
      <img src="images/section-bg.png" alt="">
    </section>
  </div>

  <script>
    $('.close-banner').click(function(){
      $('.banner-outer').slideUp()
      // $('.banner-outer').hide()
      // $('.banner-outer').fadeOut()
    })
  </script>
</body>
</html>

 

/* XEION CDN */
@import url('http://cdn.jsdelivr.net/npm/xeicon@2.3.3/xeicon.min.css');

/* Google Web Font */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Noto+Sans+KR:wght@100;200;300;400;500;600;700;800;900&display=swap');
*{
  box-sizing: border-box;
  font-family: 'Montserrat', sans-serif;
  outline: none;
}

body{
  font-size: 15px;
  color: #333;
  margin: 0;
  line-height: 1.5em;
}

a{
  text-decoration: none;
  color: #333;
}
/*###############header####################*/


/*###############Banner####################*/
.banner-outer{
  position: relative;
  background: linear-gradient(to right,#00202b 50%, #fff 50%)
}

.banner{
  width: 1450px;
  margin: auto;
  /* height: 40px; */
  /* border: 1px solid red; */
}

.banner img{
  /* display: none; */
  height: 40px;
  display: block;
  /* border: 1px solid red; */

}

.close-banner{
  /* display: none; */
  position: absolute;
  /* border: 1px solid red; */
  font-size: 30px;
  right: 10px;
  top: 5px;
  cursor: pointer;
  color: #aaa;
}

/*###############lnb####################*/
.lnb-outer{
  background-color:#e2edf8 ; 
}

.lnb{
  width: 1450px;
  margin: auto;
  /* border: 1px solid red; */
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 0;
}
.logo{}

.lnb .lnb-nav{}

.lnb .lnb-nav a{}

.lnb .lnb-nav a:after{
  content: '|';
  font-size: 12px;
  color: #bbb;
  margin-right: 5px;
  /* margin-left: 3px; */
  padding-left: 5px;
}

.lnb .lnb-nav a:last-child:after{
  display: none;
}


.lnb .lnb-nav a:hover{color: dodgerblue ;}


/*###############gnb####################*/
.gnb-outer{
  background-color: #272c38;
}

nav{
  width: 1450px;
  /* border: 1px solid red;; */
  margin: auto;
}

.gnb{
  /* border: 1px solid blue; */
  list-style: none;
  margin:0;
  padding: 0;
  height: 50px;
  /* overflow: hidden; */
}

.gnb li{
  float: left;
  height: 50px;
  width: calc(calc(1450px - 50px) / 6);
  border-right: 1px solid #aaa;
  box-sizing: border-box;
}
.gnb li:last-child{
  width: 50px;
  background-color: red;
}
.gnb li>a{
  color: #eee;
  text-align: center;
}

.dropdown{display: none;}



/*###############section####################*/
section{}
section img{
  width: 100%;
}

 

답변 1

답변을 작성해보세요.

0

인프런 AI 인턴님의 프로필

인프런 AI 인턴

2023.10.16

안녕하세요, 인프런 AI 인턴이에요.

box-sizing: border-box는 박스의 크기 계산 방법을 변경하는 속성입니다. 기본값은 content-box로, width와 height에 padding과 border를 추가하면 요소의 실제 크기가 커지게 됩니다.

box-sizing: border-box를 적용하면 width와 height에 padding과 border를 포함한 값을 적용하므로, 요소의 크기를 유지할 수 있습니다. 이렇게 함으로써, border-right 속성에 의해 증가된 가로 공간이 마지막 트리거 버튼을 밀어내는 현상을 해결할 수 있게 됩니다.

float 속성은 요소를 좌우로 부유시켜서 다른 요소를 감출 때 사용하는 속성입니다. float 속성이 적용된 요소는 일반적으로 해당 요소의 부모 요소에서 자동으로 높이를 설정해주지 않기 때문에, 부모 요소의 높이가 0이 되어 다른 요소에 영향을 줄 수 있습니다. 하지만 해당 코드에서는 float 속성이 사용되지 않았으므로 float 속성과는 별개의 문제입니다.

요약하자면, box-sizing: border-box 속성을 사용하면 width와 height에 padding과 border를 포함한 값을 적용하여 요소의 크기를 유지할 수 있습니다. 이를 사용하여 마지막 트리거 버튼이 border-right에 의해 밀려나가는 현상을 해결할 수 있습니다.

더 자세한 내용이나 다른 질문이 있다면 언제든지 물어보세요! 좋은 하루 되세요.

이 글과 비슷한 Q&A