2024. 07. 23 UIUX 웹 5일차

[1교시]

 

 

 

 

[2교시]

- 피그마 코딩 접목 수업

- 기능 다 써보고 모르는 거 질문

- 피그마, 팀프로젝트 기획 나눠서 수업

 

[uiux 기획서]

- ~을 보신적 있으십니까(현 상황 Pain Point_니즈가 나오기 전에 상단에 근거자료가 들어감)

- 기능설명

 

 

 

[3교시]

- 2024. 07. 30 능력단위평가

- 2024. 08. 21 팀프로젝트 홈페이지 평가

 

 

* flex box

- 행, 또는 열 주축 설정을 해준다,

- 웹 요소를 배치 정렬 하는 1차원 레이아웃 방식

* flex container(부모)

-  레이아웃을 결정할 요소

 

형식)

 div class a

   div class b /div

   div class b /div

/div

 

 

* flex item

- flex 컨테이너 안에 있는 박스(자식)

 

 

* display

- flex 컨테이너에 사용

 

 

* flex 축방식

- 주축(flex 쓰는 순간) 가로 형

- 교차축 세로 형

- 주축 변경도 가능(잘 사용x)

 

 

* 웹퍼블리셔, 디자인

- 가장 중요한 것은 기획

- 코드 가장 중요한 것은 기획

- 코드는 자신이 편하게 사용하면 됨

- 그것에 대해서 CSS에서 다 구현될 수 있도록 만들어 놓음

 

 

 ㄴ .cts>.box*3

 ㄴ style에 입력할 때 이름 제대로 작성, 안그럼 나중에 통제하기 어려움

 ㄴflex사용하면 숫자가 오른쪽으로 이동

 

 ㄴ 너비(widht) ctrl+/ 

 ㄴdisplay(ctrl+/) / 높이(hegit) ctrl+/

 ㄴ 높이(hegit) ctrl+l /  너비(widht) ctrl+l  

- 박스 내부 박스들은 widht(너비)최대치를 가지고 있음

- flex 박스 내부 박스들은 hegiht(높이) 최대치를 가지고 있음(너비 0)

 

 

 * flex direction

- 주축의 방향성을 결정

- 기본은 row(행_좌우)

 ㄴ flex row 좌우가 기본 값

 ㄴflex direction: row-reverse; 반댓값이 나옴

 ㄴ flex-direction: column-reverse; 밑으로 내려감

 ㄴ flex-direction: row-reverse;(행, 순서를 바꿔준다.)

 

 

* flex wrap

- item들이 강제로 한줄에 배치할 것인지

- 가능한 영역 내에서 벗어나지 않게 여러 행으로 나누어 표현 할 것인지 여부를 결정

 

 

* nowrap(기본값)

- 공간이 부족해도 한 줄 배치

 

 

* Alt + Shfit + 방향키

 

 

* wrap

- 공간이 부족해지면 여러 행으로 배치 된다.

 

 ㄴ height: 80px + ctrl+/

 ㄴ 두 줄의 차트로 변환

[4교시]

 

 

 ㄴ 코드펜으로 사용해도 됨

 

* flex-flow

- direction wrap을 한 번에 사용할 수 있는 속성

 

 

* justify-content

- 박스들이 주축에 따라 배치될 때 요소사이의 공간 분배

 

 

* flex-start(기본)

 

* flex-end

- 주축의 끝점으로부터 시작점을 향해(오른쪽 부터)

 

 

* center

- 주축의 중심(가운데)

 ㄴ span태그에는 원래 너비 안들어감, flex-end안에 들어가 있어서 가능

 

 

* space-between

- 추축에 양끝 배치 내부간격 동일

 

* margin

 ㄴ margin right

 ㄴ margin: 0; 위 아래가 맞으면 좌우는 자동

 ㄴ margin: 0 auto;

 

* space-around

- 동일 여백(좌우)

 

* space-evenly

- 모든 여백 동일

 

 

*  justify-content

- 주축을 기준으로

 

 

* align-items

- 교차축으로 정렬

 ㄴ 주축과 보조축 통제

 ㄴ네모박스 중앙으로

 ㄴ네모박스 오른쪽 끝으로 justify-content, align-items의 end랑 flex-end의 속성이 같기 때문에 바꿔서도 사용가능

 ㄴ  justify-content(가로), align-items(세로)

 ㄴgap

 

 

 

* align-self

-

 

* align-content

- 교차축 정렬

- wrap일 때 정렬

 

ㄴalign-content: space around

ㄴalign-content: space between

 

 

* flex-grow

- flex item이 기본 크기에 대해서 더 커질 수 있다.

 ㄴ 남은 공간의 전체의 grow를 합한 공간 

 ㄴwidht를 뺌

ㄴ

*

 

 

 

*

 

 

 

*

 

 

 

*

 

 

 

 

 

 

 

 

 

 

 

[5교시]