웹디자인 실습 모바일 메인 페이지 - 웹디자인 입문 강좌

www.youtube.com/watch?v=qB6UZdPu0Ag&list=PLkbzizJk4Ae8VJcW6qpHjiP2qByn4Gs8w&index=12

 

 

- 일반적인 작업방식

  모바일>테블릿>데스크탑

 

- mobile first

  콘텐츠 (콘텐츠의 가독성)

<sketch>

<데스크탑→모바일>

복사 후 더블 클릭후 편집화면에서 사이즈 조절

adjust content on resize ■체크

메인화면으로 돌아와서 수정+사이즈 조절+배치하기 

 

- 모바일 사이즈 만들기

1. a를 누르고 기종을 선택하기

2. view-show layout-layout setting

  좌우에 margin 20씩 주기 → 총 40 빼주기 =>335px

  offset 0 주고 center 누르기

  number of columns 4 또는 6 주기

  gutter width 16px 주기

 

- 헤더 'compononts/header-m'

  심볼 복사 후 더블 클릭

  상단 메뉴바 삭제

  헤드의 높이 40~60

  adjust content on resize ■체크

  화면=375x60 주기

  로고=40x40

  다시 메인화면으로 돌아와서 심볼을 선택>header 클릭>'header-m'선택