오늘 한일
-코딩 2일차 실시간 강의
-코딩 2일차 강의 복습 및 정리, 실습 진행
내일 할일
-코딩 3일차 실시간 강의
-코딩 3일차 강의 복습 및 정리, 실습 진행
[코딩 2일차] ⭐랜딩페이지 제작
섹션(Section)
- Header(Navigation) : 페이지 상단에 위치하는 영역으로 로고, 내비게이션 메뉴, 로그인/회원가입 버튼 등이 포함, 모든 페이지에서 공통 사용
- Hero Section : 메인 섹션, 방문자를 사로잡는 헤드라인, 서브헤드라인, CTA, 비주얼 등 포함
- About Section : 서비스나 브랜드에 대한 소개를 담은 영역, 브랜드 미션, 가치, 회사 소개 등
- Feature Section : 제품이나 서비스의 핵심 기능이나 혜택을 설명하는 영역
- Testimonial/Review Section : 제품이나 서비스의 핵심 기능이나 혜택을 설명하는 영역
- FAQ Section : 자주 묻는 질문과 답변을 정리한 섹션
- Pricing Section : 유로 서비스의 요금제, 혜택, 결제 방식 등을 안내하는 영역
- CTA Section : 사용자의 행동을 유도하는 섹션
- Contact Section : 연락처, 문의 양식, 이메일 주소 등을 포함하는 영역
- Footer : 페이지 하단에 위치하며, 회사 정보, 이용약관, 개인정보처리방침, SNS 링크, 저작권 정보 등이 포함, 모든 페이지에서 공통 사용
반응형 디자인
: 한 디자인이 다양한 화면 크기에 맞춰 자동 조정되도록 만드는 디자인 방식
- 큰 화면(PC)→2~3열/큰 텍스트
- 작은 화면(모바일)→1열/작은 텍스트
→같은 콘텐츠지만 더 보기 좋게 배치를 변경
Breakpoint
: 화면 크기가 일정 너비를 넘거나 줄어들 때, 레이아웃을 바꾸는 기준점
- framer breakpoint 모바일:390 / 타블렛, 노트북:810 / 데스트탑:1200
- 대표적 breakpoint 모바일:320->375 / 타블렛:768 / 데스크탑:1280
📍너무 많은 브레이크포인트를 만들면 디자이너가 관리하기 어려움, 3단계만 사용하는 것 추천
- 반응형을 미리보기로 체크
- 캔버스는 고정된 화면이라 실제 반응형 동작이 안 보일 수 있음
- Preview 모드에서 브라우저 크기를줄여봐야 Breakpoins 작동을 정확하게 확인할 수 있음
📌실습내용
UXUI 도전!!!