Kakao Clone Project

rakkoon23·2020년 5월 10일
0

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

  • 웹디자인 할 때 유용한 프로그램들
    • 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클래스를 의미한다.
profile
모빌리티 스타트업에서 데이터를 다루고 있습니다.

0개의 댓글