CoCoaTalk 1 - 2 header(welcome)

시작하기에 앞서 기본적으로 브라우저가 알아서 html에 css를 적용시키게 되는 게 몇 개 있다.

이를 해결하기 위해 reset.css를 사용

간단하다 

meyerweb.com/eric/tools/css/reset/

CSS Tools: Reset CSS

사이트에서 복사후 css파일 하나 만들어서

메인 css파일에 @import "파일명. css"라고 입력해서 임포트 해주기만 하면 된다.

적용전과 후

이렇게 해주면 아에 베이식한 css환경에서 작업이 가능하다.

 

css파일을 모듈화 해주고

이제 header부분의 css를 조정해보자

header와  status-bar, form의 간격을 page ruler redux를 통해 간격 알아내 간격을 주고

마찬가지로 title과 text 간의 간격도 조정. 텍스트가 치우쳐 저 있으니 text-align을 사용해서 센터로 정렬

 

그리고~~ p태그 문단을 width값을 60퍼센트 정도로 해서 두줄만 하게 만듦

텍스트의 opacity를 조정해 회색으로 만들어준다.

p태그에 width값을 주니 다시 한쪽으로 치우침

header요소로 가서 flex 시켜주고 direction을 column으로 만들고 item을 center로 조정