메모

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까지만) 웹퍼블리셔쪽으로(자바스크립트까지) 갈 건지 생각해야 됨

0329 금 uiux 1일차

ncs 정리 ( https://haanaaedu.tistory.com/category/Ncs )

transition을 사용할 수 있는 속성 ( https://codepen.io/YoungHeom/pen/oNrjoaj )

폼 태그 입력 요소 ( https://codepen.io/YoungHeom/pen/LYKpOrE )

포폴&웹 혜지 강사님 코드펜 (https://codepen.io/kimhyeji324)

피그마 단축키 ( https://velog.io/@jaekyeongmoon/figma%EB%8B%A8%EC%B6%95%ED%82%A4 )

피그마 ( https://velog.io/@gpdbs2/series/Figma )

코드랩 레퍼런스 CSS Description ( CSS 정리글 )

※ 제이쿼리 참고
Inpa Dev 👨‍💻 제이쿼리 메소드 종류 총정리 ( 제이쿼리 메소드 종류 총정리 ) 💙💛맨날 헷갈림

transition / transform / animation 속성 사용법 ( transition / transform / animation 속성 사용법 ) 💙🧡맨날 헷갈림22
제이쿼리 css 선택자 모음 ( 제이쿼리 css 선택자 모음 )

코드랩 레퍼런스 jQuery  Description ( 제이쿼리 설명글 )

< 통계자료 사이트 > ( 자세한 건 사용자 경험을 창조하는 UX/UI 디자인 책 44p 참고! )

- 일반, 종합

국가통계포털 ( https://kosis.kr/index/index.do )

한국통계진흥원( http://www.stat.or.kr/ )

지표누리 ( https://www.index.go.kr/ )

- 인구, 지역 정보

지자체 사이트 ( https://opengov.seoul.go.kr/ )

통계지리정보 서비스 (  )

- 문화콘텐츠

한국콘텐츠진흥원, 게임, 음악, 애니메이션, 방송 분석

- DB 웨어하우스

한국데이터진흥원

DBPia

데이터스토어(유료&무료)

- 연구기관

KT경제경영연구소, 기술 트렌드, 리포트 제공

한국정보화진흥원, 국가 정보화백서

한국갤럽조사연구소( https://www.gallup.co.kr/ )

gui
사용성(usability). 사용자가 느끼는 효과성과 효율성

디자인 의도 명확하게: 사용자가 편하게 사용. 디자인 < 실용성
기획을 구체적으로. 검색 활용(챗gpt)

UX: 경험적 디자인. 사용자에게 즐거움(좋은 경험) 전달 멋진x 좋은 ux를 제공

사용자가 제품이나 시스템을 이용하면서 얻게 되는 느낌이나 생각 등을 포함한 총체적 경험

예쁘지 않아도 구현하기 쉬운 것부터 <웹사이트 찾기>

앱, 웹 기획 지금부터. 컨셉 잡기. 레퍼런스 찾아보기

객체 지향 언어(태그?)

자바랑 자바스크립트는 다름!

프로토타입- 사용자 인터페이스 디자인 과정에서 실제 제품이나 서비스의 초기 버전을 만들어 내부 검토나 사용자 테스트에 사용하는 것

포토샵, 일러스트 (평가 있음)

레이아웃 편성, 스토리보드 작성

포토샵 컨트롤 알트 W 누르면 작업창 닫힘

vs코드 html 태그 정렬(문서 서식) 단축키: Shift + Alt + F

웹

html, css, 자바스크립트(js)

코드펜, vsc(비주얼 스튜디오 코드, vs코드)

비주얼 스튜디오 코드 검색 후 다운받기 - https://code.visualstudio.com/ 

한글 언어팩 깔기

새파일만들기 컨트롤n- 언어선택-html

html / css / js

툴 / 디자인 / 행동

html 하이퍼텍스트마크업랭귀지 . 하이퍼텍스트(확장된 텍스트) 마크업(표시)

vs코드

tap키로 태그 자동완성

단일태그- 시작과 끝을 구분하지 않음

각 태그 별로는 속성

태그의 부가적 기능

태그입력: 태그이름+TAP

주석: ctrl + /

표준: ! + 엔터

<html></html> 문서유형의 시작과 끝

<head> 웹화면에서 보여지지 않지만 웹브라우저가 알아야 할 정보(상단 탭 이름 변경 가능)

meta charset="UTF-8"

<body>: 실제 브라우저 화면에 표시될 내용 입력

<p> 파라그래프. 문단

알트 시프트 아래(↓)

블럭: 전체를 채워주는 형태(한 줄 형태로 되어있다면 블록)

인라인: 필요한 부분 채워주는 형태(디스플레이(속성): 인라인;)

strong: 강조

h1~h6

h1 가장 크게

hr태그 수평선- 내용 구분을 위해 사용

<br> 줄바꿈태그

띄어쓰기: 스페이스바, &nbsp;

한칸 띄어주는 형태 &nbsp; 스페이스바(띄어쓰기) 한번 한칸, 스페이스바 &nbsp; 두 칸, 스페이스바 &nbsp; 스페이스바  

: 콜론  ; 세미콜론

드래그(글자 마우스 선택) 안 되게 하는 방법!
ㄴuser-select: none;
줄바꿈 안되는 건 white-space: nowrap;

<em> 기울이기 

인라인 내부 블럭과 블럭 내부 블럭은 차이가 있다.

컨트롤 엔터 다음 줄이 생성되고 거기로 커서가 이동됨

img 이미지 태그(단일 태그)

src 속성 url 주소

alt 속성(대안, 대체)

이미지 에러, 로딩 되기 전에 뜨는 글자

img 태그 입력 후 탭 누르면 저절로 뜸

img는 인라인 요소이다.

- 컨테이너 태그

콘텐츠나 레이아웃에 영향이 없이 여럿을 묶어서 관리하는 역할

<div> 블록 레벨 컨테이너

<span> 인라인 컨테이너

블록(전체 너비만큼의 크기) 

인라인 안의 요소(자식 엘리먼트) 너비&높이에 따라 칸의 크기가 달라짐

- 전역속성 

html 태그의 공통으로 사용할 수 있는 속성

시작태그에 속성을 넣는다 (*: 중요 표시)

* id: 고유한 이름 부여, 식별자. (#)

* class: 그룹별로 묶을 수 있는 식별자 (.) 예) .tag > a

 ㄴ 둘의 차이: id는 혼자, class는 그룹

style: 스타일(색 설정)

title: 커서를 댔을 때 네모박스로 설명이 나옴

정리햇는데 정리된 사이트가 있다네,,,

- 링크(link): 다른 문서를 연결해준다.

a 태그 anchor(첨부한 링크로 이동)

target 속성(타겟 안에 넣는 속성들)

현재탭 self

새로운탭 blank(새 페이지로 열기)

목록: 연관있는 항목들을 나열한 것

순서 있는 항목 ol 예) 1. 어쩌구 2. 저쩌구

순서 없는 항목 ul 예시) · 어쩌구 · 저쩌구

목록 안 항목 li (

input 입력 

type 입력 요소의 형태 데이터 타입이 달라지게 해주는 것

    <input type="text"><br><br>
    <input type="button"><br><br>
    <input type="color"><br><br>
    <input type="range"><br><br>
    <input type="date"><br><br>

 div.center = .center

롯데리아 촵땡겨체

( https://www.lotteriafont.com/ )

수업이랑 관련 없지만 확인해보기