📌 개념 정리
이번 프로젝트는 HTML과 CSS를 사용하여 나만의 채팅방을 만드는 과정입니다. 여기서 우리는 각 요소를 마크업하고, 스타일링을 통해 채팅방의 레이아웃과 디자인을 개선하는 방법을 배웁니다. 주요 포인트는 동적 크기 계산, 인터랙티브 버튼, 그리고 리사이징 방지 기능을 구현하는 것입니다. 이제 이를 바탕으로 코드를 발전시키고, CSS를 기준으로 개선할 수 있는 방법도 추가적으로 다뤄보겠습니다.
🚦 동작 원리 및 구조
HTML 마크업 및 CSS 스타일링을 기반으로 아래와 같은 주요 단계를 통해 레이아웃을 구현합니다.
💬 1. HTML 마크업 준비 과정
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>나만의 채팅방</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="chat-container">
<!-- 상태바 -->
<div class="user-bar">
<div class="user-pic"></div>
<div class="user-info">
<span class="user-name">친구 2</span>
<span class="user-count">2</span>
</div>
</div>
<!-- 채팅 입력창 -->
<form class="chat-form">
<textarea class="message-input" placeholder="메시지를 입력하세요..."></textarea>
<button class="send-button" type="submit">전송</button>
</form>
</div>
</body>
</html>- 상태바: 유저 프로필 사진과 닉네임, 친구 수를 표시.
- 채팅 입력창: 텍스트 영역과 전송 버튼을 포함하여 메시지를 입력할 수 있는 공간.
🎨 2. CSS 스타일링 진행하기
CSS 코드 개선:
- 바디의 마진 제거: * { margin: 0; padding: 0; box-sizing: border-box; }를 통해 페이지의 기본 마진을 제거합니다.
- 채팅방 컨테이너: height: 100vh로 화면 전체를 채우고, 배경색을 설정하여 채팅방의 외형을 구성합니다.
최종 CSS 코드:
/* 기본 스타일 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* 채팅방 컨테이너 */
.chat-container {
height: 100vh;
display: flex;
flex-direction: column;
background-color: #f0f0f0;
}
/* 상태바 */
.user-bar {
display: flex;
align-items: center;
background-color: #fff;
padding: 16px;
height: 80px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); /* 그림자 추가 */
}
.user-pic {
width: 50px;
height: 50px;
background-color: #ccc;
border-radius: 50%;
margin-right: 10px;
}
.user-info {
display: flex;
flex-direction: column;
}
.user-name {
font-size: 16px;
font-weight: bold;
}
.user-count {
font-size: 14px;
color: #888;
}
/* 채팅 입력창 */
.chat-form {
display: flex;
align-items: center;
padding: 10px;
background-color: #fff;
border-top: 1px solid #ccc;
}
.message-input {
width: calc(100% - 120px); /* 100%에서 버튼 크기 제외 */
height: 120px;
padding: 15px;
font-size: 18px;
border: 1px solid #ddd; /* 경계선 추가 */
border-radius: 8px;
background-color: #f9f9f9; /* 배경색을 살짝 밝은 색으로 변경 */
resize: none; /* 리사이징 방지 */
}
.send-button {
width: 120px;
height: 120px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 8px;
font-size: 18px;
cursor: pointer;
transition: background-color 0.3s ease; /* 클릭 시 부드럽게 색상 변경 */
}
.send-button:hover {
background-color: #45a049; /* 버튼에 마우스를 올리면 색상 변경 */
}
.send-button:active {
background-color: #3e8e41; /* 버튼 클릭 시 색상 변경 */
}
/* 포커스 시 아웃라인 제거 */
.message-input:focus {
outline: none;
border-color: #4CAF50; /* 포커스 시 경계선 색상 변경 */
}
/* 반응형 디자인 */
@media (max-width: 600px) {
.user-bar {
flex-direction: column;
text-align: center;
}
.message-input {
width: calc(100% - 80px); /* 모바일에서는 버튼 크기를 줄여주기 */
}
.send-button {
width: 80px;
height: 80px;
}
}🖥️ 3. 스크린 크기 조정 및 유저 정보 표시하기
동적인 크기 계산을 위해 calc() 함수를 활용하여 채팅 입력창을 제외한 영역의 크기를 계산합니다. 이를 통해 유저 정보 및 메시지 입력란의 크기를 유동적으로 설정할 수 있습니다.
업그레이드된 CSS 코드:
/* 채팅 입력창 크기 계산: calc() 함수 활용 */
.message-input {
width: calc(100% - 120px); /* 채팅 입력창은 120px 버튼 크기를 제외 */
height: 120px;
padding: 10px;
font-size: 18px;
border: none;
border-radius: 8px;
resize: none; /* 리사이징 방지 */
}🛠️ 4. 채팅방 구성 요소 스타일링
유저 바 스타일링:
- 백그라운드 컬러를 하얀색으로 설정하고, 여백을 16px으로 주어 여유 공간을 확보합니다.
- 유저 사진과 닉네임을 칼럼 레이아웃으로 정렬하여 나란히 배치합니다.
업그레이드된 CSS 코드:
/* 유저 정보 스타일링 */
.user-bar {
display: flex;
align-items: center;
background-color: #fff;
padding: 16px;
height: 80px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); /* 그림자 추가 */
}
.user-pic {
width: 50px;
height: 50px;
background-color: #ccc;
border-radius: 50%;
margin-right: 10px;
}
.user-info {
display: flex;
flex-direction: column;
}
.user-name {
font-size: 16px;
font-weight: bold;
}
.user-count {
font-size: 14px;
color: #888;
}
/* 텍스트 입력란 여백 추가 */
.message-input {
width: calc(100% - 120px);
height: 120px;
padding: 15px;
font-size: 18px;
border-radius: 8px;
border: 1px solid #ddd; /* 경계선 추가 */
background-color: #f9f9f9; /* 배경색을 살짝 밝은 색으로 변경 */
}🎨 5. 나만의 채팅방 스타일 적용하기
리사이징 방지 및 버튼 스타일링:
- 리사이징 방지: resize: none을 설정하여 텍스트 영역의 크기 변경을 불가능하게 합니다.
- 버튼 스타일: 크기, 색상, 배경색을 조정하여 사용자 인터페이스를 개선합니다. 클릭 시 색상 변경을 위해 :active 의사 클래스를 사용합니다.
업그레이드된 CSS 코드:
/* 버튼 스타일링 */
.send-button {
width: 120px;
height: 120px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 8px;
font-size: 18px;
cursor: pointer;
transition: background-color 0.3s ease; /* 클릭 시 부드럽게 색상 변경 */
}
.send-button:hover {
background-color: #45a049; /* 버튼에 마우스를 올리면 색상 변경 */
}
.send-button:active {
background-color: #3e8e41; /* 버튼 클릭 시 색상 변경 */
}
/* 텍스트 에어리어 포커스 상태에서 아웃라인 제거 */
.message-input:focus {
outline: none;
border-color: #4CAF50; /* 포커스 시 경계선 색상 변경 */
}✅ 마무리 및 고급 팁
- 디자인 업그레이드:
- 채팅 입력란과 버튼에 그림자를 추가하여 입체감을 부여할 수 있습니다.
- 버튼에 **transition**을 추가하여 사용자에게 부드러운 인터랙션을 제공합니다.
- 반응형 디자인:
- 미디어 쿼리를 활용하여 모바일 화면에서도 적절하게 레이아웃이 조정될 수 있도록 할 수 있습니다.
@media (max-width: 600px) {
.user-bar {
flex-direction: column;
text-align: center;
}
.message-input {
width: calc(100% - 80px); /* 모바일에서는 버튼 크기를 줄여주기 */
}
.send-button {
width: 80px;
height: 80px;
}
}- 개선 사항:
- 채팅 입력창에 자동 스크롤 기능을 추가하여 메시지를 입력할 때 항상 최신 메시지가 보이도록 할 수 있습니다.
위 코드와 스타일링을 통해 나만의 채팅방을 만들 수 있으며, 여기에 추가적인 기능을 더해가며 디자인을 더욱 발전시킬 수 있습니다.
ChatGPT는 실수를 할 수 있습니다. 중요한 정보는 재차 확인하세요.
'프로젝트' 카테고리의 다른 글
| Mini Project : 나만의 채팅방만들기 (CSS:2일차 과제)UPGRADE (0) | 2025.03.31 |
|---|---|
| Mini Project : 나만의 채팅방만들기 (CSS:2일차 과제)Original (0) | 2025.03.31 |
| Mini Project : 나만의 채팅방만들기 (CSS:2일차 과제) (0) | 2025.03.31 |
| Mini Project. 설문조사 양식 만들기(HTML:1일차 과제+@) (0) | 2025.03.28 |
| Mini Project. 설문조사 양식 만들기(HTML:1일차 과제) (0) | 2025.03.28 |