노마드코더/html+css (카카오클론-초급)

카카오톡-클론코딩과정

더 멋진 세상을 꿈꾸는 개발자 2020. 4. 7. 21:20

 

 

1. 구현하고 싶은 각 페이지의 html태그들을 작성한다.

 

2. 각 페이지를 nav태그에 링크걸어 이동가능하게 만든다.

 

3. reset.css로 html 각 태그의 스타일 값을 0으로 만든다.

 

4. 전체 body값의 기본 배경컬러, 색컬러, 패딩 등을 설정한다.

 

5. 전체 페이지에서 위쪽 박스부터(또는 공통으로 구현되는 박스부터) 만들기.

   "status-bar.css" => 새로운 css 페이지를 만든 다음에는 항상 배경컬러를 바꿔보면서 제대로 구현이 되고 있는지,

   연결이 됬는지 확인하기.

.status-bar{
  background-color: red;
}

 

    **각 공통되는 또는 꾸밀 박스마다 css파일을 작게 여러개 만드는게 좋다.

      파일이 커지면 계속 스크롤을 하면서 보는게 힘듦...

 

6. status-bar -> header -> nav -> main 순서로 하나씩 스타일~