Mean스텍 입문 (7) - Home Styling -

Mean스텍 입문 (7) - Home Styling -

Mean스텍 입문(6) 포스팅 마지막에서 *ngFor 구문을 통한 데이터 연동을 잠깐 선보였다. 하지만 웹 문서 Style을 꾸며줘야 하는 상황에서 미리 DB 자료를 불러들여놓고 작업을 하다보면 느려진다.

특히 style을 손봐야 할 때는 scss파일에서 코드를 변경하자마자 적용이 되어야 하기 때문에 다시 home.component.html을 원래대로 돌려놓고 시작하자.

www.lipsum.com에서 쏼라~쏼라 하는 부분은 다운받아서 넣었다. 

1 『 scss파일 꾸미기 』

src 바로 아래에 있는 style.scss 파일은 전체적인 스타일을 설정하는 파일이다.

 

폰트는 무료폰트인 kopub 돋움체를 이용하자.

-> kopub url 링크 사이트 

  

2 『 home.scss 파일 꾸미기 』 

CSS부분은 생각나는대로 디자인을 고려해서 작성한다.

 

//결과

3 『 nav.component.scss 파일 꾸미기 』

상단 네비게이션 메뉴를 꾸며보자. 

// 결과