프로그래머스 클론 1

23433 단어 clonehtmlCSSCSS

1. 진행 상황

  • 상단 메뉴
  • 네비게이션
  • 광고 배너

2. 어려웠던 점

  • HTML
    • 클래스 이름 시멘틱하게 정하기
  • CSS
    • .active의 border-bottom이 패딩 아래로 내려오는 문제
    • 아이폰 5 화면이 너무 작아 tab-nav 목록이 두 줄로 내려오는 문제

mark-down li 하위 li 만드는 게 제일 어렵다.
방법을 알았다.

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;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">
      <img src="./assets/logo-mobile.png" alt="" />
      <i class="fas fa-bars"></i>
    </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="banner-wrap">
      <div class="banner"></div>
    </div>
  </body>
</html>

style.css

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

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

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

ul {
  list-style: none;
}

/* Mobile */
/* nav */
.top-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #0c151c;
  padding: 6px 16px;
}

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

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

/* nav-tabs */
.challenges-tabs-wrap {
  margin-bottom: 24px;
  border-bottom: 1px solid #dee2e6;
  /* box-shadow: inset 0 -0.0625rem #d7e2eb; */
}

.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;
  border-bottom: 3px solid #0078ff;
}

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

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

.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;
}
[Spring] @Resource & @Qualifier
Access 2000, Access 2002 또는 Access 2003에서 데이터베이스에서 테이블을 삭제하는 방법을 복원합니다.

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage