📌 개념 정리

이 튜토리얼에서는 HTML과 CSS를 사용하여 나만의 채팅방을 만드는 방법을 다룹니다. 기본적으로 채팅방의 구조와 디자인을 구현하고, calc() 함수를 사용하여 동적인 크기 조정을 하며, 의사 클래스를 활용하여 사용자 인터랙션을 강화하는 방법을 배울 수 있습니다.

  • HTML 마크업: 채팅방의 기본적인 구조를 설정합니다.
  • CSS 스타일링: 레이아웃과 디자인을 개선하여 보다 보기 좋고 기능적인 채팅방을 만듭니다.
  • calc() 함수: 크기 계산을 자동화하여 더 유동적인 디자인을 제공합니다.
  • 의사 클래스(:active, :focus): 버튼 클릭과 텍스트 입력 시 스타일을 동적으로 변경합니다.

🚦 동작 원리 및 구조

1. HTML 마크업

채팅방의 기본 레이아웃을 구성하는 HTML 마크업을 작성합니다. 상태바, 유저 정보, 메시지 입력창 등 주요 요소들을 HTML로 마크업하고, CSS로 디자인을 적용할 준비를 합니다.

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 스타일링

이제 HTML 구조에 스타일을 추가하여 디자인을 개선합니다. calc() 함수를 사용하여 동적으로 크기를 조정하고, 의사 클래스를 통해 사용자 인터랙션을 강화합니다.

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;
}

.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: #666;
}

/* 채팅 입력창 */
.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: 10px;
    font-size: 18px;
    border: none;
    border-radius: 8px;
    resize: none; /* 리사이징 비활성화 */
}

.send-button {
    width: 120px;
    height: 120px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 18px;
    cursor: pointer;
}

.send-button:active {
    background-color: #45a049; /* 버튼 클릭 시 색상 변경 */
}

/* 포커스 시 아웃라인 제거 */
.message-input:focus {
    outline: none;
}

🧪 실전 사례

위 코드를 통해, 채팅방의 기본 구조와 디자인을 구현할 수 있습니다. 채팅 입력창에서 메시지를 입력하고, 전송 버튼을 클릭하여 메시지를 보내는 기능을 제공할 수 있습니다. 실제로 버튼을 클릭하거나 입력란에 포커스를 두었을 때 스타일이 변하는 것을 확인할 수 있습니다.

 

1. 💬 HTML 마크업 준비 과정

마무리 프로젝트:

  • 목표: 친숙한 일반 채팅방의 레이아웃을 목표로 채팅방을 만든다.

프로젝트 진행 순서:

  1. HTML 마크업: 채팅방의 기본 구조인 상태바와 채팅 입력창을 마크업한다.
  2. CSS 스타일링: HTML 마크업을 완성한 후 스타일링을 추가하여 디자인을 개선한다.

HTML 구조 요소:

  • 상태바, 프로필 사진 영역, 텍스트, 채팅 입력창 등
  • 각 요소에는 적절한 클래스를 지정하여 역할을 명확히 한다.

클래스 선택자의 중요성:

  • 클래스 선택자는 태그 선택자보다 우선순위가 높으므로, 필요에 따라 클래스를 명확히 지정하여 스타일링을 용이하게 할 수 있다.

2. 🎨 CSS 스타일링 진행하기

CSS 스타일링 적용:

  • 기본적으로 바디 요소의 마진을 제거하고, 컨테이너 클래스를 사용하여 전체 레이아웃을 설정한다.
  • 배경색과 높이를 적절히 설정하여 채팅방 레이아웃을 구성한다.

스타일링 핵심 포인트:

  • 100% 높이 설정: HTML 요소의 높이를 100%로 설정하여 웹 브라우저 화면을 채운다.
  • 마진 0 설정: 기본적으로 존재하는 마진을 0픽셀로 설정하여 스타일링의 일관성을 유지한다.

3. 🖥️ 스크린 크기 조정 및 유저 정보 표시하기

스크린 크기 설정:

  • 채팅 입력창을 제외한 메인 영역의 크기를 설정하는 것이 핵심이다.
  • calc() 함수를 사용하여 크기를 계산하고, 채팅 입력창의 크기를 제외한 영역을 설정한다.

CSS calc() 함수 활용:

  • calc() 함수는 동적인 크기 조정을 가능하게 하여, 100%에서 채팅 입력창 크기인 120px을 빼는 방식으로 사용된다.
  • 예시: width: calc(100% - 120px);

4. 🛠️ 채팅방 구성 요소 스타일링

유저 바 스타일링:

  • 백그라운드 컬러: 하얀색으로 설정하고, 패딩을 16픽셀로 주어 여백을 확보한다.
  • 높이: 80픽셀로 조정하여 적절한 크기로 설정한다.

유저 사진과 닉네임 배치:

  • 칼럼 클래스를 사용하여 유저 사진과 닉네임을 나란히 배치한다.
  • 플롯 레프트로 요소들을 옆으로 정렬하여 깔끔한 배치를 만든다.

채팅 입력창 스타일링:

  • 채팅 폼 크기: 채팅 입력창의 크기는 120px로 설정하고, 백그라운드 컬러는 화이트로 지정한다.
  • 메시지 입력란: 크기를 설정하고, 패딩을 추가하여 여유로운 공간을 확보한 텍스트 에어리어를 만든다.

5. 🎨 나만의 채팅방 스타일 적용하기

리사이징 방지:

  • 리사이징을 막기 위해, 텍스트 에어리어의 resize 속성에 "none"을 주어 사용자가 크기를 조절할 수 없도록 한다.

버튼 스타일링:

  • 버튼의 크기, 색상, 글자 크기 등을 설정하여 디자인을 적용한다.
  • 버튼의 크기는 120px로 설정하고, 배경색과 테두리 반경을 조정한다.

렌더링 문제 해결:

  • 화면 렌더링 중 요소 간의 미세한 공간으로 버튼이 밑으로 떨어지는 문제를 플롯 속성을 사용하여 해결한다. float: left와 float: right를 사용하여 요소들을 정확히 붙인다.

의사 클래스 사용:

  • 버튼 클릭 시 색상을 진하게 변경하기 위해 :active 의사 클래스를 사용한다.
  • 텍스트 에어리어의 포커스 상태에서 윤곽선을 제거하기 위해 :focus 의사 클래스를 사용하여 스타일을 조정한다.

🧠 고급 팁 or 자주 하는 실수

  • calc() 함수를 사용하여 동적인 크기 조정이 가능하지만, 크기를 정할 때 상위 요소의 크기에 따라 변화할 수 있으므로 반드시 상대적인 계산을 사용해야 합니다.
  • 버튼 클릭 시 색상이 변경되는 기능은 의사 클래스 :active를 활용하여 클릭 효과를 제공하는 좋은 예입니다.
  • 텍스트 에어리어 리사이징을 막는 방법은 resize: none을 사용하여, 사용자에게 텍스트 영역의 크기 변경을 허용하지 않습니다.

✅ 마무리 요약 및 복습 포인트

  1. HTML 마크업으로 기본 구조를 잡고, CSS 스타일링을 통해 디자인을 추가한다.
  2. calc() 함수를 사용하여 동적 크기 계산을 통해 디자인을 조정한다.
  3. 의사 클래스(:active, :focus)를 사용하여 사용자 인터랙션을 강화한다.
  4. 채팅방의 주요 구성 요소는 상태바, 유저 정보, 메시지 입력창이다.

이 튜토리얼을 통해 HTML과 CSS를 사용하여 기본적인 채팅방을 만들고, 동적 레이아웃과 사용자 인터페이스를 개선하는 방법을 배웠습니다. 이를 기반으로 나만의 스타일로 채팅방을 꾸미고, 다양한 기능을 추가해보세요!

'프로젝트' 카테고리의 다른 글

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
Mini Project : 프로필 페이지 만들기(HTML:1일차 과제 + @)  (0) 2025.03.28

티스토리툴바