카카오톡 클론 코딩 - HTML, CSS 학습 정리 Pt.2

사용 언어 : HTML, CSS

개발 환경 : VSCode

 

HTML

none

 

 

 

---

 

CSS

 

1. flex는 BOX 형식에서만 적용되는가?

.find .find__header {
  display: block;
  /* header의 모든 요소를 block 형식으로 해야지, space-around 적용.
  flex는 BOX 형식에서만 적용되는 걸까? */
}

 

2. BOX 색상 채우기 : padding + bg-color 채우기

 

3. 가운데 정렬 하기

.chat__write {
  position: fixed;
  bottom: 50px;
  width: 80%;
  left: 0;
  right: 0;
  margin: 0px auto;
  /* fixed가 적용된 상태에서 가운데 정렬하는 방법
    마진 0, atuo | left, right 0 (절대적 좌우 위치 설정) */
 }

 

4. 채팅 말풍선과 같이 반복되는 요소의 경우, 마지막 요소 속성 지정해서 낭비 방지

.settings__list .settings__setting:last-child {
  margin-bottom: 0px;
}
/* 마지막 속성값엔 0px을 줘서 낭비 방지 */

 

5. input 수정 CSS

.chat__write-column input:focus {
  outline: none;
  
 /* 눌렀을 때, 파란색 선택 화면 표시 안되도록 코딩 */
}

 

6. 그라데이션 : bg-img

.incoming-message .message__bubble {
  border-top-left-radius: 0px;
  background-image: linear-gradient(to left, #1488cc, #2b32b2);
}

https://uigradients.com/

uiGradients - Beautiful colored gradients

 

7. span, div로 설정시에 어떤경우엔 align 이나 justify가 안먹힘