Kakao Clone Project

이 글은 노마드 코더님의 카카오 클론 강의를 보고 정리한 글입니다.

• 웹디자인 할 때 유용한 프로그램들
  • ColorZilla : 웹페이지 특정 부분의 색상을 알려주는 크롬 확장프로그램.
  • PageRulerRedux : 웹페이지 특정 구간, 면적의 크기(픽셀)를 알려주는 크롬 확장프로그램.
  • Font Awesome : 디자인할 때 쓸 수 있는 무료 아이콘을 html 문서에 쉽게 쓸 수 있다.
• 부모/자식 클래스를 구분하기 위한 팁
  • 자식 클래스에 부모 클래스의 이름을 넣고 __(double under score)로 구분한다.

    <div class="status-bar"></div>
    <div class="status-bar__battery-level"></div>

• reset CSS import
  • 모든 HTML 태그들이 기본 스타일을 가지고 있음.
    • 예를 들어, h1태그도 기본으로 설정된 margin이 있음.
  • 이러한 기본 스타일을 제거하고 리셋해주기 위해 reset CSS를 import 함.
  • CSS를 리셋하면, 모든 브라우저에서 동일한 화면을 볼 수 있음.
  • 목적이 CSS를 리셋하는 게 아니라 '모든 부라우저에서 동일한 화면을 보여주고 싶은 것'이라면, nomarlize CSS도 좋은 대안임.
• 폰트를 바꾸고 싶을 땐 Google Fonts를 이용하자.
  • CSS에서 font-weight을 쓰려면, 여기서 import 되어 있어야 함.
• div vs span
  • div는 기본적으로 display:block이 적용되어 있음.
  • span은 inline임.
• color : inherit
  • 부모로부터 색깔을 상속받는다는 뜻.
  • a태그에 적용하면, 이미 클릭한 링크라 하더라도 보라색이 아닌 원래 색깔로 보인다.
• position:fixed
  • 항상 width를 같이 설정해주어야 한다.
• padding을 다룰 때 주의해야 할 사항!
  • content의 width를 300px로 설정하고, padding-left를 20px로 설정하면, content의 width가 320px로 늘어난다.
  • 특히 실수하기 쉬운 부분이 width : 100%, padding-left : 50px;를 하면, width는 100% + 50px이 된다.
  • 따라서 이러한 에러를 방지하려면, 아래 코드를 CSS에 추가해서 브라우저에게 "padding을 추가하더라도 content를 자동으로 늘리지 말아줘"라고 말해줘야 한다.

  * {
    box-sizing : border-box;
  }

• class에 CSS를 적용할 때 주의할 점
  • .a.b는 a와 b클래스를 모두 갖고 있는 태그를 선택한다.
  • .a .b는 a클래스 안에 있는 b클래스를 의미한다.