묻고 답해요
141만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결
box-sizing : border-box 전체 선택자 질문입니다
안녕하세요 선생님,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%; }
-
미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
강의 중에 box-sizing 부분 궁금해서요.
순서 체크 가상클래스 활용한 실전 예제 제작 (개인 프로필 카드 UI 호버 이펙트) 18.33 에서요. 하나의 선택자 안에서 box-sizing: border-box;를 2번을 해주셨는데요. 이게 순차적으로 적용되는 우선순위 문제 때문인가요? .content { width: inherit; height: inherit; position: absolute; top: 100%; left: 0; padding: 20px; box-sizing: border-box; background: linear-gradient(to top, crimson, transparent); color: #fff; text-align: center; padding-top: 150px; transition: 0.5s; } 크롬에서 개발자도구 들어가봤는데요. 위의 box-sizing 취소선으로 그어져 있는데요. 이게 불필요해서 그런 건지 잘 모르겠습니다. 선생님 그리고 별도의 질문이긴 한데요. 코딩하면서 개발자도구를 보면서 공부하는 것이 도움이 되는 건가요? 봐주셔서 감사합니다.
-
해결됨[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)
box-sizing: border-box
선생님 안녕하세요 강의에서 box 클래스안에 <div><div> <div><div> <div><div> 여기다가 box-sizing:border-box; 를 넣어주면 div의 border:width부분이 서로 겹치게 되는건가요? 그렇게 이해하면 될까요?
