2024. 08. 05 UIUX 웹 14일차

# 코딩

 

* flow 차트 구성

-html 기능을 알면 쉬움

 

[능력단위평가]

 

1) 탑바의 역할과 텍스트의 역할 이해하고 있다(5점)

ㄴ 클래스 기능 ex. top-bar / container / logo-box /menu-box 

 

2) 콘텐츠 구현 _ 구성된 콘텐츠의 구조와 특성에 맞는 시각적인 흐름을 제시할 수 있다(5점)

ㄴ 플로우 차트 구성
  (1) 포토샵 활용

  (2) a4용지에 그려서 사진 찍어 업로드

  (3) 컴퓨터로 그리기 

 

3) 콘텐츠 구현화기_영역별 콘텐츠에 적용될 멀티미디어적 기능 요소에 따라 기술개발을 제안 할 수 있다.

ㄴ 피그마 레이어 박스 역할을 정확하게 이해할 수 있다.(20점)

 

 

- 큰레이아웃

 

---

[FLOW 차트(플로우 차트)]

 ㄴ 디자인, 기획, 구성 등 

 

- 피그마 프레임 만들기(f)

- 프레임 이름 상관x 

- 가독성있게 글씨폰트 16pt

 

ㄴ 나중에 포폴할 때 : 컬러 설정, 타겟층, 계층 구조, 구현 까지 !

---

★ ★ ★ ★ ★

1) 사용자 메뉴 구현

2) 탑바와 네비바 ul, li(list_목록)

3) 폰트 적용

 

 

[list_목록(li)]

과일(목록)

- 딸기

- 수박

- 바나나

 

 

사용자 메뉴(목록)

- 로그인

- 회원가입

 

 

아이콘 박스(목록)

- 장바구니 아이콘

- 찜  목록 아이콘

 

 

[ul, li 주의사항]

- ul, li는 항상 꼭 같이 사용해야 한다.(무조건 같이 !!!)

- ul태그 자식으로 li태그 밖에 사용할 수 없다.

- ul태그는 기본적으로 margin, padding라는 값을 가지고 있다.

- li는 기본적으로 list-style라는 값을 가지고 있다.

 

---

 

 

[user 메뉴] _ 사용자, 로그인 

 

Q? 목록자체를 알고 있나

bar

shift + 윈도우 + W -> bar

---

[font 메뉴]