Chat Screen

재우·2023년 6월 25일

코코아톡

목록 보기

10/11

😂처음에 헤더 부분에 '박보영' 텍스트가 화면 중앙에 있지않다. 이를 조정해볼것이다.

1. 먼저 각 컬럼(<,박보영,돋보기)의 너비를 전체화면대비 33%로 설정한다.

.alt-header__column {
  width: 33%;
}

제일 오른쪽에 있는 컬럼(돋보기)에 display:flex를 적용하고 justify-contents: flex-end 를 통해 오른쪽 끝으로 위치시킨다.

.alt-header__column:last-child {
  margin-left: auto; 
  display: flex;
  justify-content: flex-end;
}

3. 두번째컬럼(박보영)에 text-align:center를 적용하여 텍스트가 중앙에 오게한다.

.alt-header__column:nth-child(2) {
  text-align: center;
}

😊이렇게 하면 모든 열이 같은 너비를 가지게 된다.

상태바와 헤더에 배경색을 적용하니 상태바가 가려지는 점을 해결해보자. 아래 그림을 보면 헤더가 상태바를 가리고있다.

💡z-index라는 속성으로 해결할수있다.

z-index는 layer같은것이다. 즉 layer의 순서(요소의 순서)가 몇번째인지를 나타낸다.
z-index의 값이 작을수록 layer가 뒤에 위치한다. z-index 속성의 기본값은 0이다.
display 작업을 하거나, position이 고정되어있으면 layer를 갖게된다.절대적인 위치(absolute position)나 고정된 위치(fixed position)에 대해서 설정할 수 있음.
-> 여기에선 상태바와 헤더의 position이 fixed라 쓸 수 있다.

#char-screen .status-bar {
  z-index: 2;
}

#chat-screen .alt-header {
  z-index: 1;
}

.status-bar에는 z-index: 2;를 주고, .alt-header에는 z-index: 1;을 줘서 상태바를 헤더 위로 올리면 됨!

😊😊 그럼 아래와 같이 정상적으로 노출된다.

<main class="main-screen main-chat">
      <div class="chat__timestamp">Sunday, June 26, 2023</div>
</main>

.chat__timestamp {
  color: white;
  background-color: #92a4b2;
  padding: 15px 15px;
  border-radius: 25px;
}

이렇게만 작성하면 timestamp box가 옆으로 길게 노출된다.

.main-chat {
  display:flex; 
}

부모에 display:flex를 적용하면 된다.

.main-chat {
 display: flex;
 flex-direction: column;
}

flex-direction: column; 을 주면 이렇게 된다. align-items:center; 를 해야한다.

.main-chat {
  margin-top: 150px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

정리하자면, div는 block이라서 양 옆으로 긴데, display:flex;를 하면 div가 글자크기에 맞춰서 줄어든다. 즉 content의 width만큼 가로가 줄어든다. 하지만 flex-direction:column; 을 하면 content의 height만큼 세로가 줄어든다. 여기에 align-items:center; 를 주게되면 다시 content의 width만큼 가로가 줄어든다.
즉, flex-direction:column을 해서 세로로 요소들이 배열되게 하되, timestamp를 중앙 정렬하기 위해서 align-items를 활용하는것이다. 그래서 수평이 된 세로축(Cross Axis)을 기준으로 중앙정렬(align-itmes: center)하면 가운데에 온다.

또 다른 예를 들어보자.

.main-chat{ }에 display:flex만 주게되면
.chat__timestamp와 .message-row는 각각 옆으로 나란히 정렬된다.

그래서 flex-direction: column;을 주면 세로로 정렬된다.

그리고 수평이 된 세로축(Cross Axis)을 기준으로 중앙정렬(align-itmes: center)하면 가운데에 온다.

그리고 이러한 box의 사이즈를 .message-row { width: 100%; }를 주어서 부모의 너비와 동일하게 만든다.

기본적으로 왼쪽부터 정렬됨

flex-direction: row-reverse에 대해 알아보자.

여기서는 .message__info{ } 가 flex container이다.
flex의 자식들에게는 order이라는 기능이 있다. 요소의 순서를 바꿔주는 기능이다.

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

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

이렇게 주게되면 두 요소의 순서가 바뀐다. order가 작을수록 먼저인것이다.

==> 하지만 이렇게도 쓸 수 있다. 그냥 flex-direction :row-reverse 라고 주면된다. 기능은 동일하다.

이제, 입력 부분을 만들어 볼것이다.

.
.
.
<form class="reply">
      <div class="reply__column">
        <i class="fas fa-plus-square"></i>
      </div>
      <div class="reply__column">
        <input type="text" placeholder="Write a Message" />
        <i class="far fa-smile"></i>
        <i class="fas fa-arrow-up"></i>
      </div>
</form>
.
.
.

.reply {
  position: fixed;
  bottom: 0;
  width: 100%;
}

그 다음은 입력 부분을 맨밑으로 내린다.

.reply {
  position: fixed;
  bottom: 0;
  width: 100%;
  background-color: white;
  display: flex;
  justify-content: space-between;
  padding: 5px 15px;
  align-items: center;
}

이렇게 일단 해주면 아래 그림처럼 된다.

여기서, <input>에 width: 100%를 주려고하는데, 기본적으로 부모요소가 <body>가 아니라면 부모요소가 width를 가지고 있어야한다. 여기서는 <input>의 부모요소인 <div class="reply__column">가 width를 가지고 있어야한다.

이렇게 주면 아래 그림 처럼 된다.

<input>, <i>은 모두 인라인 요소라서 일반적으로 옆에 다른 인라인 요소가 와야하는데, input요소에 width를 100%줬기때문에 <input>요소가 너비를 모두 차지하게된다. 그래서 <i>요소는 다음 줄에 배치된다.

그 다음에, 두 아이콘을 absolute로 만들것이다. 아이콘을 top,bottom,left,right을 통해 input위에 올릴것이다.
그러려면 일단 <div class="reply__column">은 position:relative 가 되야한다.

.reply .reply__column:last-child {
  width: 90%;
  position: relative;
}

재우

이전 포스트

Settings

다음 포스트

Chat Screen

코코아톡

Settings

Splash Screen

0개의 댓글