선택자 적용에 대한 질문 드립니다.
미해결
반응형 웹사이트 포트폴리오(App Official Landing Website)
안녕하세요. 선생님. 반응형 웹사이트 제작 마무리까지 따라한 상태인데요. 갑자기 웰컴 버튼에서 패딩값 (윗부분) 이 적용되지 않아서 높이 차이가 있는 것을 발견해서요. 저는 .btn 이렇게 코딩했는데요. 나중에 완성파일과 비교해보니 .welcome-btns .btn {} 이렇게 되어 있어서 바꿔줘보니 문제 없이 padding: 8px가 적용돼서 해결은 됐는데요. 그런데 그 이유가 궁금해서요. css 전체에서 .btn 선택자를 검색해봤는데 다른 코드에서 겹치는 곳은 없었고요. 왜 'ceo시작하기' 은 padding값이 상하좌우 모두 적용됐는데 '사용가 가이드'는 padding 상 부분이 왜 빠진건지 알고 싶어서요. <section class="welcome"> <div class="slideshow"> <img src="images/slide-welcome-01.png"> <img src="images/slide-welcome-02.png"> <img src="images/slide-welcome-03.png"> </div> <div class="welcome-heading"> <span>창의적인 아이디어를 만드는 가장 빠른 방법</span> <h1> An idea solution of startup for your <em id="typing"></em> </h1> <p> 스타트업 메이트 앱이 여러분의 최상의 스타트업 구축을 위해 창의적인 아이디어를 제공하는 데 최선을 다하겠습니다. </p> <div class="welcome-btns"> <a href="#none" class="btn start">CEO 시작하기</a> <a href="#none" class="btn guide">사용자 가이드</a> </div> </div> <div class="mouse"> <span class="wheele"></span> </div> </section> .welcome { /* border: 5px solid #000; */ height: 100vh; position: relative; padding: 0; } .slideshow {} .welcome-heading { position: absolute; top: 50%; transform: translateY(-50%); left: 200px; text-align: center; width: 750px; } .welcome-heading span { font-size: 24px; } .welcome-heading h1 { font-family: 'Source Sans Pro', sans-serif; font-size: 60px; font-weight: 600; line-height: 1.2em; margin-bottom: 30px; margin-top: 15px; } .welcome-heading h1 em { display: block; font-style: normal; color: #eb4d4b; } .welcome-heading p { padding: 0 100px; margin-bottom: 50px; } .welcome-btns {} .btn { display: inline-block; width: 160px; padding: 8px; color: #fff; border-radius: 5px; margin: 5px; transition: 0.5s; } .btn:hover { box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); transform: translateY(-5px); } .btn.start { background-color: #0abde3; } .btn.guide { background-color: #fff; color: #222; }
- .welcome-btns
- jquery
- HTML/CSS
- 반응형-웹