본문 바로가기
오즈코딩스쿨/[HTML,CSS]

07. 도전과제. 더덕마켓 클론코딩 (1~6)

by Sowon Kim 2025. 9. 1.
더보기 
<!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>
  <style>
    *{
      box-sizing: border-box;
    }
    html{
      font-size: 16px;
    }
    body{
      margin: 0;
    }
    .flex{
      display: flex;
    }
    .main{
      padding: 4rem 0 5rem;   /*  header 의 높이가 64px 이라서 ( 16font x 4rem = 64px )
                                  4rem 을 상단에 넣어서, header 와 겹치지 않게 공간을 주었다 */
    }
  </style>
  <link href="header.css" rel="stylesheet">
  <link href="info.css" rel="stylesheet">
  <link href="notice.css" rel="stylesheet">
  <link href="banner.css" rel="stylesheet">
  <link href="footer.css" rel="stylesheet">
</head>
<body>
  <div class="container">
    <header class="header">
      <div class="header-content flex">
        <div class="header-content__logo">더덕마켓</div>
        <nav class="header-content__nav flex">
          <ul>
            <li>중고거래</li>
            <li>동네가게</li>
            <li class="active">알바</li>
            <li>부동산 직거래</li>
            <li>중고차 직거래</li>
          </ul>
        </nav>
        <div class="header-content__input flex">
          <span class="icon glass">
            <input type="button" value="&#128269;">
          </span>
          <span>
            <input type="text" class="search" placeholder="물품이나 동네를 검색해보세요">
          </span>
          <span class="icon menu">
            <input type="button" value="&#9776;">
          </span>
          <span>
            <input type="button" class="chat" value="채팅하기">
          </span>
        </div>
      </div>
    </header>

    <main class="main">
      <section class="info">
        <div class="info__text">
          <h1>우리 동네에서 찾는<br>더덕알바</h1>
          <p>걸어서 10분 거리의<br>동네 알바들 여기 다 있어요.</p>
        </div>
      </section>
    </main>
  </div>
</body>
</html>
header.header{
  position: fixed;                /* ✅ 위치 고정 */
  top: 0;                         /* ✅ 상단 배치 */
  width: 100%;                    /* 너비 넓이 전체 */
  z-index: 999;                   /* ✅ 레이어드 가장 상단 */
  background-color: #FFFFFF; 
  color: #000000;
}
.header-content{
  width: 100%;                    /* ✅ 너비 넒이 전체 */
  max-width: 75rem;               /* ✅ 하지만, 최대 너비 75rem 까지만 */
  height: 4rem;                   /* 높이 */
  padding: 0.75rem 1rem;          /* 위, 좌우 */
  margin: auto;

  justify-content: space-between; /* .header-content 는 index.html 에 보면, 뒤에 flex 라고도 적혀있다. flex 일 경우에 사용하는 justify 사용가능 */
                                  /* space-between = 양끝 정렬, 사이에 동일 여백 */
}
.header-content__logo{
  color: #8e694b;
  font-size: 2rem;
  font-weight: 900;

  height: 1em;
  margin-right: 40px;
  line-height: 40px;
}
.header-content__nav {
  align-items: center;
  padding: 0 2.5rem 0 0;
  flex-grow: 1;
}
.header-content__nav ul{
  padding: 0;
  margin: 0;
  list-style-type: none;

}
.header-content__nav ul li{
  display: inline-block;
  margin-right: 30px;
  font-size: 1.13rem;
  font-weight: 600;
}
.header-content__nav ul li.active{
  color: #8E694B;
}
.header-content__input{
  justify-content: center;
  align-items: center;
}
.header-content__input .search{
  width: 18rem;
  height: 2.5rem;
  padding: 0.5625rem 0.75rem;
  margin-right: 1rem;
  background-color: #f2f3f6;
  border: none;
  border-radius: 0.375rem;
  font-size: 1rem;
}
.header-content__input .chat{
  line-height: 1.3;
  font-size: 1rem;
  padding: 0.5rem 1rem;
  background-color: #ffffff;
  border: 0.5px solid #C5C6C9;
  border-radius: 0.25rem;
  font-weight: 600;
}
.header-content__input .icon input{
  margin-right: 1rem;
  border: none;
  padding: 0;
  font-size: 1.5rem;
  background-color: transparent;
}
.header-content__input .icon{
  display: none;
}

@media screen and (max-width: 1192px){
  .header-content__input .search{
    display: none;
  }
  .header-content__input .glass{
    display: block;
  }

}
@media screen and (max-width: 948px){
  .header-content__input .chat, .header-content__nav{
    display: none;
  }
  .header-content__input .menu{
    display: block;
  }

}
.info{
  width: 100%;
  height: 19.6875rem;
  background-color: #C59B79;
}
.info__text{
  max-width: 48rem;
  margin: auto;
  padding: 3rem 1rem 0;
}
.info__text h1{
  margin: 0;
  font-size: 2rem;
  line-height: 3.2rem;
}
.info__text p{
  margin: 0.5rem 0 0;
  font-size: 1.125rem;
  line-height: 1.5rem;
}
@media screen and (max-width: 768px) {
  .info{
    height: 18.375rem;
  }
  .info__text{
    padding: 1.5rem 1rem 0;
  }
  .info__text h1{
    line-height: 2rem;
    font-size: 1.5rem;
  }
  .info__text p{
    display: none;
  }
}

 

저작자표시 비영리 변경금지 (새창열림)

'오즈코딩스쿨 > [HTML,CSS]' 카테고리의 다른 글

06. Chapter6. CSS 중급 속성 다루기 (9 플렉스 실습)  (3) 2025.09.01
[HTML,CSS] 5일차 ❻  (5) 2025.08.27
[HTML,CSS] 4일차 ❺  (2) 2025.08.24
[HTML,CSS 과제] 3일차  (0) 2025.08.19
[HTML,CSS 과제] 2일차  (1) 2025.08.19

관련글

티스토리툴바