프로그래머스 클론2

연성·2021년 7월 15일

CSS clone html

프로그래머스 클론

목록 보기

3/4

1. 진행 상황

전체 html
전체 css(일부 제외)

2. 어려웠던 점

HTML
1. 클래스 이름 시멘틱하게 정하기
1. 한 줄에 원하는만큼 배치하기 위해 section을 li로 감쌌는데 fun, cool, sexy 하지 못한 것 같다
CSS
1. flexbox 한 줄에 원하는만큼 배치하기
2. 특정 요소 hover 했을 때 다른 요소에 변화주기

3. 진행 상황

index.html

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>코딩테스트 연습 | 프로그래머스</title>
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="style.css" />
    <script
      src="https://kit.fontawesome.com/dc7bf1e141.js"
      crossorigin="anonymous"
    ></script>
  </head>
  <body>
    <nav class="top-nav">
      <div class="logo">
        <a href="#">
          <img
            class="logo-mobile"
            src="./assets/logo-mobile.png"
            alt="mobile logo"
          />
        </a>
        <a href="#">
          <img
            class="logo-desktop"
            src="./assets/logo-desktop.png"
            alt="desktop logo"
          />
        </a>
        <i class="fas fa-bars"></i>
      </div>
      <ul class="top-nav-global">
        <li class="nav-global-item">
          <a href="#"> 탑프로그래머스 </a>
        </li>
        <li class="nav-global-item">
          <a href="#">실력체크</a>
        </li>
        <li class="nav-global-item">
          <a href="#">개발자 채용</a>
        </li>
        <li class="nav-global-item">
          <a href="#">테크 피드 </a>
        </li>
        <li class="divider"></li>
        <li class="nav-global-item">
          <a href="#">코딩테스트 연습</a>
        </li>
        <li class="nav-global-item">
          <a href="#">프로그래밍 강의</a>
        </li>
      </ul>
      <ul class="top-nav-user-menu">
        <li class="user-menu-item resume">
          <a href="#">
            <i class="far fa-sticky-note"></i>
          </a>
        </li>
        <li class="user-menu-item notification">
          <a href="#"><i class="fas fa-bell"></i></a>
        </li>
        <li class="user-menu-item">
          <a href="#"><i class="fas fa-user-circle"></i></a>
        </li>
      </ul>
    </nav>
    <div class="challenges-tabs-wrap">
      <ul class="nav-tabs">
        <li class="nav-item">
          <a class="active" href="#"
            >코딩테스트 고득점 <span lang="en">Kit</span></a
          >
        </li>
        <li class="nav-item">
          <a href="#">SQL 고득점 <span lang="en">Kit</span></a>
        </li>
        <li class="nav-item"><a href="#">모든 문제</a></li>
      </ul>
    </div>
    <div class="main">
      <div class="banner-wrap">
        <div class="banner"></div>
      </div>
      <div class="challenge-container">
        <div class="challenge-container-header">
          <div class="col-left">
            <h2 class="container-title">
              코딩테스트 고득점 <span lang="en">Kit</span>
            </h2>
            <p class="container-desc">
              코딩테스트에는 어떤 알고리즘/자료구조가 출제될까요? <br />
              사람들은 어떤 문제를 어려워할까요? 국내에서 코딩테스트를 가장 많이
              운영해온 프로그래머스 팀이
              <strong>
                코딩테스트 결과를 분석해서 만든 고득점
                <span lang="en">Kit</span></strong
              >.코딩테스트에 자주 나오는 유형, 사람들이 많이 틀리는 유형을
              간추렸습니다.
            </p>
          </div>
          <div class="col-right">
            <img src="./assets/practice-kit.png" alt="practice kit" />
          </div>
        </div>
        <ul class="card-list">
          <li class="col-item">
            <section class="challenge-card hash">
              <a href="#">
                <i class="fas fa-arrow-right"></i>
                <h3 class="challenge-card-title">해시</h3>
                <p class="challenge-card-desc">
                  해시는 key-value쌍으로 데이터를 저장하는 자료구조입니다.
                </p>
                <dl class="card-label-group">
                  <div class="card-label-item">
                    <dt>출제빈도</dt>
                    <dd>높음</dd>
                  </div>
                  <div class="card-label-item">
                    <dt>평균 점수</dt>
                    <dd>보통</dd>
                  </div>
                  <div class="card-label-item">
                    <dt>문제 세트</dt>
                    <dd>4 / 4</dd>
                  </div>
                </dl>
              </a>
            </section>
          </li>
          <li class="col-item">
            <section class="challenge-card stack-queue">
              <a href="#">
                <i class="fas fa-arrow-right"></i>
                <h3 class="challenge-card-title">스택/큐</h3>
                <p class="challenge-card-desc">
                  LIFO, FIFO, push &amp pop! 스택과 큐를 이용해서 문제를
                  풀어보세요.
                </p>
                <dl class="card-label-group">
                  <div class="card-label-item">
                    <dt>출제빈도</dt>
                    <dd>보통</dd>
                  </div>
                  <div class="card-label-item">
                    <dt>평균 점수</dt>
                    <dd>높음</dd>
                  </div>
                  <div class="card-label-item">
                    <dt>문제 세트</dt>
                    <dd>4 / 4</dd>
                  </div>
                </dl>
              </a>
            </section>
          </li>
          <li class="col-item">
            <section class="challenge-card heap">
              <a href="#">
                <i class="fas fa-arrow-right"></i>
                <h3 class="challenge-card-title">힙(Heap)</h3>
                <p class="challenge-card-desc">
                  힙은 특정한 규칙을 가지는 트리로, 힙을 이용해서 우선순위 큐를
                  구현할 수 있습니다.
                </p>
                <dl class="card-label-group">
                  <div class="card-label-item">
                    <dt>출제빈도</dt>
                    <dd>보통</dd>
                  </div>
                  <div class="card-label-item">
                    <dt>평균 점수</dt>
                    <dd>높음</dd>
                  </div>
                  <div class="card-label-item">
                    <dt>문제 세트</dt>
                    <dd>2 / 3</dd>
                  </div>
                </dl>
              </a>
            </section>
          </li>
          <li class="col-item">
            <section class="challenge-card sort">
              <a href="#">
                <i class="fas fa-arrow-right"></i>
                <h3 class="challenge-card-title">정렬</h3>
                <p class="challenge-card-desc">
                  정렬을 이용해서 문제를 효율적으로 풀어보세요.
                </p>
                <dl class="card-label-group">
                  <div class="card-label-item">
                    <dt>출제빈도</dt>
                    <dd>높음</dd>
                  </div>
                  <div class="card-label-item">
                    <dt>평균 점수</dt>
                    <dd>높음</dd>
                  </div>
                  <div class="card-label-item">
                    <dt>문제 세트</dt>
                    <dd>3 / 3</dd>
                  </div>
                </dl>
              </a>
            </section>
          </li>
          <li class="col-item">
            <section class="challenge-card brute-force">
              <a href="#">
                <i class="fas fa-arrow-right"></i>
                <h3 class="challenge-card-title">완전탐색</h3>
                <p class="challenge-card-desc">
                  무식해 보여도 사실은 최고의 방법일 때가 있지요.
                </p>
                <dl class="card-label-group">
                  <div class="card-label-item">
                    <dt>출제빈도</dt>
                    <dd>높음</dd>
                  </div>
                  <div class="card-label-item">
                    <dt>평균 점수</dt>
                    <dd>낮음</dd>
                  </div>
                  <div class="card-label-item">
                    <dt>문제 세트</dt>
                    <dd>3 / 3</dd>
                  </div>
                </dl>
              </a>
            </section>
          </li>
          <li class="col-item">
            <section class="challenge-card greedy">
              <a href="#">
                <i class="fas fa-arrow-right"></i>
                <h3 class="challenge-card-title">탐욕법(Greedy)</h3>
                <p class="challenge-card-desc">
                  부분적인 최적해가 전체적인 최적해가 되는 마법!
                </p>
                <dl class="card-label-group">
                  <div class="card-label-item">
                    <dt>출제빈도</dt>
                    <dd>낮음</dd>
                  </div>
                  <div class="card-label-item">
                    <dt>평균 점수</dt>
                    <dd>낮음</dd>
                  </div>
                  <div class="card-label-item">
                    <dt>문제 세트</dt>
                    <dd>3 / 6</dd>
                  </div>
                </dl>
              </a>
            </section>
          </li>
          <li class="col-item">
            <section class="challenge-card dynamic-programming">
              <a href="#">
                <i class="fas fa-arrow-right"></i>
                <h3 class="challenge-card-title">
                  동적계획법(Dynamic Programming)
                </h3>
                <p class="challenge-card-desc">
                  불필요한 계산을 줄이고, 효율적으로 최적해를 찾아야만 풀리는
                  문제들입니다.
                </p>
                <dl class="card-label-group">
                  <div class="card-label-item">
                    <dt>출제빈도</dt>
                    <dd>낮음</dd>
                  </div>
                  <div class="card-label-item">
                    <dt>평균 점수</dt>
                    <dd>낮음</dd>
                  </div>
                  <div class="card-label-item">
                    <dt>문제 세트</dt>
                    <dd>4 / 4</dd>
                  </div>
                </dl>
              </a>
            </section>
          </li>
          <li class="col-item">
            <section class="challenge-card dfs-bfs">
              <a href="#">
                <i class="fas fa-arrow-right"></i>
                <h3 class="challenge-card-title">
                  깊이/너비 우선 탐색(DFS/BFS)
                </h3>
                <p class="challenge-card-desc">
                  깊이/너비 우선 탐색을 사용해 원하는 답을 찾아보세요.
                </p>
                <dl class="card-label-group">
                  <div class="card-label-item">
                    <dt>출제빈도</dt>
                    <dd>높음</dd>
                  </div>
                  <div class="card-label-item">
                    <dt>평균 점수</dt>
                    <dd>낮음</dd>
                  </div>
                  <div class="card-label-item">
                    <dt>문제 세트</dt>
                    <dd>3 / 4</dd>
                  </div>
                </dl>
              </a>
            </section>
          </li>
          <li class="col-item">
            <section class="challenge-card binary-search">
              <a href="#">
                <i class="fas fa-arrow-right"></i>
                <h3 class="challenge-card-title">이분탐색</h3>
                <p class="challenge-card-desc">
                  이분탐색 기법을 이용해 효율적으로 값을 찾아보세요.
                </p>
                <dl class="card-label-group">
                  <div class="card-label-item">
                    <dt>출제빈도</dt>
                    <dd>낮음</dd>
                  </div>
                  <div class="card-label-item">
                    <dt>평균 점수</dt>
                    <dd>낮음</dd>
                  </div>
                  <div class="card-label-item">
                    <dt>문제 세트</dt>
                    <dd>2 / 2</dd>
                  </div>
                </dl>
              </a>
            </section>
          </li>
          <li class="col-item">
            <section class="challenge-card graph">
              <a href="#">
                <i class="fas fa-arrow-right"></i>
                <h3 class="challenge-card-title">그래프</h3>
                <p class="challenge-card-desc">
                  엣지를 지나 그래프의 노드를 탐험해봅시다.
                </p>
                <dl class="card-label-group">
                  <div class="card-label-item">
                    <dt>출제빈도</dt>
                    <dd>높음</dd>
                  </div>
                  <div class="card-label-item">
                    <dt>평균 점수</dt>
                    <dd>낮음</dd>
                  </div>
                  <div class="card-label-item">
                    <dt>문제 세트</dt>
                    <dd>2 / 3</dd>
                  </div>
                </dl>
              </a>
            </section>
          </li>
        </ul>
      </div>
    </div>
    <footer>
      <div class="footer-menu-wrap">
        <ul class="footer-menu">
          <li class="footer-menu-title">서비스</li>
          <li class="footer-menu-item"><a></a>개발자용 프로그래머스</li>
          <li class="footer-menu-item"><a></a>기업용 프로그래머스</li>
          <li class="footer-menu-item"><a></a>프로그래머스 스쿨</li>
        </ul>
        <ul class="footer-menu">
          <li class="footer-menu-title">약관</li>
          <li class="footer-menu-item"><a>개인정보 처리방침</a></li>
          <li class="footer-menu-item"><a>이용약관</a></li>
        </ul>
        <ul class="footer-menu">
          <li class="footer-menu-title">문의</li>
          <li class="footer-menu-item"><a>FAQ 문의</a></li>
          <li class="footer-menu-item"><a>교육 결제, 환불 관련 문의</a></li>
          <li class="footer-menu-item"><a>코딩 테스트(응시자) 문의</a></li>
        </ul>
        <ul class="footer-menu">
          <li class="footer-menu-title">고객센터</li>
          <li class="footer-menu-item">기업 서비스 : 02-539-1886</li>
          <li class="footer-menu-item">교육 내용 관련 문의 : 02-539-1885</li>
          <li class="footer-menu-item">
            제휴 및 서비스 운영, 기타 문의: 02-539-1882
          </li>
          <li class="footer-menu-item operation-time">
            문의하기 운영시간 : 오전 9시 ~ 오후 6시 (주말 및 공휴일 휴무) <br />
            점심시간 : 오후 12시 ~ 오후 1시
          </li>
        </ul>
      </div>
      <div class="footer-address">
        <a class="link-brand" href="#">2021 프로그래머스</a>
        <p>
          (주)그렙 / 공동대표 이확영, 임성수 / 서울특별시 강남구 테헤란로 151,
          723호(역삼동, 역삼하이츠빌딩) / 사업자등록번호 220-88-75699 /
          통신판매업신고 제 2014-서울강남-03241호 / 직업정보제공사업 신고번호
          J1200020180027 / 유료직업소개사업 등록번호
          (국내)제2019-3220237-14-5-00020호
        </p>
      </div>
    </footer>
  </body>
</html>

style.css

* {
  box-sizing: content-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: "Inter", sans-serif;
  color: #263747;
  height: 100vh;
}

a {
  text-decoration: none;
  color: #263747;
}

ul {
  list-style: none;
}

/* Mobile */
/* nav */
.top-nav {
  background-color: #0c151c;
  padding: 6px 16px;
}

.top-nav .logo {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.top-nav .logo-mobile {
  display: block;
  width: 24px;
}

.top-nav .logo-desktop {
  display: none;
}

.top-nav .logo i {
  width: 24px;
  color: #fff;
}

.top-nav-global,
.top-nav-user-menu {
  display: none;
}

/* nav-tabs */
.challenges-tabs-wrap {
  margin-bottom: 24px;
  border-bottom: 1px solid #dee2e6;
}

.nav-tabs {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.nav-tabs li {
  margin-left: 16px;
}

.nav-tabs li:first-child {
  margin-left: 0;
}

.nav-tabs .nav-item a {
  display: block;
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: -0.009em;
  padding: 8px 0;
  transition: color 100ms ease-in-out;
}

.nav-tabs .nav-item a.active {
  color: #0078ff;
  box-shadow: inset 0 -0.1875rem #0078ff;
}

.nav-tabs .nav-item a:hover {
  color: #0078ff;
}

.banner-wrap {
  padding: 0 16px;
  margin-bottom: 40px;
}

/* banner */
.banner {
  height: 160px;
  border-radius: 12px;
  margin: 0 auto;
  background-image: url(https://grepp-programmers.s3.amazonaws.com/image/origin/production/banner/96392/f82e39e9-dab2-4373-acf6-53c2c89e47fb.png);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* main */
.main {
  border-bottom: 1px solid #dee2e6;
  padding-bottom: 40px;
}

/* container */
.challenge-container {
  padding: 0 16px;
}

.challenge-container-header {
  padding: 0 16px;
  margin-bottom: 24px;
}

.container-title {
  font-size: 22px;
  line-height: 1.4;
  margin-bottom: 8px;
  letter-spacing: -0.006136363636363637em;
}

.container-desc {
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: -0.009;
}

.container-desc strong {
  box-shadow: inset 0 -0.5rem #ffeb3b;
  font-weight: 400;
}

.challenge-container-header .col-right {
  display: none;
}

.card-list .col-item {
  padding: 0 0 16px 0;
}

.challenge-card {
  position: relative;
  padding: 24px 16px;
  border-top: 1px solid #d7e2eb;
  transition: box-shadow 80ms ease-in-out, color 80ms ease-in-out;
}

.challenge-card:hover {
  box-shadow: 0.0625rem 0.1875rem rgb(20 20 94 / 12%),
    0 0.1875rem 0.4375rem rgb(20 20 94 / 10%);
}

.challenge-card i {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 24px;
  color: #b2c0cc;
}

.challenge-card-title {
  font-size: 18px;
  line-height: 1.6;
  letter-spacing: -0.009em;
  margin-bottom: 8px;
}

.challenge-card-desc {
  font-size: 14px;
  line-height: 1.5714285714;
  letter-spacing: -0.0071428571428571435em;
  margin-bottom: 24px;
  color: #98a8b9;
}

.card-label-group {
  display: flex;
  justify-content: space-between;
}

.card-label-item:first-child {
  margin-left: 0;
  padding: 0;
  border: none;
}

.card-label-item dt {
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: -0.00975em;
  color: #0078ff;
}

.card-label-item dd {
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: -0.009em;
  color: #98a8b9;
}

/* footer */
footer {
  padding: 40px 16px;
}

.footer-menu {
  margin-bottom: 24px;
}

.footer-menu-title,
.footer-menu-item {
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: -0.009em;
  font-weight: 700;
  color: #44576c;
  margin-bottom: 8px;
}

.footer-menu-item {
  font-weight: 400;
  margin-bottom: 2px;
}

.footer-menu-item.operation-time {
  font-size: 12px;
  color: #98a8b9;
  margin-top: 8px;
}

.footer-address .link-brand {
  display: block;
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: -0.009em;
  font-weight: 700;
  color: #98a8b9;
  margin-bottom: 8px;
}

.footer-address p {
  font-size: 12px;
  line-height: 1.6;
  color: #98a8b9;
  letter-spacing: -0.008333333333333333em;
}

/* Desktop */
@media screen and (min-width: 992px) {
  /* nav */
  .top-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: color 250ms ease-in-out;
  }

  .top-nav .logo-mobile,
  .top-nav .logo i {
    display: none;
  }

  .top-nav .logo-desktop {
    display: block;
    width: 182px;
  }

  .top-nav-global a:hover,
  .top-nav-user-menu i:hover {
    color: #fff;
  }

  .top-nav-global {
    display: flex;
  }

  .top-nav-user-menu {
    display: flex;
  }
  .top-nav-user-menu .nav-global-item a {
    display: block;
  }

  .nav-global-item a {
    padding: 4px 8px;
    font-size: 16px;
    line-height: 1.6;
    letter-spacing: -0.009em;
    color: #b2c0cc;
    font-weight: 500;
  }

  .top-nav-global .divider::after {
    content: "|";
    font-size: 8px;
    margin: 0 8px;
    color: #44576c;
  }

  .top-nav-user-menu i {
    width: 24px;
    color: #b2c0cc;
    padding: 8px 4px;
  }

  /* nav-tabs */
  .nav-tabs a {
    font-size: 16px;
  }

  /* main */
  .main {
    padding-bottom: 80px;
  }
  /* banner */
  .banner {
    height: 218px;
  }

  /* container */
  .challenge-container {
    border: 1px solid #d7e2eb;
    border-radius: 12px;
    margin: 0 16px;
    padding: 24px 16px 16px 16px;
  }
  .challenge-container-header {
    display: flex;
  }

  .challenge-container-header .col-left {
    margin-right: 80px;
  }

  .container-title {
    font-size: 26px;
    line-height: 1.4;
  }

  .container-desc {
    font-size: 16px;
    line-height: 1.5;
  }

  .challenge-container-header .col-right {
    display: block;
  }

  .challenge-container-header .col-right img {
    display: block;
    width: 300px;
  }

  .card-list {
    display: flex;
    flex-wrap: wrap;
  }

  .card-list .col-item {
    box-sizing: border-box;
    padding: 0 8px;
    flex-basis: 33.3333%;
  }

  .card-list li:nth-child(3n + 1) {
    padding-left: 0;
  }

  .card-list li:nth-child(3n) {
    padding-right: 0;
  }

  .challenge-card:hover i {
    color: #0078ff;
  }

  /* footer */
  footer {
    margin: 0 16px;
  }
  .footer-menu-wrap {
    display: flex;
  }
  .footer-menu {
    margin-right: 40px;
  }
  .footer-menu:last-child {
    margin-right: 0;
  }
}

/* Over 1200px Destop */
@media screen and (min-width: 1200px) {
  .main {
    margin: 0 auto;
    max-width: 1200px;
  }
  .footer-wrap {
    margin: 0 auto;
    max-width: 1200px;
  }
}

4. 남은 부분

js로 이미지 슬라이더
타블렛 대응 -> 글꼴까지는 안 하고 한 줄에 배치되는 아이템 개수만 조정할 예정

연성

이전 포스트

프로그래머스 클론 1

다음 포스트

프로그래머스 클론2

프로그래머스 클론

1. 진행 상황

2. 어려웠던 점

3. 진행 상황

index.html

style.css

4. 남은 부분

프로그래머스 클론 1

프로그래머스 클론 3

0개의 댓글