프로젝트

Mini Project : 나만의 채팅방만들기 (CSS:2일차 과제)Original

Chansman 2025. 3. 31. 18:19 
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>나만의 채팅방</title>
    <link href="chat.css" rel="stylesheet">
</head>
<body>
     <!-- 상태바 -->
    <div class="container">
        <main class="chat-screen">
            <section class="chat-screen__bar">
                <div class="user">
                    <div class="user__column">
                        <div class="user__pic"></div>
                    </div>              
                    <div class="user__column">
                        <p class="user__nick">친구</p>
                        <p class="user__count">2</p>
                    </div>
                </div>            
            </section>               
        </main>
         <!-- 채팅 입력창 -->
         <form class="chat-form">
            <section class="chat-form__field">
                <textarea class="chat-form__msg" placeholder="메시지를 입력하세요..."></textarea>
                <button class="chat-form__bt" type="submit">전송</button>
            </section>
        </form>
    </div>
</body>
</html>

 

 

/* 전체적인 세팅부터 */

*{
    box-sizing: border-box;
}
html{
    height: 100%;
}
body{
    height: 100%;
    margin: 0px;
}
.container{
    height: 100%;
    background-color: #FCC41F;
}

/*스크린 크기 조정 */
.chat-screen{
    height: calc(100% - 120px);
}

/* 유저 정보 표시되는 부분 */
.user{
    background-color: white;
    padding: 16px;
    height: 80px;
}

.user__column {
    float: left; 
    
}

.user__pic{
    width: 50px;
    height: 50px;
    margin-right: 10px;
    border-radius: 10px;
    background-color: #FCC41F;
}

.user__nick, .user__count{
    margin: 2px;
}

.user__count{
    font-size: 12px;
    color: gray;
}

/* 채팅 입력 창 */
.chat-form{
    height: 120px;
    background-color: white;
}

.chat-form__field{
    height: 120px;
}

.chat-form__msg{
    float: left;
    width: calc(100% - 120px);
    height: 120px;
    border: none;
    resize: none;
    font-size: 24px;
    padding: 10px;
}

.chat-form__bt{
    float: right;
    width: 120px;
    height: 120px;
    border-radius: 10px;
    background-color: #FCC41F;
    font-size: 18px;
}

.chat-form__msg:focus{
    outline: none;
}

.chat-form__bt:active{
    background-color: #CB9D12;
}