노란색 말풍선 만들기

흰색 말풍선과 노란색 말풍선의 기본적인 틀은 같다.
1. 말풍선의 형태를 띄고 있는 것
2. 말풍선 옆에 시간을 갖는것

노란색 말풍선은 흰색 말풍선과 비교해서
1. 오른쪽 끝에 정렬 되어 있다.
2. 시간과 말풍선의 위치가 서로 바뀌었다.
3. 말풍선의 색이 노란색이고 오른쪽 위의 모서리가 뾰족하다.

노란색 말풍선이 흰색 말풍선과의 공통점과 차이점을 모두 갖기 때문에,
공통 부분은 같은 class 명을 써서 기본틀을 갖춘 다음에
차이가 나는 부분은 class에서 modifier을 사용해 작성해 준다.

<!--흰색 말풍선-->
<div class="message-row">
  <img src="file:///C:/Users/skswo/OneDrive/IMG_5126.jpg" alt="">
  <div class="message-row__content">
    <span class="message__author">Gato</span>
    <div class="message__info">
      <span class="message__bubble">Hi!</span>
      <span class="message__time">21:27</span>
    </div>
  </div>
</div>

<!--노란색 말풍선-->
<div class="message-row message-row--own">
  <div class="message-row__content">
    <div class="message__info"> <!--flex container-->
      <span class="message__bubble">Hi Nice to meet you!</span>
      <span class="message__time">21:27</span>
    </div>
  </div>
</div>

흰색 말풍선과 노란색 말풍선의 class명을 message-row라고 똑같이 맞춰준 후 css에서 이 둘의 공통적 혹은 기본적인 구조를 작성해준다.

.message-row {
    width: 100%;
    display: flex;
    margin-bottom: 25px;
}

.message__bubble {
    background-color: white;
    padding: 10px;
    border-radius: 15px;
    font-size: 25px;
    border-top-left-radius: 0px;
    margin-right: 10px;
}

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

.message__time {
    opacity: 0.8;
    font-size: 18px;
}

그리고 message-row--own라는 modifier를 사용해서 노란색 말풍선 만이 갖는 특징을 작성해준다.

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

.message-row--own .message__bubble {
    background-color: var(--yellow);
    border-top-right-radius: 0px;
    border-top-left-radius: 15px;
    margin-left: 5px;
    margin-right: 0px; /*.message__bubble에 적용했던 margin-right을 초기화*/
}

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

자, 이제 코드를 하나씩 뜯어보면서 음미해 보자.

노란 말풍선과 흰 말풍선의 차이점 3가지.

차이점 1.'오른쪽 끝에 정렬 되어 있다.'

class명이 message-row--own 하나였다면 아래와 같이 쓸 수 있지만,

message-row--own {
	display: flex;
    justify-content: flex-end;
    /*justify-content는 수평으로 적용된다.*/
}

class명이 .message-row, .message-row--own 두 개이기 때문에 .message-row에 작성했던 css 코드는 message-row--own에 중복 작성하지 않아도 효과가 적용 된다.

다시 말해, .message-row가 이미 display: flex; 처리가 되어 있기 때문에 modifier인 .message-row--own에서는 따로 display: flex; 없이 justify-content: flex-end;만 써줘도 된다.

.message-row {
    display: flex;
}

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

차이점 2. '시간과 말풍선의 위치가 서로 바뀌었다.'

<div class="message__info"> <!--flex container-->
  <span class="message__bubble">Hi Nice to meet you!</span>
  <span class="message__time">21:27</span>
</div>

.message__info {
    display: flex;
}

부모인 message__info가 flex container일때 flex contatiner의 자식들은 'order'라는 기능을 갖는다.
order는 페이지에서 보여주는 구조의 순서를 바꿀 수 있는 기능이고, 오직 flex children에만 적용할 수 있다.

message__info의 flex children인 message__bubble과 message__time의 순서를 바꿔보려고 하는데 여기에는 두가지 방법이 있다.

방법 1) order: 번호 매기기

.message-row--own .message__time {
    order: 0;
}

.message-row--own .message__bubble {
    order: 1;
}

order: 0;인 시간이 말풍선 앞에 온다.

방법 2) flex-direction 이용하기

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

차이점 3. '말풍선의 색이 노란색이고 오른쪽 위의 모서리가 뾰족하다.'

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

background-color를 이용해서 말풍선의 색을 노란색으로 바꿔준다.

background-color: var(--yellow);

흰색 말풍선에서 왼쪽 위 모서리가 뾰족했었기 때문에 이를 초기화하고 오른쪽 위 모서리를 뾰족하게 만든다.

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

흰색 말풍선에 줬던 margin-right을 초기화하고 시간과 말풍선 사이에 간격을 주기 위해 말풍선으로 부터 margin-left를 준다.

margin-left: 5px;
margin-right: 0px; 
/*.message__bubble에 적용했던 margin-right을 초기화*/

💻 Github Sourde Code