한 번에 끝내는 파이썬 웹 개발 초격차 패키지 105일차

웹 & 프론트엔드 기본

GitHub 예제

Hero Contents (1)

---

GitHub Hero Contents

index.html

  <header>
	<!-- 중략 -->
  </header>

  <section class="hero">
    <div class="container">
        <div class="row">
            <div class="col-7"></div>
          <div class="headline">
            <!--HERO-->
            <h1 class="text-white">Where the world builds software</h1>
            <p class="text-white-50">Millions of developers and companies build, ship, and maintain their software on GitHub—the largest and most advanced development platform in the world.</p>
          </div>
        </div>
        <div class="row">
          <div class="col-5">
            <form>
              <input type="text" class="form-control form-control-lg mb-3" placeholder="Email address">
              <input type="password" class="form-control form-control-lg mb-3" placeholder="Password">
              <div class="d-grid">
                <button class="btn btn-primary btn-lg">Sign up for GitHub</button>
              </div>
            </form>
          </div>
        </div>
    </div>
  </section>
	<!-- 중략 -->

class

• form-control form-control-lg = 폼을 크게 (lg : Large)
• btn btn-primary btn-lg = 파란색 버튼 크게

main.css

/* 중략 */

section.hero {
    background-color: #040d22;
}
section.hero .container {
    padding-top: 160px;
    padding-bottom: 160px;
}
section.hero .headline h1 {
    font-size: 68px;
    font-weight: 700;
    letter-spacing: -2px;
}
section.hero .headline p {
    font-size: 26px;
}

section.hero {

• background-color: #040d22 = 배경 색상

}
section.hero .container {

• padding-top: 160px = 내부 여백 (위)
• padding-bottom: 160px = 내부 여백 (아래)

}
section.hero .headline h1 {

• font-size: 68px = 폰트 사이즈
• font-weight: 700 = 폰트 두께
• letter-spacing: -2px = 글자와 글자 사이의 간격

}
section.hero .headline p {

• font-size: 26px = 폰트 사이즈

}

Hero Contents (1)

---

 

콘텐츠 부분에 대해 학습해보는 시간을 가졌다. 콘텐츠의 좌측 부분을 먼저 설정하는 과정에서 유저 이메일 정보 패스워드 정보 값을 받아서 회원가입을 진행하는 폼 양식을 정해서 진행하게 된다. 정렬이 맞지 않아 정렬 부분을 손대면서 글자와 다르게 폼 양식 부분을 정렬 진행하였다. CSS를 통해 배경 색상부터 여백 설정 및 글자와의 간격을 통해서 콘텐츠 부분을 작성하게 되었다. 미완성 단계이지만 하나하나 퍼즐 맞추듯 진행하다 보니 어느 정도 어려운 코드들이 눈에 익어가고 있음을 알게 된다.

105일 차는 여기서 마무리하고자 합니다.

패스트캠퍼스 링크 :https://bit.ly/37BpX

패스트캠퍼스 [직장인 실무교육]