[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교시]
'웹 UIUX' 카테고리의 다른 글
2024. 07. 25 UIUX 웹 7일차 (0) | 2024.07.25 |
---|---|
2024. 07. 24 UIUX 웹 6일차 (0) | 2024.07.24 |
2024. 07. 22 UIUX 웹 4일차 (0) | 2024.07.22 |
2024. 07. 19 UIUX(웹) 3일차 (0) | 2024.07.19 |
2024. 07. 18(목) UIUX 웹 2일차 (0) | 2024.07.18 |