NomadCoders Kakao Clone #2 CSS

수업노트

• Reset CSS

각 HTML 요소들은 기본적으로 스타일을 가지고 있다. 브라우저마다 기본값이 다르기도 하기 때문에 reset.css를 쓰는게 좋은 선택. 사람들이 만들어놓은 것을 복사해서 쓰면 된다. 비슷하게 normalize.css도 있다. reset은 기본값을 0으로 만들어 준다면 normalize는 모든 브라우저에서 공통적인 기본값을 만들어주는 것.

• Never Use Pure Black

0% 밝기의 검정색 폰트는 눈을 피로하게 만든다. 100% 밝기의 흰 배경과 함께 쓰이면 더더욱. 폰트와 배경색이 반대여도 마찬가지. 너무 강한 대비는 눈을 피로하게 만든다.

• Class

니코는 클래스를 엄청나게 많이 사용한다. 나는 최대한 안쓰는게 좋은줄 알았다. 생각해보면 아무도 그렇게 말한 적은 없었지만 중복은 좋지 못하다는 얘기 때문에 그렇게 생각한 것 같다. 또 니코는 스타일시트를 작게 나누는데, 관리하기에 좋은 것 같다. column이라는 네이밍도 마음에 든다.

• Display: flex   

display: flex;
justify-content: space-between;

align-items: center; (line-height로 했었는데..<<쓰긴씀)(default: stretch)

flex-direction: column;
#2.9에서 flex 두번 적용한거
justift-content: space-around

가운데정렬..
display: flex; justify-content: center; align-items: center; (flex container이 가질 수 있는 속성)

align-self: flex-start;
align-self: flex-end;
참고

• cursor: pointer

• color: inherit (정말 간단한데 몰랐던거!)

• box-sizing: border-box

width 100%가 항상 100% 값은 아님. box-sizing이 기본값으로 되어있고 패딩을 추가했다면 100%값+패딩값이 됨

• Google Fonts

customize해서 필요한것만 가져오면 로딩을 최대한 빠르게 만들 수 있다. fontweight 등 설정할때는 import한 값 참고.

• position: fixed (sticky element)

width를 설정해줘야 한다. (다른것들과 분리돼서(absolute하게) 위치하기 때문의 자신만의 크기값을 갖는게 필요하다는듯. height는 내용에 따라 정해질거고)

• .class1.class2

class1과 class2를 둘다 가진 요소에 적용

• CSS 명명규칙 (참고)

solid class name ?
(airbnb design system - ui module)

• 가운데정렬(이게뭐지?)

margin: 0 auto;
left: 0;
right: 0;

• box-shadow

• input: focus {outline: none;}

• subtle patterns

• min-height : 100vh;

• uigradients.com

background-image: linear-gradient(to right, color1, color2);