드림코딩 by 엘리님의 강의 중 html/css 실전편 영상이 있길래 점검도 해볼 겸 만들어봤다. 40분 정도 잡고 만들기 시작했는데 1시간 40분 걸렸다. 😂 됴르륵

• 내 코드
• 엘리님 코드
  
  

순수 css로 변수 관리하기

:root {
  --text-color: (색상코드);
  --background-color: (색상코드);
  --accent-color: (색상코드);
}

...

// 사용시에는 var() 이용하여 변수를 넣어준다.
.class {
  color: var(--text-color);
}

위와 같이 관리하면 된다. 유지 보수에도 훨씬 쉽고 가독성도 좋아진다. 앞에 --는 왜 붙이는 건지 모르겠다.

자잘한 TIL

• 클래스명을 지을 때 부모__자식 형태로 지으면 한 눈에 보기 편하다.
  • 예시: navbar, navbar__logo, navbar__menu
• 클릭이 되는 ui 컴포넌트들은 되도록 a 태그 사용
  • 당연한 건데 나는 cursor: pointer만 추가했다. 좀 더 신경쓰기!
• 엘리님은 햄버거 토글 아이콘을 맨 마지막에 넣고 position 이용해서 위에 갖다 붙이셨고 나는 로고랑 묶어서 박스를 하나 더 만들고 flex 사용했다. 내가 이렇게 한 이유는 어차피 모바일 뷰에서 로고랑 햄버거가 하나의 박스에 있어서인데 뭐가 더 좋은 방법인지는 모르겠다.