0415 uiux 11일차

0415 월 uiux 11일차

 

웹코딩 참고 사이트

(https://kimyws.tistory.com/29)

(https://webstoryboy.co.kr/)

 

---

 

flat design 

사용자가 간결하고 시각적 요소를 강조하는 디자인 스타일. 다양한 플랫폼에서 사용한다.

 

 

---

 

웹

 

 

평가는 flex로만

 

grow
shrink
flex-basis

flex 한번에 관리

 

order 

아이템의 순서를 내 마음대로 설정

 

grid layout

격자형태의 레이아웃을 만드는 2차원 레이아웃

 

container : item을 담는 그릇
item : 내부 그리드 배치

 

grid-template-columns: 2차원 형태에서 아이템들의 크기를 지정,

container에서 사용. 너비 결정
예) grid-template-columns: 50px 50px; 이라고 치면  50*50크기의 네모가 세로이 2줄이 됨.      grid-template-columns: 50px 50px 50px 50px; 이라고 치면 50*50크기의 네모가 열(가로로)이 4칸이 됨     50%로 치면 상위요소 크기의 50%만큼의 크기를 가짐(너비, 높이의 50%만큼)

 

fr 남은 사이즈를 가지고 전체를 나눠준다.
1fr 2fr grid-tmplate-rows: 행 크기를 지정해준다. 여백이 부족하면 넘어간다.

 

gap 각각 item(요소)들의 여백 간격을 지정

그리드 columns로 세로줄 3개 됨, gap 적용한 모습

 

트랙함수

 

(https://codepen.io/YoungHeom/pen/wvZxEjv)

(https://codepen.io/YoungHeom/pen/PogByqq)

ㄴ 그리드 만들기 연습3

(https://codepen.io/YoungHeom/pen/GRLXjQP)

ㄴ 연습3에서 하던거 완성