코드 내용

주의사항
1. body자체에 기본margin 값이 있기 때문에 시작할때 margin = 0;으로 설정해주고 시작하면 편하다!
2. Fontawesome에서 가져온 아이콘들도 Font이기 때문에 font-size 속성으로 크기 조절해줄 수 있다.
3. 메인축에 따라 아이템 정렬하는 속성
flex-difection = row;
justify-content(메인축과 같은 방향), align-items(메인축과 반대인 세로방향)
flex-difection = column;
align-items(메인축과 같은 방향), justify-content(메인축과 반대인 가로방향)

body {
  margin: 0;
}

a {
  text-decoration: none;
  color: white;
}

.navbar {
  display: flex;
  background-color: #26c6da;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
}

.navbar__logo {
  font-size: 24px;
  color: white;
}

.navbar__menu {
  display: flex;
  list-style: none;
  padding-left: 0;
}

.navbar__menu li {
  padding: 8px 20px;
}

.navbar__icons {
  display: flex;
  padding-left: 0px;
  list-style: none;
}

.navbar__icons li {
  padding: 8px 9px;
}

구현된 화면

오른쪽 아이콘 색을 변경하는걸 깜빡해서 추후에 color속성을 추가해주었다!
.navbar__icons {
display: flex;
padding-left: 0px;
list-style: none;
color: white;
}