인프런 커뮤니티 질문&답변

안녕하세요. 선생님.

반응형 웹사이트 제작 마무리까지 따라한 상태인데요.

갑자기 웰컴 버튼에서 패딩값 (윗부분) 이 적용되지 않아서 높이 차이가 있는 것을 발견해서요.

저는 .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;

}