미해결
반응형 웹사이트 포트폴리오(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;
}
