0405 uiux 6일차

0405 금 uiux 6일차

 

일러스트

 

fill 면 stroke 획(선)

라쏘툴(Q)로 선택 시 뒤 레이어를 잠그지 않아도 큰 오브젝트 안의 작은 오브젝트들을 선택 가능

 

 

 

라쏘툴로 하트만 선택한 모습

레이어 잠금 [ctrl] + [2]

레이어 잠금 해제 [ctrl] + [Alt] + [2]

레이어 눈 끄기[ctrl] + [3] 

 

도형만들 때 alt 클릭 하면 가운데를 기준으로 만들어짐 

 

distribute spacing 기능 이제 첨 앎... 0mm 으로 하고

이 아이콘 누르면 오브젝트 사이 간격이 0이 되면서 딱 붙음

 

 

패스파인더 merge 같은색은 합치고 다른 색은 분리함

 

익스팬드 어피어런스 - 효과를 가진 선(예. 지그재그 선)을 패스로 변환

 

 

코너땜에 작게 변형이 안되면 스케일 코너 체크하기

---

 

 

Vetrical-align

 

인라인, 인라인블럭

수직에 대한 정렬

텍스트, 이미지 ←인라인요소들 사이에서 수직배치 제어를 실행해줌

블록은 적용되지 않음

 

 

 

속성값

baseline 기본

top

bottom

middle

 

 

float(흐름)

 문서의 흐름

 인라인 옆으로 

 블럭 아래로

 

html문서에서는

요소를 만들면 먼저 만들어진 것이 나오고 그 이후는 차례대로 표시됨

 

float

 ㄴnone: 기본

 ㄴleft: 자신을 포함한 박스의 왼쪽

 ㄴright: 오른쪽

 

position

 문서상 요소를 배치하는 방법

 

속성값

Syatic(정적): 기본 문서 흐름에 따라 배치해줌

relative(상대적): 일반적인 문서 흐름에 따라 배치, 상하 좌우 위치값에 따라 오프셋(위치) 지정해줌

top: 300px; 값 넣으면 아마도 탑에서부터 300px만큼 이동하는듯

 

absolute

 흐름에서 제거

 상하 좌우 위치값에 따라 오프셋 지정해줌

 가장 부모가 가까운 position 지정 요소에 대해서 상대적으로 위치를 결정

 얘도 relative랑 비슷

 

fixed

 흐름에서 제외

 지정한 위치 고정

 

sticky

 흐름에서 제외

 스크롤 동작이 존재하는 가까운 요소에 적용

 (가로로는 안움직이는데? 뭐지?)

 

flexbox

박스 내 요소 간의 공간 배분과 정렬 기능을 제공하기 위한 1차원적 레이아웃 모델

 

주축 : 진행방향
교차축 : 90도방향

 

flex-direction

 

오늘 못했던거(놓침) 연습하기

 

 

 

 

 

 

강사님 메모

 

오브젝트의 순서 Ctrl + [, ] Ctrl + Shift + [, ] 전체 이동 Ctrl + G 그룹 Ctrl + Shift + G 그룹해제 Ctrl + X select - same 선택 특정부분의 색이 같은 것을 선택시 그부분만 그룹하고 선택해 줘라 크기조절시 Shift 배율 고정 Alt 정중앙 부터 Ctrl + 2 잠금 Ctrl + Alt + 2 해제 Ctrl + 3 숨김 Ctrl + Alt + 3 해제 도형만들기 클릭 우측 아래로 만들어진다. Alt 클릭 중앙에서부터 수치값 입력가능 드래그 만들기 Alt 중앙에서 Shift 정배율 정렬 기준점을 확인 하고 잘모르겠으면 몇개만 가지고 연습 Shift + M 클릭 새로운 도형 만들기 Alt 클릭 빼기 path finder 나누기 합치기 Expand 확장 선을, 면으로 확장해준다. Expand Appearance 선이 효과를 가진것을 패스로 변경해준다. 인라인이 들어가면 글자형식이다. font관련 영향을 받는다. 인라인 인라인-블럭 블럭 속성 : 속성값 여러가지 내부속성 외우지 말아라 글자 관련  line-height 텍스트 내의 각 줄의 높이를 설정, 줄간의 수직 간격을 조정 - 속성값 사용방식 ㄴ 단위 없는 숫자 : 요소의 글꼴 크기에 곱해져서 높이를 결정해준다.  w,h 사용할 수 없다. ㄴ 어떤 수치인지 모른다. px, 배수, rem, em, % 0 가능 (없음을 의미 하니까) ㄴ 길이 단위 사용 : px ㄴ 백분율 가능 Vertical-align 인라인, 인라인블럭 수직에 대한 정렬 텍스트, 이미지 <- 인라인요소들 사이에서 수직배치 제어를 실행해줌 블록은 적용되지 않음 속성값 baseline 기본 top bottom middle float 문서의 흐름 인라인 옆으로 블럭 아래로 HTML 문서 요소를 만들면 먼저 만들어진것이 나오고 그이후느 차례대로 표시 float ㄴ none : 기본 ㄴ left : 자신을 포함하는 박스의 왼쪽 ㄴ right: 오른쪽   position 문서상 요소를 배치하는 방법 정의 속성값 Static(정적) : 기본형 문서흐름에 따라 배치 해준다. relative(상대적): 문서 흐름에 따라 배치,  상하 좌우 위치값에 따라 오프셋 지정해줌 absolute 흐름에서 제거 상하 좌우 위치값에 따라 오프셋 지정해줌 가장 부모가 가까운 position 지정 요소에 대해서 상대적으로 위치를 결정 fixed 흐름에서 제외 지정한 위치 고정 sticky 흐름에서 제외 스크롤 동작이 존재하는 가까운 요소에 적용 flexbox 박스내 요소간의 공간 배분과 정렬 기능을 제공하기 위한 1차원적 레이아웃 모델 주축 : 진행방향 교차축 : 90도방향 flex-direction flex