[웹 기초] 간단한 채팅창 만들기 실습

목차 (OPEN)

🧱 전반적인 HTML 구조
🎨 style 태그 안 CSS 속성
✅ 최종 코드
✅ 결과

지금까지 간단하게 살펴본 HTML과 CSS 기초를 활용해서

간단한 채팅창 UI를 구현해보았는데,

이를 간략하게 설명해보고자 한다.

🧱 전반적인 HTML 구조

<!DOCTYPE html>
<html>
    <head>
        <title>채팅창 만들기 연습</title>
        <style> ... </style>
    </head>
    <body>
        <div class="chat">
            <div class="message friend">
                ...
            </div>
            <div class="message me">
                ...
            </div>
            <div class="message friend">
                ...
            </div>
            <div class="message me">
                ...
            </div>
        </div>
    </body>
</html>

1️⃣ <!DOCTYPE html>

먼저 이 문서는 HTML5 문서임을 선언해준다.

2️⃣ <html> ... </html>

HTML 문서 전체를 감싸준다.

3️⃣ <head> ... </head>

문서 정보를 설정해주기 위한 것으로,

title 태그 안에는 탭 제목에 나타나는 문구를 설정해주고,

style 태그 안에는 직접 CSS 스타일들을 작성해준다.

4️⃣ <body> ... </body>

우리가 브라우저에서 실제로 보게 되는 웹 페이지 내용에 대한 것으로,

chat 클래스를 통해 전체 채팅 UI를 감싸주고,

내부는 각각의 메시지를 구성하는 message 클래스들로 구성된다.

📩 chat 클래스 내부 구조

        <div class="chat">
            <div class="message friend">
                <div class="message-info">소연</div>
                <p class="message-body">오늘 바빠?</p>
                <time class="message-time">오전 11:18</time>
            </div>
            <div class="message me">
                <p class="message-body">아니 왜?</p>
                <time class="message-time">오전 11:23</time>
            </div>
            <div class="message friend">
                <div class="message-info">소연</div>
                <p class="message-body">그냥 심심해서..</p>
                <time class="message-time">오전 11:24</time>
            </div>
            <div class="message me">
                <p class="message-body">그럼 같이 점심 먹자 !!</p>
                <time class="message-time">오전 11:27</time>
            </div>
        </div>

메시지를 보내는 사람이 나인지 상대방인지,

지금 표시하는 정보가 상대방의 이름에 대한 것인지,

본문 텍스트 내용인지, 보낸 시각인지 구분하기 위해

구체적인 클래스 이름들을 붙여준다.

1️⃣ me | friend

보낸 사람이 나인지 상대방인지 구분하기 위한 클래스

2️⃣ message-info

메시지를 보낸 상대방의 정보임을 구분하기 위한 클래스

3️⃣ message-body

메시지의 텍스트 내용임을 구분하기 위한 클래스

4️⃣ message-time

메시지를 보낸 시각임을 구분하기 위한 클래스

🎨 style 태그 안 CSS 속성

🧾 전체 페이지 스타일 설정

body {
    font-family: 'Arial', sans-serif;
    margin: 0;
    padding: 0;
    background-color: aliceblue;
}

1️⃣ font-family를 통해 글꼴 설정

Arial 폰트를 우선적으로 적용하고,

만약 이 폰트가 없다면 sans-serif 폰트로 설정한다.

(가장 우선적으로 적용되길 원하는 폰트를 가장 왼쪽에 표기한다.)

2️⃣ margin을 통해 외부 여백 설정

0으로 주어 외부 여백을 없애준다.

3️⃣ padding을 통해 내부 여백 설정

0으로 주어 내부 여백을 없애준다.

4️⃣ background-color 설정

배경 색상을 원하는 색상으로 설정해준다.

📦 채팅 박스 스타일 설정

.chat {
    width: 100%;
    max-width: 300px;
    margin: auto;
    padding: 20px;
    background-color: #fdefff;
}

1️⃣ width 설정

100%로 설정해서 반응형으로 너비를 꽉 채우도록 한다.

2️⃣ max-width 설정

최대 너비를 300px로 제한한다.

3️⃣ margin으로 정렬

auto로 하여 가운데 정렬 되도록 한다.

4️⃣ padding 설정

안쪽 여백을 20px로 설정한다.

5️⃣ background-color 설정

채팅창의 배경 색상을 원하는 색으로 설정한다.

🧱 메시지 박스 공통 설정

.message {
    display: flex;
    flex-direction: column;
    margin-bottom: 10px;
}

1️⃣ display + flex-direction 설정

display를 flex로 하고,

flex-direction을 column으로 설정해서

세로로 쌓는 구조로 만들어준다.

2️⃣ margin-bottom 설정

10px로 설정하여 메시지 풍선 사이사이에 간격을 준다.

🕐 메시지 이름 및 시간 관련 설정

.message-info {
    font-size: 0.85em;
    color: rgb(104, 104, 104);
}

.message-time {
    font-size: 0.75em;
    color: rgb(104, 104, 104);
}

1️⃣ font-size 설정

이름과 시각을 표시할 폰트 사이즈를 설정해준다.

2️⃣ color 설정

글자 크기를 원하는 색상으로 설정해준다.

💬 메시지 본문 스타일

.message-body {
    max-width: 80%;
    padding: 10px;
    border-radius: 10px;
    margin: 5px 0;
}

1️⃣ max-width 설정

80%로 설정하여 텍스트 창이 너무 크지 않도록 설정한다.

2️⃣ padding 설정

채팅 말풍선 내부 여백을 설정한다.

(글자가 말풍선에 꽉 차면 이상하니까)

3️⃣ border-radius 설정

10px로 설정하여 말풍선을 둥근네모로 만들어준다.

4️⃣ margin 설정

위아래 여백을 설정해준다.

원래는 margin: (위) (오른쪽) (아래) (왼쪽) 순서로 여백을 지정하는데,

지금처럼 앞에 2개만 설정하면 우리는 위, 오른쪽 여백을 직접적으로 지정해준 것이고,

아래는 위와 동일하게, 왼쪽은 오른쪽과 동일하게 자동으로 설정된다.

-> 즉, 우리는 margin: 5px 0 5px 0;으로 설정한 것으로 볼 수 있다.

🖱️ 말풍선 호버 효과 설정 (마우스를 올렸을 때)

.message-body:hover {
    transition: box-shadow 0.8s;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.8);
}

1️⃣ transition 설정

box-shadow 속성이 변경될 때 0.8초 동안 전환 효과를 주도록 설정한다.

2️⃣ box-shadow 설정

요소에 15px의 어두운 그림자 효과를 설정한다.

이 때, 0 0은 (x, y) 위치는 없다는 의미이다.

(위 아래 양옆 모두 그림자 생성)

📍 보낸 사람에 따른 위치 설정

.me .message-time {
    align-self: flex-end;
}

.friend .message-time {
    align-self: flex-start;
}

1️⃣ .me

내가 보낸 메시지는 말풍선의 오른쪽 (끝)에 배치한다.

2️⃣ .friend

상대방이 보낸 메시지는 말풍선의 왼쪽 (처음)에 배치한다.

🎨 보낸 사람에 따른 말풍선 색과 정렬 구분

.friend .message-body {
    background-color: #fff;
    align-self: flex-start;
}

.me .message-body {
    background-color: rgb(255, 221, 244);
    align-self: flex-end;
}

1️⃣ .friend

친구가 보낸 메시지는 흰색 말풍선 + 왼쪽 정렬 되도록 설정한다.

2️⃣ .me

내가 보낸 메시지는 분홍색 말풍선 + 오른쪽 정렬 되도록 설정한다.

✅ 최종 코드

<!DOCTYPE html>
<html>
    <head>
        <title>채팅창 만들기 연습</title>
        <style>
            body {
                font-family: 'Arial', sans-serif;
                margin: 0;
                padding: 0;
                background-color: aliceblue;
            }

            .chat {
                width: 100%;
                max-width: 300px;
                margin: auto;
                padding: 20px;
                background-color: #fdefff;
            }

            .message {
                display: flex;
                flex-direction: column;
                margin-bottom: 10px;
            }

            .message-info {
                font-size: 0.85em;
                color: rgb(104, 104, 104);
            }

            .message-body {
                max-width: 80%;
                padding: 10px;
                border-radius: 10px;
                margin: 5px 0;
            }

            .message-body:hover {
                transition: box-shadow 0.8s;
                box-shadow: 0 0 15px rgba(0, 0, 0, 0.8);
            }

            .message-time {
                font-size: 0.75em;
                color: rgb(104, 104, 104);
            }

            .me .message-time {
                align-self: flex-end;
            }

            .friend .message-time {
                align-self: flex-start;
            }

            .friend .message-body {
                background-color: #fff;
                align-self: flex-start;
            }

            .me .message-body {
                background-color: rgb(255, 221, 244);
                align-self: flex-end;
            }


        </style>
    </head>
    <body>
        <div class="chat">
            <div class="message friend">
                <div class="message-info">소연</div>
                <p class="message-body">오늘 바빠?</p>
                <time class="message-time">오전 11:18</time>
            </div>
            <div class="message me">
                <p class="message-body">아니 왜?</p>
                <time class="message-time">오전 11:23</time>
            </div>
            <div class="message friend">
                <div class="message-info">소연</div>
                <p class="message-body">그냥 심심해서..</p>
                <time class="message-time">오전 11:24</time>
            </div>
            <div class="message me">
                <p class="message-body">그럼 같이 점심 먹자 !!</p>
                <time class="message-time">오전 11:27</time>
            </div>
        </div>
    </body>
</html>

✅ 결과

'💻 웹 > 📌 웹 기초' 카테고리의 다른 글

[웹 기초] 도메인 이름이란 (0)	2025.05.21
[웹 기초] 인터넷은 어떻게 작동하는가 (0)	2025.05.20
[웹 기초] CSS의 속성 (0)	2025.05.11
[웹 기초] CSS란 (0)	2025.05.10
[웹 기초] HTML이란 (2)	2025.05.07

SSOSSO._.

[웹 기초] 간단한 채팅창 만들기 실습

🧱 전반적인 HTML 구조

📩 chat 클래스 내부 구조

🎨 style 태그 안 CSS 속성

🧾 전체 페이지 스타일 설정

📦 채팅 박스 스타일 설정

🧱 메시지 박스 공통 설정

🕐 메시지 이름 및 시간 관련 설정

💬 메시지 본문 스타일

🖱️ 말풍선 호버 효과 설정 (마우스를 올렸을 때)

📍 보낸 사람에 따른 위치 설정

🎨 보낸 사람에 따른 말풍선 색과 정렬 구분

✅ 최종 코드

✅ 결과

'💻 웹 > 📌 웹 기초' 카테고리의 다른 글

티스토리툴바

[웹 기초] 간단한 채팅창 만들기 실습

🧱 전반적인 HTML 구조

📩 chat 클래스 내부 구조

🎨 style 태그 안 CSS 속성

🧾 전체 페이지 스타일 설정

📦 채팅 박스 스타일 설정

🧱 메시지 박스 공통 설정

🕐 메시지 이름 및 시간 관련 설정

💬 메시지 본문 스타일

🖱️ 말풍선 호버 효과 설정 (마우스를 올렸을 때)

📍 보낸 사람에 따른 위치 설정

🎨 보낸 사람에 따른 말풍선 색과 정렬 구분

✅ 최종 코드

✅ 결과

'💻 웹 > 📌 웹 기초' 카테고리의 다른 글

'💻 웹/📌 웹 기초' Related Articles

티스토리툴바