본문 바로가기
클론코딩/노마드코더 코코아톡

[클론코딩/코코아톡] 노마드 코더 코코아톡 클론코딩 #6 Setting Screen, Chat Screen

by 기록하는_사람 2022. 9. 28.

Setting Screen - header

(setting.html)

    <!-- Header -->
    <header class="alt-header">
        <div class="alt-header__column">
            <a href="more.html">
            <i class="fa-solid fa-angle-left fa-2x"></i>
            </a>
        </div>
        <div class="alt-header__column">
            <h1 class="alt-header__title">Settings</h1>
        </div>
        <div class="alt-header__column">
            <span><i class="fas fa-magnifying-glass fa-lg"></i></span>
        </div>
    </header>

- 재사용 가능하도록 따로 파일 생성.

(alt-screen-header.css)

.alt-header {
    margin-top: 30px;
    padding: var(--horizontal-space);
    margin-bottom: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.alt-header__title {
    font-size: 26px;
    font-weight: 600;
}

.alt-header__column:first-child {
    margin-right: auto;
}

.alt-header__column:last-child {
    margin-left: auto;
}

 

Setting Screen - main screen

(setting.html)

    <!-- Main Screen -->
    <main class="main-screen">
        <ul class="settings-list">
            <li class="settings__setting">
                <div class="settings_setting-column">
                    <i class="fa-solid fa-bullhorn"></i>
                    <span>Notices</span>
                </div>
                <div class="settings_setting-column"></div>
            </li>

            <li class="settings__setting">
                <div class="settings_setting-column">
                    <i class="fa-solid fa-flask"></i>
                    <span>KoKoa Lab</span>
                </div>
                <div class="settings_setting-column"></div>
            </li>

            <li class="settings__setting">
                <div class="settings_setting-column">
                    <i class="fa-solid fa-circle-info"></i>
                    <span>Version</span>
                </div>
                <div class="settings_setting-column">Latest Version</div>
            </li>
        </ul>
    </main>

(settings.css)

.settings__setting {
    padding: 20px 0px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.settings__setting i {
    margin-right: 20px;
    font-size: 22px;
    opacity: 0.8;
}

.settings_setting-column:last-child {
    opacity: 0.5;
}

 

Chat Screen - header

- chats.html의 user-component 링크 연결.

(chats.html)

    <!-- User Component -->
    <main class="main-screen">
        <a href="chat.html">
            <div class="user-component">
                <div class="user-component__column">
                    <img src="img/user_img.jpg" class="user-component__avatar"/>
                    <div class="user-component__text">
                        <h4 class="user-component__title user-component__title-sm">Smile:)</h4>
                        <h6 class="user-component__subtitle">Be Happy Don't Worry</h6>
                    </div>
                </div>
                <div class="user-component__column">
                    <span class="user-component__time">08:08</span>
                    <div class="badge">1</div>
                </div>
            </div>
        </a>
    </main>

 

- chat.html 생성.

 

- header 텍스트 변경 및 아이콘 추가.

(chat.html)

    <!-- Header -->
    <header class="alt-header">
        <div class="alt-header__column">
            <a href="chats.html">
            <i class="fa-solid fa-angle-left fa-2x"></i>
            </a>
        </div>
        <div class="alt-header__column">
            <h1 class="alt-header__title">Hani</h1>
        </div>
        <div class="alt-header__column">
            <span><i class="fas fa-magnifying-glass fa-lg"></i></span>
            <span><i class="fa-solid fa-bars fa-lg"></i></span>
        </div>
    </header>

(alt-screen-header.css)

...
.alt-header__column span:last-child {
    margin-left: 20px;
}

 

 

- 배경색 추가.

(chat.html)

<body id="chat-screen">
...

(chat.css)

#chat-screen {
    background-color: #abc1d1;
}

 

- 글씨가 중앙에 오도록 설정.

(alt-screen-header.css)

.alt-header {
    margin-top: 30px;
    padding: var(--horizontal-space);
    margin-bottom: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.alt-header__column {
    width: 33%;
}

.alt-header__title {
    font-size: 26px;
    font-weight: 600;

}

.alt-header__column:first-child {
    margin-right: auto;
}

.alt-header__column:nth-child(2) {
    text-align: center;
}

.alt-header__column:last-child {
    margin-left: auto;
    display: flex;
    justify-content: flex-end;
}

.alt-header__column span:last-child {
    margin-left: 20px;
}

 

Chat Screen - main screen_time stamp

- chat-screen의 alt-header 고정.

  스크롤 할 때 글 보이지 않도록 배경색 설정.

 

- z-index : 레이어 순서 지정할 때 사용.

 

- time stamp 생성.

(chat.html)

    <!-- Main Screen -->
    <main class="main-screen main-chat">
        <!-- Time Stamp -->
        <div class="chat__timestamp">
            Monday, June 13, 2022
        </div>
    </main>

(chat.css)

#chat-screen {
    background-color: #abc1d1;
    height: 11000vh;
}

#chat-screen .alt-header {
    top: 0px;
    position: fixed;
    width: 100%;
    box-sizing: border-box;
    background-color: #abc1d1;
}

#chat-screen .status-bar {
    background-color: #abc1d1;
}

.main-chat {
    margin-top: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.chat__timestamp {
    color: white;
    background-color: #92a4b2;
    padding: 10px 15px;
    font-size: 14px;
    border-radius: 20px;
}

 

Chat Screen - main screen_message-row

- incoming message 생성.

(chat.html)

...
        <!-- Incoming Message -->
        <div class="message-row">
            <img src="img/user_friends_hani.jpg">
            <div class="message-row__content">
                <span class="message__author">Hani</span>
                <div class="message__info">
                    <span class="message__bublble">Hello~</span>
                    <span class="message__time">10:04</span>
                </div>
            </div>
        </div>
    </main>

(chat.css)

...

.message-row {
    width: 100%;
    display: flex;

}

.message-row img {
    width: 60px;
    height: 60px;
    border-radius: 15px;
    margin-right: 15px;
}

.message__author {
    opacity: 0.9;
    margin-bottom: 7px;
    display: block;
}

.message__info {
    display: flex;
    align-items: flex-end;
}

.message__bublble {
    background-color: white;
    padding: 8px 10px;
    border-radius: 10px;
    border-top-left-radius: 0px;
    font-size: 20px;
    margin-right: 5px;
}

.message__time {
    opacity: 0.9;
}

+ 추가 설명.

더보기

- border-top-left-radius: 0px;

→ border의 원하는 모서리 지정해서 따로 설정 가능.

 

- sending message 생성.

 

- 배치된 순서 바꾸는 방법.

1. order 사용.

: 위치 변경이 가능하며, flex의 자식에만 적용됨.

2. flex-direction: row-reverse 사용.

 

(chat.html)

   ...
        <!-- Sending Message -->
        <div class="message-row message-row--own">
            <div class="message-row__content">
                <div class="message__info">
                    <span class="message__bublble">Hi!</span>
                    <span class="message__time">10:04</span>
                </div>
            </div>
        </div>
    </main>

(chat.css)

...

.message-row--own {
    justify-content: flex-end;
}

.message-row--own .message__bublble {
    background-color: var(--yellow);
    border-top-right-radius: 0px;
    border-top-left-radius: 10px;
    margin-right: 0px;
    margin-left: 5px;
}

.message-row--own .message__info {
    flex-direction: row-reverse;
}

 

Chat Screen - write-message-input

(chat.html)

    <!-- Write Message Input -->
    <form class="reply">
        <div class="reply__column">
            <i class="fa-regular fa-square-plus fa-2x"></i>
        </div>

        <div class="reply__column">
            <input type="text" placeholder="Write a message..."/>
            <i class="fa-regular fa-face-smile"></i>
            <button><i class="fa-solid fa-arrow-up"></i></button>
        </div>
    </form>

(chat.css)

...

.reply {
    position: fixed;
    bottom: 0;
    width: 100%;
    background-color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 25px;
    box-sizing: border-box;
}

.reply .reply__column:first-child {
    width: 5%;
    padding-right: 15px;
}

.reply .reply__column:last-child {
    width: 95%;
    position: relative;
}

.reply i {
    opacity: 0.6;
}

.reply input {
    padding-left: 15px;
    height: 35px;
    width: 100%;
    border: var(--main-border);
    border-radius: 20px;
    font-size: 18px;
}

.reply__column:last-child > i,
.reply__column:last-child button {
    position: absolute;
    right: -15px;
    top: 4.5px;
}

.reply__column:last-child > i {
    right: 20px;
    top: 6px;
    font-size: 26px;
}

.reply__column button {
    background-color: var(--yellow);
    border: none;
    width: 30px;
    height: 30px;
    border-radius: 15px;
}

.reply__column button i {
    opacity: 1;
}

.reply__column button:focus,
.reply__column button:active {
    outline: none;
}

 

결과물

- Setting Screen

- Chat Screen

저작자표시 (새창열림)

'클론코딩 > 노마드코더 코코아톡' 카테고리의 다른 글

[클론코딩/코코아톡] 노마드 코더 코코아톡 클론코딩 #8 Splash Screen, Animations, No Mobile  (0) 2022.09.30
[클론코딩/코코아톡] 노마드 코더 코코아톡 클론코딩 #7 수정 및 추가 기능 구현  (0) 2022.09.29
[클론코딩/코코아톡] 노마드 코더 코코아톡 클론코딩 #5 수정 및 추가 기능 구현  (0) 2022.09.28
[클론코딩/코코아톡] 노마드 코더 코코아톡 클론코딩 #4 Chats Screen, Find Screen, More Screen  (0) 2022.09.27
[클론코딩/코코아톡] 노마드 코더 코코아톡 클론코딩 #3 Friends Screen  (2) 2022.09.26

관련글

댓글

티스토리툴바