Find 페이지

Notice

목표

Recent Posts

Recent Comments

Link

« 2025/02 »
일	월	화	수	목	금	토
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28

Tags more

Archives

Today

Total

관리 메뉴

짧은코딩

Find 페이지 본문

노마드 코더

Find 페이지

5_hyun 2022. 7. 1. 14:44

Find

-html

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="css/style.css" />
    <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>Find - KoKoa Clone</title>
  </head>
  <body>
    <!-- Top bar -->
    <div class="status-bar">
      <div class="status-bar__column">
        <span>No Service</span>
        <!-- To Do: Wifi Icon -->
        <i class="fa-solid fa-wifi"></i>
      </div>
      <div class="status-bar__column">
        <span>18:43</span>
      </div>
      <div class="status-bar__column">
        <span>110%</span>
        <!-- Battry Icon -->
        <i class="fa-solid fa-battery-full fa-2x"></i>
        <!-- Lightning Icon -->
        <i class="fa-solid fa-bolt"></i>
      </div>
    </div>
    <br />

    <header class="screen-header">
      <h1 class="screen-header__title">Find</h1>
      <div class="screen-header__icons">
        <span class="screen-header__update">.</span>
        <span><i class="fas fa-search fa-lg"></i></span>
        <span><i class="fas fa-cog fa-lg"></i></span>
      </div>
    </header>

    <!-- main으로 감싸 준 이유는 왼쪽 여백을 통일하기 위해서 -->
    <main class="main-screen">
      <div class="find-icons">
        <div class="find-icons__icon">
          <i class="fas fa-qrcode"></i>
          <span>QR Code</span>
        </div>
        <div class="find-icons__icon">
          <i class="far fa-address-book"></i>
          <span>Add by Contacts</span>
        </div>
        <div class="find-icons__icon">
          <i class="fas fa-fingerprint"></i>
          <span>Add by ID</span>
        </div>
        <div class="find-icons__icon">
          <i class="fas fa-envelope"></i>
          <span>Invite</span>
        </div>
      </div>
      <div class="recommended-friends">
        <h6 class="recommended-friends__title">Recommended Friends</h6>
        <span> You have no recommended friends.</span>
      </div>
      <div class="open-chat">
        <div class="open-chat__header">
          <h4>Open Chat</h4>
          <span
            >Go to Openchat Home <i class="fas fa-chevron-right fa-xs"></i
          ></span>
        </div>
      </div>
      <div class="open-post">
        <div class="open-post__column">
          <h5 class="open-post__title">#리버풀</h5>
          <h6 class="open-post__hashtags">#soccer#liverpoll#salah</h6>
          <div class="open-post__members">
            <img
              src="https://upload.wikimedia.org/wikipedia/ko/0/05/%EB%A6%AC%EB%B2%84%ED%92%80_FC_%EB%A1%9C%EA%B3%A0.svg"
            />
            <span class="open-post__member-count">325 members</span>
            <div class="divider"></div>
            <div class="open-post__member-status">Active</div>
          </div>
        </div>
        <div class="open-post__column">
          <div class="open-post__photo">
            <img
              src="https://img.huffingtonpost.com/asset/5d8134a62300005805569ae4.jpeg?ops=1200_630"
            />
            <div class="open-post__heart-count">
              <i class="fas fa-heart fa-xs"></i><span>342</span>
            </div>
          </div>
        </div>
      </div>
      <div class="open-post">
        <div class="open-post__column">
          <h5 class="open-post__title">#리버풀</h5>
          <h6 class="open-post__hashtags">#soccer#liverpoll#salah</h6>
          <div class="open-post__members">
            <img
              src="https://upload.wikimedia.org/wikipedia/ko/0/05/%EB%A6%AC%EB%B2%84%ED%92%80_FC_%EB%A1%9C%EA%B3%A0.svg"
            />
            <span class="open-post__member-count">325 members</span>
            <div class="divider"></div>
            <div class="open-post__member-status">Active</div>
          </div>
        </div>
        <div class="open-post__column">
          <div class="open-post__photo">
            <img
              src="https://img.huffingtonpost.com/asset/5d8134a62300005805569ae4.jpeg?ops=1200_630"
            />
            <div class="open-post__heart-count">
              <i class="fas fa-heart fa-xs"></i><span>342</span>
            </div>
          </div>
        </div>
      </div>
    </main>

    <!-- Bottom bar -->
    <nav class="nav">
      <ul class="nav__list">
        <li class="nav__btn">
          <a class="nav__link" href="friends.html"
            ><i class="far fa-user fa-2x"></i
          ></a>
        </li>
        <li class="nav__btn">
          <a class="nav__link" href="chats.html">
            <!-- 톡 몇 개 왔는지 -->
            <span class="nav__notification badge">1</span>
            <i class="far fa-comment fa-2x"></i>
          </a>
        </li>
        <li class="nav__btn">
          <a class="nav__link" href="find.html"
            ><i class="fas fa-search fa-2x"></i
          ></a>
        </li>
        <li class="nav__btn">
          <a class="nav__link" href="more.html">
            <span class="nav__update">.</span>
            <i class="fas fa-ellipsis-h fa-2x"></i
          ></a>
        </li>
      </ul>
    </nav>

    <!-- fontawesome -->
    <script
      src="https://kit.fontawesome.com/792e436c2b.js"
      crossorigin="anonymous"
    ></script>
  </body>
</html>

-css

.find-icons {
  display: flex;
  justify-content: space-between;
}

.find-icons__icon {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.find-icons i {
  font-size: 35px;
}

.find-icons span {
  margin-top: 18px;
}

.recommended-friends {
  margin: 25px 0px;
  padding: 25px 0px;
  border-top: var(--main-border);
  border-bottom: var(--main-border);
}

.recommended-friends__title {
  font-size: 14px;
  color: var(--gray-color);
}

.recommended-friends span {
  margin: 100px 0;
  display: block;
  text-align: center;
  font-size: 18px;
  color: var(--gray-color);
}

.open-chat__header {
  display: flex;
  justify-content: space-between;
  opacity: 0.8;
  margin-bottom: 25px;
}

.open-chat__header span {
  opacity: 0.6;
}

.open-post {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.open-post__title {
  font-weight: 600;
  margin-bottom: 7px;
}

.open-post__hashtags {
  /* 대문자 */
  text-transform: uppercase;
  opacity: 0.6;
}

.open-post__members {
  margin-top: 7px;
  display: flex;
  align-items: center;
}

.open-post__members img {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  margin-right: 5px;
}

.open-post__member-count {
  opacity: 0.5;
  font-size: 14px;
}

/* 세로 막대 */
.open-post__members .divider {
  width: 2px;
  height: 15px;
  margin: 0 5px;
  background-color: rgba(0, 0, 0, 0.2);
}

.open-post__member-status {
  color: #ffb0e0;
}

.open-post__photo {
  position: relative;
}

.open-post__photo img {
  width: 120px;
  height: 120px;
  border-radius: 10px;
}

.open-post__heart-count {
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  padding: 5px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  position: absolute;
  bottom: 10px;
  right: 10px;
  font-size: 12px;
}

.open-post__heart-count span {
  margin-left: 3px;
}

html에서는 소문자로 적었지만 text-transform: uppercase를 이용해서 대문자로 바꿀 수 있다.

그리고 세로 막대가 필요하면 css에서 만들어 줄 수 있다.

문제점

스크롤을 내리다가 보면 상단바, 하단바가 다른 박스들이랑 겹쳐서 안보이게 된다. 이 점은 꼭 해결해야 겠다.

저작자표시

Comments

짧은코딩

Find 페이지 본문

Find 페이지

Find

문제점

티스토리툴바