메모

0408 월 uiux 7일차

(https://kimyws.tistory.com/29) (https://webstoryboy.co.kr/)

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

일러스트레이터

로테이트 툴(R)

클릭: 회전 중앙점

중앙점 찍고 다시 클릭 드래그하면 움직임.

중앙점 찍기 - alt - 클릭 - 드래그 → 복제

엔터 또는 아이콘 클릭

30도(or 45도)씩 회전하면 깔끔함!

반전(O)

스케일(S)

scale stokes & effects 체크하면 작아지면서 선까지 가늘어짐

가운데를 소실점으로 해서 복도 같은 거 만들 수 있을 듯..

겹쳐진 오브젝트 여러개를 그룹하지 않고 투명도를 줘야

개별적으로 투명도가 들어가고 겹치는 부분은 더 진해보인다.

그룹하고 투명도 주면 

그레이디언트

alt 클릭 드래그하면 색 복사됨!

색 관련 단축키 ↓
<           >            /

스포이트(i)

문자도구(T, 타입 툴)

내가 직접 크기를 정해서 만들면 회전해도 네모 모양만 회전이 되고 글의 각도는 그대로다!

클릭해서 만들면 완전히 회전 됨.

오브젝트-패스-오프셋 패스 내가 원하는 느낌으로 비율 유지되면서 크기가 커짐

둘러싸기 왜곡

object - Envelope distort - make with top object

최상위 도형에 선택한 것 중 밑에 있는 것을 안쪽에 넣어줌(글자가 아래 있어야 함)

release로 이전 상태 되돌리기 가능

웹

flexbox 

: 박스 내 요소 간 공간 배분, 정렬 기능을 제공

(내부 요소의 개수에 따른 균일한 공간 배분)

부모에게 기능을 넣어주면 자식들이 기능을 사용한다.

주축(좌우(행))

교차축(상하(열))

flex - diredtion

flex의 방향을 지정

(행, 열, 정방향, 역방향)

row-reverse; 맨 위에서 가로 역방향

column 행을 열(세로)로 변경

column-reverse 왼쪽아래부터 거꾸로

상위요소가 작아지면 내부 요소들 크기들이 상위 요소 크기에 영향을 받는다.

상위요소 크기가 내부 요소들 크기보다(만큼) 커지면 원래 설정한 크기로 돌아온다.

(기본 크기를 줄여서 넣어줌. now )

flex-wrap

한 줄에 들어가지 않을 경우 줄바꿈을 선택해줄 수 있는

nowrap: 기본 크기를 줄여서라도 컨테이너 넣어준다.(기본형)

wrap: 새로운 줄로 배치

wrap-reverse: 반대방향 래핑

justify - content 주축(행) 배치법

flex-start: 시작부분

flex-end: 끝부분

space - btween 시작 마지막을 맞추고 가운데 공간 절반(양끝 여백 없음)

space-around; 동일 간격 여백, 시작 마지막(양 끝은 요소 간의 여백 절반만큼)도 여백

s-evenly 동일간격(여백 모두 완전 동일) 

  └→ 사용예시. justify-content: space-evenly;

 flex-start (default) flex-end center space-between space-around space-evenly 

교차축(열) 배치법

align - item

align - self: 교차축 개별 요소 배치

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

기타 선택자

속성, 이름

[id] {}: id라는 속성을 갖고 있는 모든 태그

[class="hello"]
속성과 값이

[class^="h"] h로 시작하는

[class*="o"] o가 포함된

[class$="o"] o로 끝나는

결합 선택자 / 자손 결합자

div > p: div 안에 있는 p 직전

직전 자식만(내 자식만. 내 자식의 자식에는 적용X)

div p: div 안에 있는 p

자식의 자식도 선택

ㄴ왼쪽 body 안에 있는 p 클래스만(body 안에 있는 div 안에 있는 p태그엔 적용안됨)

div .a 

div 안에 있는 .a 클래스 모두

div>.a 

div 안에 있는 직전 .a 클래스

 선택하는 거 많이 연습 (헷갈리면 코드펜에 적어서 어떻게 적용되는지 확인)

div ~ p : div 요소의 뒤(밑)에 있는 형제 중 모든 p 태그 요소 선택(여러 개 선택)

.a + div: .a태그 바로 뒤 div 태그 하나 선택

.a, .b : .a랑 .b 선택(여러 태그 선택 )

wow~ 진짜 넘 헷갈려~

이제 슬슬 마켓컬리 페이지 모작해봐야 될 듯

웹디자인으로 갈건지(css까지만) 웹퍼블리셔쪽으로(자바스크립트까지) 갈 건지 생각해야 됨

0401 월 uiux 2일차

rgb 빛에 대한 색. 혼합 시(rgb의 값이 높아질 시) 밝아짐.

cmyk 잉크에 대한 색. 혼합 시 어두워짐.

색상

채도:

명도

jpg, png 파일- 웹용으로 사용

비주얼 스튜디오 코드 cyrl+y 이후 돌리기(컨z 컨y)

태그 복붙: 알트 시프트 방향키위아래

선택자 {

      속성명: 속성값;

}

선택자: 어떤 요소에 스타일을 적용할지에 대한 정보

{}: 어떤 요소를 적용할지 정의하는 구간

속성명: 어떤 스타일을 정의하고 싶은지 정보

속성값: 어느 정도의 수치

:(콜론) 속성명과 속성값을 나눠

;(세미콜론) 구분자 속성을 구분

<link rel="stylesheet" href="style.css">

    폴더 안에 있는 style.css 파일이라면 "폴더명/style.css"이라고 작성해야 함

인라인 속성:태그에 직접 기술하는 방식

내부에 있는 부분만 넣는다

컨트롤 시프트 L(동시 다중선택)

태그명*숫자

숫자만큼 태그를 만들어준다

Tap이동하면서 내용작성

태그명*숫자{내용} 쓴 후 엔터

태그가 숫자가 나와서 내용까지 써줌

예) div*3{기본} 엔터 치면 세개가 쭉 작성됨

      <div>기본</div>

      <div>기본</div>

      <div>기본</div>

스타일 태그 만들기

ㄴ HTML에서 직접 넣어주는 기능

헤드에 태그 스타일 작성할 수 있음

문서 간의 연결

head 안에 style 태그 넣어주기

css 주석처리가 다름

선택자

어떤 요소에 스타일을 적용할지

종류: 기본, 그룹, 특성, 결합, 의사 클래스, 의사요소

전체 선택자: *

* {}

 문서 내의 모든 요소를 의미(페이지 전체)

 문서 내 글자체를 동일시할 때

 전반적인 색을 동일시할 때 사용.

태그 선택자: 주어진 이름을 가진 태그. 요소를 선택

p, div, span

클래스 선택자: 각 태그들을 동일한 명으로 묶은 것(먼저 태그 이름을 설정해야 함)

.클래스명 {}

div랑 span을 같은 클래스에 넣을 수 있음 <div class="a"> <span class="a">

id 선택자 #.id명

 고유한 식별자를 가진다. 이름은 다른 요소와 달라야 한다.

 동일한 명으로 했을 때 문제는 없어 보인다.

 웹 표준: 동일한 페이지가 다른 pc에서도 열려야 함

 크롬, 웨일, 엣지

 동일한 페이지

 규칙들

 id 다르게. javascript 문제 발생할 수 있다.

 주민번호라고 생각하기

그룹 선택자

 다양한 유형의 요소를 한번에 선택하고자 할 때 사용

 (,) 쉼표 구분 예) #a1, span {}

선택자에는 우선순위가 있다. 

1. 나중에 작성된 스타일을 우선 적용(밑이 우선)

2. 아이디 > 클래스 > 태그

홈페이지를 구성할 때부터

1. 레이아웃의 형태 

2. 스타일 

클래스로 묶을지 

아이디로 묶을지 

홈페이지 제작보다는 관리

class "a c" a도 되고 c도 됨. .a {} .c {} 순서로 적으면 .c에 있는(제일 밑에 적은) 게 적용됨

텍스트 꾸미기

font-family: 텍스트에 글꼴을 지정할 때 사용함.

사용자의 시스템에 해당 글꼴이 없을 수 있기 때문에 대비해서 여러 글꼴을 백업지정한다.

웹 폰트

 font-family: 글꼴명, 글꼴계열;

 글꼴명 공백이 있으면 " "(큰따옴표)로 묶어준다.

 글꼴계열

 사용을 하지 못할 때 계열만 선택해줌

 세리프(삐침있는 글자), 산세리프(돌출없는 글자), 모노스페이스(너비가 고정되어있음)

 cursive(필기형) fantasy(장식)

( https://webstoryboy.co.kr/ ) font-family 쪽 보면 됨!

font-size

px: 절대크기

em: 부모태그의 font-size와 상대크기 예) 3em하면 부모태그의 3배만큼의 크기

rem: html 기본글꼴의 배수, 상대크기