구현된 화면

코드

CSS 시작 세팅!

기본적인 색상, 폰트, 사이즈들은 자주 사용하는 속성들이기 때문에, 여러 부분에 재사용하기 용이하게 먼저 정의를 해준다. 이 부분이 이번 클론 코딩하면서 얻어갈 중요한 것 중 하나라고 생각한다.

:root {
  /* color */
  --white-color: #fff;
  --black-color: #140a00;
  --blue-color: #045fd4;
  --red-color: #ff0000;
  --grey-dark-color: #909090;
  --grey-light-color: #e0e0e0;
/* size */
  --padding: 12px;
  --avatar-size: 36px;
/* font size */
  --font-large: 18px;
  --font-medium: 14px;
  --font-small: 12px;
  --fint-micro: 10px;
}
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  /* 너비 계산시 padding, marign 포함 계산됨 */
}
body {
  font-family: Roboto;
}

Header
위 root에서 정의한 내용을 사용할때는 color: var(--white-color);식으로 활용한다.

/* Header */

header {
  display: flex;
  justify-content: space-between;
  padding: var(--padding);
  background-color: var(--black-color);
  color: var(--white-color);
}

header .logo {
  font-size: var(--font-large);
}

header .logo i {
  color: var(--red-color);
}

header .icons .fa-search {
  margin-right: var(--padding);
}