0416 uiux 12일차

0416 화 uiux 12일차

 

웹코딩 참고 사이트

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

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

 

플렉스 개구리
(https://flexboxfroggy.com/#ko)

 

 

 

---

 

 

UI UX

 

 

 

 

 

---

 

웹

 

 

 

item
grid-row: 1/4;
column

 

 

grid-row를 2번을 주든 3번을 주든 왼쪽에 배치되어있다.

 

item

grid-template-areas

 

grid-area: 그리드 정렬. flex처럼 여러 태그들을 감싼 요소에 적용한다.(grid-template-areas: " " ;)

 

align-items 높이

justify-items 너비

align-self

justify-self

 

.main > .a:nth-child(1) {
grid-area: a;
}

1번 영역이름을 a로 설정함.

 

 

이름을 정할 경우 .main에 아래와 같이 순서를 정할 수 있음

grid-template-areas: 
"a a b"
"a a c"
"d d d"
;

 

위 설명대로 쓴 결과(div 4번까지만 있음)

 

 

 

align-items: center;
justify-items: center;

 

 

전체 통제 ↓

align-content 열방향 통제

justify-content 행방향 통제