0614 금 uiux 51일차

 

웹코딩 참고 사이트(김영원 강사님)
https://kimyws.tistory.com/29 )
https://webstoryboy.co.kr/ )

플렉스 개구리
https://flexboxfroggy.com/#ko )
혜지 강사님 수업페이지(html&css) ( https://codepen.io/hjyee/full/OJGrVYJ ).
자바스크립트 수업페이지 ( https://codepen.io/hjyee/full/PogMVOP )
깃허브 기초 ( https://codepen.io/hjyee/full/LYoNWga )
기초 키보드 사용법 ( https://codepen.io/YoungHeom/pen/eYaOYEX )
연산자 ( https://codepen.io/YoungHeom/pen/Rwmbxze )
코드펜 사용법 ( https://codepen.io/YoungHeom/pen/gOJOWgE )
무료 강의 ( https://programmers.co.kr/ )
자바스크립트 정리 ( https://velog.io/@solmii/Java-Script%EB%A5%BC-Script )

피그마 강좌 ( https://www.youtube.com/@yeonjung-figma ), ( https://www.youtube.com/@UXUIDesign ) - 개인적 메모
작업물 보기 - 핀터레스트나 드리블( https://dribbble.com/ ), 노트폴리오, 비핸스, 디자인 나스 - ( https://designnas.com/ )
자격증 기출문제 ( https://www.comcbt.com/ )( https://quizeey.com/ )
https://cubic-bezier.com/ )

HTML에서 사용되는 quot? amp? lt? gt? 등등 기호 ( https://darusamu.tistory.com/32 )

keyframes 찾아보기. 정리된거 블로그에 적기( https://velog.io/@ye-ji/CSS-%EC%95%A0%EB%8B%88%EB%A9%94%EC%9D%B4%EC%85%98keyframes )

https://ho4607.notion.site/keyframes-animation-64e7a02bc15a47c6982dda5782f79156 )

전에 작업했던 만년필 사이트 파일 css부분 다시 /* ~ 시작 */  /* ~ 끝 */으로 잘 정리하기

R, G, B 색 이름 모음, 색상 이름들(color names) ( https://codepen.io/YoungHeom/pen/dyEvErj )

 

 

카카오뱅크 모작 정리 ( https://codepen.io/YoungHeom/pen/NWVdVbQ )

n차시도 될 때마다 꼭 우측하단 fork 누르기

 

오늘 할 일

 

프로그래머스에서 자바스크립트 연습문제 풀기

( https://school.programmers.co.kr/learn/challenges/beginner?order=acceptance_desc )

 

 

Q. int는 뭐죠?

int는 정수(integer)를 나타내는 데이터 타입입니다. C++와 같은 많은 프로그래밍 언어에서 사용됩니다.
정수는 소수점 이하의 값을 가지지 않고, 음수와 양수를 모두 포함합니다.
int는 일반적으로 컴퓨터 메모리에서 정수를 표현하는 데 사용되는 기본적인 데이터 타입 중 하나입니다.

예를 들어, -5, 0, 42와 같은 숫자는 모두 정수입니다. 이러한 값들은 int 변수에 할당하여 저장할 수 있습니다. 함수의 매개변수나 반환값으로도 int를 사용할 수 있습니다.

Q. return이 뭐죠? - 답변1

`return`은 함수에서 값을 반환하는 데 사용되는 키워드입니다. 함수가 호출되었을 때 그 결과를 호출한 곳으로 돌려줄 때 사용됩니다.


함수는 일련의 작업을 수행하고 결과를 반환할 수 있습니다. 이때 `return` 키워드를 사용하여 함수가 계산한 결과나 처리한 값 등을 호출자에게 돌려줍니다.

예를 들어, 다음과 같은 함수가 있다고 가정해보겠습니다.
cpp
int add(int a, int b) {
    return a + b;
}
이 함수는 두 개의 정수를 매개변수로 받아서 그 합을 반환합니다. `return` 키워드를 사용하여 `a + b`의 결과를 호출한 곳으로 반환하게 됩니다. 함수가 호출되면, 그 결과값을 이용하여 다른 작업을 수행하거나 저장할 수 있습니다.

 

Q. return이 뭐죠? - 답변2

return은 프로그래밍에서 함수가 결과 값을 반환할 때 사용되는 키워드입니다. 함수는 주어진 입력에 대해 작업을 수행하고, 그 결과를 호출한 곳으로 돌려줄 수 있습니다. 이 때 사용하는 것이 return 키워드입니다.

기본적인 사용법

함수 내에서 return 키워드를 사용하여 함수의 실행을 중단하고 값을 반환합니다. 반환할 값은 return 키워드 다음에 오는 표현식이 됩니다.
예를 들어, 다음과 같은 함수가 있다고 가정해 봅시다:

int add(int a, int b) {
int sum = a + b; return sum;
}
위의 함수 add는 두 개의 정수 a와 b를 입력받아 더한 후 그 결과를 반환합니다. return 키워드는 sum 변수에 저장된 값을 호출한 곳으로 반환하게 됩니다.

함수 호출 예제

이 함수를 호출하면 반환된 값은 다른 변수에 할당하거나 출력할 수 있습니다.

int result = add(3, 5);
cout << "결과: " << result << endl; // 출력: 결과: 8

주의사항

  • return 키워드를 만나면 함수의 실행은 즉시 중단되며, 해당 값을 호출한 곳으로 반환됩니다.
  • 함수가 반환하는 값의 타입은 함수 정의 시에 반환 타입에 맞아야 합니다. 위 예제에서는 int를 반환하는 것으로 선언되어 있기 때문에 int 형식의 값을 반환해야 합니다.
return은 함수의 결과 값을 전달하는 중요한 메커니즘입니다.
함수가 값을 반환하지 않고 단순히 실행만 할 경우에는 return을 생략할 수 있습니다(void 반환 타입 함수 등).

 

'UIUX(03.28~10.02)' 카테고리의 다른 글

0618 화 uiux 53일차  (0) 2024.06.18
0617 월 uiux 52일차  (0) 2024.06.17
0613 목 uiux 50일차  (0) 2024.06.13
0612 수 uiux 49일차  (0) 2024.06.12
0611 화 uiux 48일차  (0) 2024.06.11

0613 목 uiux 50일차

 

웹코딩 참고 사이트(김영원 강사님)
https://kimyws.tistory.com/29 )
https://webstoryboy.co.kr/ )

플렉스 개구리
https://flexboxfroggy.com/#ko )
혜지 강사님 수업페이지(html&css) ( https://codepen.io/hjyee/full/OJGrVYJ ).
자바스크립트 수업페이지 ( https://codepen.io/hjyee/full/PogMVOP )
깃허브 기초 ( https://codepen.io/hjyee/full/LYoNWga )
기초 키보드 사용법 ( https://codepen.io/YoungHeom/pen/eYaOYEX )
연산자 ( https://codepen.io/YoungHeom/pen/Rwmbxze )
코드펜 사용법 ( https://codepen.io/YoungHeom/pen/gOJOWgE )
무료 강의 ( https://programmers.co.kr/ )
자바스크립트 정리 ( https://velog.io/@solmii/Java-Script%EB%A5%BC-Script )

피그마 강좌 ( https://www.youtube.com/@yeonjung-figma ), ( https://www.youtube.com/@UXUIDesign ) - 개인적 메모
작업물 보기 - 핀터레스트나 드리블( https://dribbble.com/ ), 노트폴리오, 비핸스, 디자인 나스 - ( https://designnas.com/ )
자격증 기출문제 ( https://www.comcbt.com/ )( https://quizeey.com/ )
https://cubic-bezier.com/ )

HTML에서 사용되는 quot? amp? lt? gt? 등등 기호 ( https://darusamu.tistory.com/32 )

keyframes 찾아보기. 정리된거 블로그에 적기( https://velog.io/@ye-ji/CSS-%EC%95%A0%EB%8B%88%EB%A9%94%EC%9D%B4%EC%85%98keyframes )

https://ho4607.notion.site/keyframes-animation-64e7a02bc15a47c6982dda5782f79156 )

전에 작업했던 만년필 사이트 파일 css부분 다시 /* ~ 시작 */  /* ~ 끝 */으로 잘 정리하기

 

카카오뱅크 모작 정리 ( https://codepen.io/YoungHeom/pen/NWVdVbQ )

n차시도 될 때마다 꼭 우측하단 fork 누르기

 

다음주 월요일(17일)부터 면담(건의사항, 고충사항 생각해두기)
25일평가 안내
프로토타입 수집 및 제작
스토리보드, 브레인 스토밍
스케치 자료 제출
스케치는 이미지로 제출

'UIUX(03.28~10.02)' 카테고리의 다른 글

0617 월 uiux 52일차  (0) 2024.06.17
0614 금 uiux 51일차  (1) 2024.06.14
0612 수 uiux 49일차  (0) 2024.06.12
0611 화 uiux 48일차  (0) 2024.06.11
0610 월 uiux 47일차  (0) 2024.06.10

0612 수 uiux 49일차

웹코딩 참고 사이트(김영원 강사님)
https://kimyws.tistory.com/29 )
https://webstoryboy.co.kr/ )

플렉스 개구리
https://flexboxfroggy.com/#ko )
혜지 강사님 수업페이지(html&css) ( https://codepen.io/hjyee/full/OJGrVYJ ).
자바스크립트 수업페이지 ( https://codepen.io/hjyee/full/PogMVOP )
깃허브 기초 ( https://codepen.io/hjyee/full/LYoNWga )
기초 키보드 사용법 ( https://codepen.io/YoungHeom/pen/eYaOYEX )
연산자 ( https://codepen.io/YoungHeom/pen/Rwmbxze )
코드펜 사용법 ( https://codepen.io/YoungHeom/pen/gOJOWgE )
무료 강의 ( https://programmers.co.kr/ )
자바스크립트 정리 ( https://velog.io/@solmii/Java-Script%EB%A5%BC-Script )

피그마 강좌 ( https://www.youtube.com/@yeonjung-figma ), ( https://www.youtube.com/@UXUIDesign ) - 개인적 메모
작업물 보기 - 핀터레스트나 드리블( https://dribbble.com/ ), 노트폴리오, 비핸스, 디자인 나스 - ( https://designnas.com/ )
자격증 기출문제 ( https://www.comcbt.com/ )( https://quizeey.com/ )
https://cubic-bezier.com/ )

HTML에서 사용되는 quot? amp? lt? gt? 등등 기호 ( https://darusamu.tistory.com/32 )

keyframes 찾아보기. 정리된거 블로그에 적기( https://velog.io/@ye-ji/CSS-%EC%95%A0%EB%8B%88%EB%A9%94%EC%9D%B4%EC%85%98keyframes )

( https://ho4607.notion.site/keyframes-animation-64e7a02bc15a47c6982dda5782f79156 )

전에 작업했던 만년필 사이트 파일 css부분 다시 /* ~ 시작 */  /* ~ 끝 */으로 잘 정리하기

 

카카오뱅크 모작 정리 ( https://codepen.io/YoungHeom/pen/NWVdVbQ )

n차시도 될 때마다 꼭 우측하단 fork 누르기

 

슬릭슬라이더 ( https://codepen.io/YoungHeom/pen/XWweyqK )

체크카드 5차 마무리 ( https://codepen.io/YoungHeom/pen/vYweQoz )

 

 div.center = .center

 

     - [슬릭 슬라이더 코드 가져오기]( https://codepen.io/hjyee/pen/eYKMadw )
     - [slick slider]( https://kenwheeler.github.io/slick/ )
     - [swiper]( https://swiperjs.com/demos )
     - [swiper demo]( https://swiperjs.com/demos )
     - [CODEPEN - swiper 예제]( https://codepen.io/hjyee/pen/XWweyzd )

 

left: calc(100% + 100px); 왼쪽부터 100퍼센트 만큼 + 100px 더 가서 배치. 100퍼만큼+100px만큼 더!라는 뜻

'UIUX(03.28~10.02)' 카테고리의 다른 글

0614 금 uiux 51일차  (1) 2024.06.14
0613 목 uiux 50일차  (0) 2024.06.13
0611 화 uiux 48일차  (0) 2024.06.11
0610 월 uiux 47일차  (0) 2024.06.10
0607 금 uiux 46일차  (0) 2024.06.07

0611 화 uiux 48일차

웹코딩 참고 사이트(김영원 강사님)
https://kimyws.tistory.com/29 )
https://webstoryboy.co.kr/ )

플렉스 개구리
https://flexboxfroggy.com/#ko )
혜지 강사님 수업페이지(html&css) ( https://codepen.io/hjyee/full/OJGrVYJ ).
자바스크립트 수업페이지 ( https://codepen.io/hjyee/full/PogMVOP )
깃허브 기초 ( https://codepen.io/hjyee/full/LYoNWga )
기초 키보드 사용법 ( https://codepen.io/YoungHeom/pen/eYaOYEX )
연산자 ( https://codepen.io/YoungHeom/pen/Rwmbxze )
코드펜 사용법 ( https://codepen.io/YoungHeom/pen/gOJOWgE )
무료 강의 ( https://programmers.co.kr/ )
자바스크립트 정리 ( https://velog.io/@solmii/Java-Script%EB%A5%BC-Script )

피그마 강좌 ( https://www.youtube.com/@yeonjung-figma ), ( https://www.youtube.com/@UXUIDesign ) - 개인적 메모
작업물 보기 - 핀터레스트나 드리블( https://dribbble.com/ ), 노트폴리오, 비핸스, 디자인 나스 - ( https://designnas.com/ )
자격증 기출문제 ( https://www.comcbt.com/ )( https://quizeey.com/ )
https://cubic-bezier.com/ )

HTML에서 사용되는 quot? amp? lt? gt? 등등 기호 ( https://darusamu.tistory.com/32 )

keyframes 찾아보기. 정리된거 블로그에 적기

 

카카오뱅크 모작 정리 ( https://codepen.io/YoungHeom/pen/NWVdVbQ )

n차시도 될 때마다 꼭 우측하단 fork 누르기

 

발견되면 활성화시키는 라이브러리 ( https://codepen.io/YoungHeom/pen/vYwJvbO )

 

대출박스 3차~

 

서비스ㆍ경험디자인 관찰조사 - ppt ( https://www.miricanvas.com/v/13c1b4q )

 

 

강사님 메모


부족한 부분 연습하고

자료조사나 포트폴리오
만들 것 준비

4단계

문제 발견 단계
사용자 경험을 높이기 위해 기획
디자인 하며 사용자와 시장, 경쟁서비스를 분석 가장 중요한 기본

방법론
시장분석 : 사업규모 파악
경쟁분석 : 서비스 경향 가치 파악(X)
사용자 분석 : 핵심고객 도출
성향, 요구사항을 파악
트렌드 분석 : 디자인 트렌드, 기술 트렌드 

환경분석
사용자와 연관된 주변환경에 대한 분석 필요

서비스를 이용하는 핵심 사용분석
서비스와 연관된 시장 및 경쟁분석

시장분석 : 기록과 통계에 근거한
탁상조사법 (인터넷 참고문헌 이용)

시장 분석 목적
서비스 구현될 시장 규모파악
중장기 수요예측 전망
시장 변화 요인 파악
시장 기회와 위협 요소 파악

여행
질병의 유행 빈도 

탁상 조사법은 단점이 많다
데이터의 신뢰성 문제
현장에서 발생하는 핵심 사항을 놓침
주관적인 판단으로 편향된 결론 도출

문제에 대한 원인을 다양하게 고려
결과 숫자 의존하지 않고 합리적 의심
여러 방법론 사용
신뢰할수 있는 자료 이용

관련있는 분야를 중심으로 범위 좁혀
최근 트렌드 중심으로 범위 선정
기존 범위 중심에서 연관 시장 확장

주제 선정
포트폴리오를 위한

어떤 내용들: 회사 연혁,     (로그인 회원가입 등은 제외)

쇼핑몰은 제외! 회사 소개 등등 보고 정하기. (메인페이지 제외 3페이지)

예시. ( https://www.samsung.com/sec/sustainability/main/ )메인페이지에 어떤 내용들이 있는지 일단 분석.

아주 간단하게 적어도 됨. 사이트를 하나 정해서 예시처럼 뭐가 들어갈지만 적으면 됨.(텍스트로만 작성)

오늘까지 제출

 

페르소나(가상의 인물)를 정하기 ex. 어떤 연령대, 성별의 인물인지, 가상의 인물이 이 페이지를 본다고 생각하고 내용 구성

타겟층을 정하면 어떻게 구성할지 나옴

'UIUX(03.28~10.02)' 카테고리의 다른 글

0613 목 uiux 50일차  (0) 2024.06.13
0612 수 uiux 49일차  (0) 2024.06.12
0610 월 uiux 47일차  (0) 2024.06.10
0607 금 uiux 46일차  (0) 2024.06.07
0605 수 uiux 45일차  (0) 2024.06.05

0610 월 uiux 47일차

웹코딩 참고 사이트(김영원 강사님)
https://kimyws.tistory.com/29 )
https://webstoryboy.co.kr/ )

플렉스 개구리
https://flexboxfroggy.com/#ko )
혜지 강사님 수업페이지(html&css) ( https://codepen.io/hjyee/full/OJGrVYJ ).
자바스크립트 수업페이지 ( https://codepen.io/hjyee/full/PogMVOP )
깃허브 기초 ( https://codepen.io/hjyee/full/LYoNWga )
기초 키보드 사용법 ( https://codepen.io/YoungHeom/pen/eYaOYEX )
연산자 ( https://codepen.io/YoungHeom/pen/Rwmbxze )
코드펜 사용법 ( https://codepen.io/YoungHeom/pen/gOJOWgE )
무료 강의 ( https://programmers.co.kr/ )
자바스크립트 정리 ( https://velog.io/@solmii/Java-Script%EB%A5%BC-Script )

피그마 강좌 ( https://www.youtube.com/@yeonjung-figma ), ( https://www.youtube.com/@UXUIDesign ) - 개인적 메모
작업물 보기 - 핀터레스트나 드리블( https://dribbble.com/ ), 노트폴리오, 비핸스, 디자인 나스 - ( https://designnas.com/ )
자격증 기출문제 ( https://www.comcbt.com/ )( https://quizeey.com/ )
https://cubic-bezier.com/ )

HTML에서 사용되는 quot? amp? lt? gt? 등등 기호 ( https://darusamu.tistory.com/32 )

 

 

카카오뱅크 모작 정리 ( https://codepen.io/YoungHeom/pen/NWVdVbQ )

n차시도 될 때마다 꼭 우측하단 fork 누르기

상단 6차~10차(완성)

대출 박스 1차, 2차


- 하이픈, _ 언더바

 

( https://cubic-bezier.com/ )

 

 

.sky(자식)한테 제트인덱스: -1;, .loan_box(부모)에게 제트인덱스: 0; 주면 부모보다는 위에 있고 형제인 .con보다는 아래에 위치한다.

 

 

 

 

 

 

강사님 메모( 교재 - 사용자 경험을 창조하는 UX/UI 디자인 )

UI 사용자 인터페이스
사람 - 사물 명령을 수행
의사소통이 이루어지는 접점


UX 사용자 경험

사용자 인터페이스로
사용자 경험을 높이기 위한
최종 결과물

UX : 연구, 분석 주로 하는
디자이너
논리, 이론, 분석

UI : 분석 된 결과를 토대로
사용자 인터페이스를 설계
및 디자이너
시각적 요소를 강조

UX분석 - 니즈 도출
- 아키덱쳐 설계 - UI디자인
- UI 테스트

가이드 : 기본 설명

UI 디자인 방법론 우선순위
- 회사 UI 가이드라인 
- OS(운영체계)
  UI 가이드 라인
  UX 디자인 핵심요소 적용
  디자인/기술 트렌드 적용 

UI / UX 디자인 프로세스

더블 다이아몬드 프로세스

확산 : 다양한 아이디어 제안
수렴 : 도출아이디어로
해결책 정리

문제발견 : 고객경험, 리서치
문제 설정 

아이디어 수립 : 자료 분석
디자인 방향 설정

해결책 구체화 :
세부 해결 방안구성

적용
실행 계획 수립

사실 발견
잔돈 처리 불편해 했다.

정의 하기

발전하기
계좌바로 저금해주는 


디자인 순환모델

우선 만들어 보기
간단간단 문제 발견
간단한 문제를 해결
완성

검토
문제 발견
해결


웹 페이지 만들기 좋다.

Ctrl + Shift + G
그룹 해제

Shift + A 오토레이아웃
Alt + Shift + A 해제

클릭 : 한쪽
Alt : 좌우, 위아래
Alt + Shift : 상하좌우

Ctrl + 클릭 : 전체 통제
Alt 디자인에서 통제

'UIUX(03.28~10.02)' 카테고리의 다른 글

0612 수 uiux 49일차  (0) 2024.06.12
0611 화 uiux 48일차  (0) 2024.06.11
0607 금 uiux 46일차  (0) 2024.06.07
0605 수 uiux 45일차  (0) 2024.06.05
0604 화 uiux 44일차  (0) 2024.06.04

0607 금 uiux 46일차

웹코딩 참고 사이트(김영원 강사님)
https://kimyws.tistory.com/29 )
https://webstoryboy.co.kr/ )

플렉스 개구리
https://flexboxfroggy.com/#ko )
혜지 강사님 수업페이지(html&css) ( https://codepen.io/hjyee/full/OJGrVYJ ).
자바스크립트 수업페이지 ( https://codepen.io/hjyee/full/PogMVOP )
깃허브 기초 ( https://codepen.io/hjyee/full/LYoNWga )
기초 키보드 사용법 ( https://codepen.io/YoungHeom/pen/eYaOYEX )
연산자 ( https://codepen.io/YoungHeom/pen/Rwmbxze )
코드펜 사용법 ( https://codepen.io/YoungHeom/pen/gOJOWgE )
무료 강의 ( https://programmers.co.kr/ )
자바스크립트 정리 ( https://velog.io/@solmii/Java-Script%EB%A5%BC-Script )

피그마 강좌 ( https://www.youtube.com/@yeonjung-figma ), ( https://www.youtube.com/@UXUIDesign ) - 개인적 메모
작업물 보기 - 핀터레스트나 드리블( https://dribbble.com/ ), 노트폴리오, 비핸스
자격증 기출문제 ( https://www.comcbt.com/ )( https://quizeey.com/ )

HTML에서 사용되는 quot? amp? lt? gt? 등등 기호 ( https://darusamu.tistory.com/32 )

.

UI UX

GUI( Graphical User Interface )

 

추상적 개념을 포함하고 있다.

Interface, Interaction, Information

시각적인 아름다운 결과물

그래픽적 디자인적 접근 x

Interface(접점) 프로그램언어

사용자가 시스템과 상호작용하는 요소, 사용자가 어떻게 인식하고 사용하는지 직접적인 영향을 미침

 

 

Interaction 상호작용하는 방법

행동과 반응

 

초점

1) 시각적, 배치적 집중

2) 사용자의 행동, 시스템의 반응에 집중

 

목적

1) 사용성 높이고, 직관적 디자인 제공

2) 효율적인 상호작용을 통해 경험을 최적

 

구성

1) 정적인 요소(레이아웃, 디자인)

2) 동적인 요소(사용자 입력, 피드백)

 

시스템 구성(인포메이션 아키텍쳐)

사용자가 시스템 웹사이트에서 정보를 쉽게 찾을 수 있도록 구조화하는 것

사용자 효율 높일 수 있고 만족도 향상

 

1) 목적

사용자 효율 향상

정보의 접근성 증가

일관된 사용자 경험 제공 (모든 페이지에 일관된 정보 구조 → 사용자의 혼란 ↓ )

 

제품디자인 / UX 디자인 (효용, 사용성 디자인 어떻게 사용하게끔 할 것인지)

예) 포스트잇 - 절대 떨어지지 않는 접착제 → 잘 떼어지는 (사용 목적에 대해서 다르게 생각)

 

인터렉티브 제품에서 구현되는 디자인적 요소 제공

 

사용의도가 어떻게 변화하느냐에 따라 디자인&환경 변경

 

 

 

.


 

HTML에서 사용되는 quot? amp? lt? gt? 등등 기호 ( https://darusamu.tistory.com/32 )

상단 1차 시도 ( https://codepen.io/YoungHeom/pen/mdYwvGX )

 

 

 

 

 

 

 

 

강사님 메모

UI UX 

GUI

추상적 개념 포함 하고 있다.
Interface, Interaction, Information
근본 개념, 

시각적인 아름다운 결과물 만드는것이
그래픽 디자인적 접근 X

Interface (접점) 프로그램언어
사용자가 시스템과 상호작용하는 요소
언어를 몰라도 어떻게 작용하는지
몰라도

휴대폰 사용 문제 없다.
웹 접점 사용을 한다.

인터페이스 : 가시적인요소
사용자가 어떻게 인식하고 사용하는지
직접적인 영향을 미침

Interaction 상호작용하는 방법
행동과 반응

초점
1. 시각적, 배치적 집중
2. 사용자의 행동, 시스템의 반응에 집중

목적
1. 사용성을 높이고, 직관적 디자인 제공
2. 효율적인 상호작용을 통해 경험을 최적

구성
1. 정적인요소(레이아웃, 디자인)
2. 동적인요소 (사용자 입력, 피드백)

시스템 구성
사용자가 시스템 웹사이트에서 정보를 쉽게찾을수 있도록 구조화 하는것
사용자 효율 높일수 가 있고 만족도 향상


1. 목적

사용자 효율 향상
정보의 접근성 증가
일관된 사용자 경험 제공
(모든 페이지에 일과된 정보 구조가 있어서
사용자의 혼란 줄여야 한다.

제품디자인 / UX디자인
효용, 사용성 디자인 어떻게 사용하게 끔
포스트 잇 예전부터 
(절대 떨어지지 않는 접착제)
사용목적에 대해서 다르 게 생각하니

인터렉티브 제품에서 구현되는 
디자인적 요소 제공

사용자 상황 변화에 맞춰 적용되는 디자인

사용의도가 어떻게 변화느냐에 따라서
디자인도 변경, 환경변경

기술의 발전에 따라 디자인이 변경된다.

점점 시간이 지나면 초보 퍼블리싱, 디자인X
AI에게 물어보면된다.

사용자 경험 생각해보면서 디자인

디자인이
쉬워야 하고 유쾌함 즐김

인터 페이스

- 터치
Multi 터치  제스쳐
- AR
- VR
- MR

웹페이지 

- 사용자 (누구 사용하는지)
노인, 어린이, 장애인, 일반
맞춤으로 디자인을 
일반적 디자인

특정인을 위한 사이트 포트폴리오에
UIUX 조금더 들어간 사이트
사용자 분석과 반응하는 형태 구조화

GUI / UIUX

넷플릭스
블랙미러, 당신과 자연의 대결

인터렉티브 디자인
입력 과 출력이 어떻게 되어 지는지도
알고 디자인을 구성하면 좋다.

디자인 4/3 구성 4/1 구현

인터랙션의 주요 고려사항
- 어떤 목적을 가진 상호작용인지 이해 디자인
- 아름답고 편리하고 즐길만 하게 설계
- 버튼이 눌렸을때 입력이 제대로 되는지
(같은행동이 반복되지 않아야 한다.)
- 사용자가 잘 알아볼수 있도록 정보제시
반응이 있어야 한다.

사용자 경험 환경요소
인구분포, 상황인식, 플랫폼

3가지 
웹, ios, 안드로이드
사용자 경험, 디자인 목적

'UIUX(03.28~10.02)' 카테고리의 다른 글

0611 화 uiux 48일차  (0) 2024.06.11
0610 월 uiux 47일차  (0) 2024.06.10
0605 수 uiux 45일차  (0) 2024.06.05
0604 화 uiux 44일차  (0) 2024.06.04
0603 월 uiux 43일차  (0) 2024.06.03

0605 수 uiux 45일차

 

푸터 완성하기 ( https://codepen.io/YoungHeom/pen/KKLmNRw )

 

http://naver.me/5JVzJJFb ) 조별
https://naver.me/xwWPjZKR ) 개인

스토리보드, 와이어프레임, (디자인 필요x) (조원끼리 같은 주제로 해도 되고 아니어도 됨)

'사용자 경험을 창조하는 ui/ux 디자인' 책 가져오기

디자인 고민 많이 하면서
HTML, CSS, JS 많이 작성해볼 것(아직 JS 활용 못하는데?)
쉬운 부분에 대해서는 다른 효과 다른 구현 부분적인 것 넣어볼 것

폰트사이즈 rem 2px마다 0.125px씩 늘어남

 


 

 

카카오뱅크 모작 정리 ( https://codepen.io/YoungHeom/pen/NWVdVbQ )

n차시도 될 때마다 꼭 우측하단 fork 누르기

 

### 상단 배너박스 1
- [1차 시도]( https://codepen.io/YoungHeom/pen/jOomRNL )
  - 목표
    - 배경 이미지 가져오기, 기본 레이아웃 작업
- [2차 시도]( https://codepen.io/YoungHeom/pen/zYQwXrM )
  - 목표
    - 배경 색상 맞추기
- [3차 시도]( https://codepen.io/YoungHeom/pen/qBGmwNz )
  - 목표
    - 텍스트 박스 레이아웃
- [4차 시도]( https://codepen.io/YoungHeom/pen/LYoyvrV )
  - 목표
    - 스프라이트 이미지 실험
- [5차 시도]( https://codepen.io/YoungHeom/pen/GRamLeE )
  - 목표
    - 텍스트 박스 버튼에 아이콘 적용
- [6차 시도]( https://codepen.io/YoungHeom/pen/XWwRwrr )
  - 목표
    - 이미지, 텍스트 박스 합치기

 

 

 

 

 

에치있게.jpg
0.04MB

'UIUX(03.28~10.02)' 카테고리의 다른 글

0610 월 uiux 47일차  (0) 2024.06.10
0607 금 uiux 46일차  (0) 2024.06.07
0604 화 uiux 44일차  (0) 2024.06.04
0603 월 uiux 43일차  (0) 2024.06.03
0531 금 uiux 42일차  (0) 2024.05.31

0604 화 uiux 44일차

혜지 강사님 수업페이지(html&css) ( https://codepen.io/hjyee/full/OJGrVYJ ).
자바스크립트 수업페이지 ( https://codepen.io/hjyee/full/PogMVOP )
깃허브 기초 ( https://codepen.io/hjyee/full/LYoNWga )
기초 키보드 사용법 ( https://codepen.io/YoungHeom/pen/eYaOYEX )
연산자 ( https://codepen.io/YoungHeom/pen/Rwmbxze )
코드펜 사용법 ( https://codepen.io/YoungHeom/pen/gOJOWgE )
무료 강의 ( https://programmers.co.kr/ )
피그마 강좌 ( https://www.youtube.com/@yeonjung-figma ), ( https://www.youtube.com/@UXUIDesign ) - 개인적 메모
작업물 보기 - 핀터레스트나 드리블( https://dribbble.com/ ), 노트폴리오, 비핸스
자격증 기출문제 ( https://www.comcbt.com/ )( https://quizeey.com/ )

 

 

홈페이지 푸터 다시 만들기 ( https://codepen.io/YoungHeom/pen/KKLmNRw )

ㄴ그러고보니 만년필 웹페이지 메인홈 가장 상단 사진 커서 안바뀌게 하기(a태그를 없애면 됨)

 

 


 

카카오뱅크 모작 정리 ( https://codepen.io/YoungHeom/pen/NWVdVbQ )

n차시도 될 때마다 꼭 우측하단 fork 누르기

 

0604_ 2차 메뉴 관련사이트까지 완성

8차 시도 ( https://codepen.io/YoungHeom/pen/Povmjqr )

9차 시도( https://codepen.io/YoungHeom/pen/RwmVgjz )

10차 시도 ( https://codepen.io/YoungHeom/pen/qBGmXNe )

 

a태그 /*  라인하이트는 행간이다 */ 수직 가운데정렬(상위 태그 높이만큼 설정하기)

div>span인데 div 높이가 100px 이면 line-height: 100px;(보더 적용되어 있으면 박스사이징 설정해보기. 차이가 아예 없음 안해도 됨!)

 

'UIUX(03.28~10.02)' 카테고리의 다른 글

0607 금 uiux 46일차  (0) 2024.06.07
0605 수 uiux 45일차  (0) 2024.06.05
0603 월 uiux 43일차  (0) 2024.06.03
0531 금 uiux 42일차  (0) 2024.05.31
0530 목 uiux 41일차  (0) 2024.05.30

0603 월 uiux 43일차

혜지 강사님 수업페이지(html&css) ( https://codepen.io/hjyee/full/OJGrVYJ ).
자바스크립트 수업페이지 ( https://codepen.io/hjyee/full/PogMVOP )
깃허브 기초 ( https://codepen.io/hjyee/full/LYoNWga )
기초 키보드 사용법 ( https://codepen.io/YoungHeom/pen/eYaOYEX )
연산자 ( https://codepen.io/YoungHeom/pen/Rwmbxze )
코드펜 사용법 ( https://codepen.io/YoungHeom/pen/gOJOWgE )
무료 강의 ( https://programmers.co.kr/ )
피그마 강좌 ( https://www.youtube.com/@yeonjung-figma ), ( https://www.youtube.com/@UXUIDesign ) - 개인적 메모
작업물 보기 - 핀터레스트나 드리블( https://dribbble.com/ ), 노트폴리오, 비핸스
자격증 기출문제 ( https://www.comcbt.com/ )( https://quizeey.com/ )

 

 

홈페이지 푸터 개구려서 다시 만들기 ( https://codepen.io/YoungHeom/pen/KKLmNRw )

 

 

카카오뱅크 모작 ( https://codepen.io/YoungHeom/pen/NWVdVbQ )

 

카뱅 메뉴 완성하기 3, 4, 5, 6, 7차 시도

 

 

 

'UIUX(03.28~10.02)' 카테고리의 다른 글

0605 수 uiux 45일차  (0) 2024.06.05
0604 화 uiux 44일차  (0) 2024.06.04
0531 금 uiux 42일차  (0) 2024.05.31
0530 목 uiux 41일차  (0) 2024.05.30
0529 수 uiux 40일차  (0) 2024.05.29

0531 금 uiux 42일차

혜지 강사님 수업페이지(html&css) ( https://codepen.io/hjyee/full/OJGrVYJ ).
자바스크립트 수업페이지 ( https://codepen.io/hjyee/full/PogMVOP )
깃허브 기초 ( https://codepen.io/hjyee/full/LYoNWga )
기초 키보드 사용법 ( https://codepen.io/YoungHeom/pen/eYaOYEX )
연산자 ( https://codepen.io/YoungHeom/pen/Rwmbxze )
코드펜 사용법 ( https://codepen.io/YoungHeom/pen/gOJOWgE )
무료 강의 ( https://programmers.co.kr/ )
피그마 강좌 ( https://www.youtube.com/@yeonjung-figma ), ( https://www.youtube.com/@UXUIDesign ) - 개인적 메모
작업물 보기 - 핀터레스트나 드리블( https://dribbble.com/ ), 노트폴리오, 비핸스
자격증 기출문제 ( https://www.comcbt.com/ )( https://quizeey.com/ )

홈페이지 푸터 구려서 다시 만들기 ( https://codepen.io/YoungHeom/pen/KKLmNRw )

카카오뱅크 모작 ( https://codepen.io/YoungHeom/pen/NWVdVbQ )

 

 

새 웹사이트 마인드맵 ( https://www.figma.com/board/1mEDDKVCBH2TpyJ2kyVXGR/%EB%91%90-%EB%B2%88%EC%A7%B8-%EC%9B%B9%EC%82%AC%EC%9D%B4%ED%8A%B8-%EC%A3%BC%EC%A0%9C-%EC%A0%95%ED%95%98%EA%B8%B0?node-id=5-516&t=MmiDOsW7C1ZbCDyU-1 )

이미지 가져올 때 우클릭-검사하면 이미지 첨부된 태그로 가짐!!!

코드펜 코드 복사할 때 복붙말고 우측 하단에 Fork 있는데 그거 누르면 됨@@

( https://codepen.io/YoungHeom/pen/abrpgmR ) 시험 꼭 제출하기!!!@@@@@@@

 

 

새로운 웹사이트 만들기 1 - 주제 정하기

 

마인드맵 ( https://www.figma.com/board/1mEDDKVCBH2TpyJ2kyVXGR/%EB%91%90-%EB%B2%88%EC%A7%B8-%EC%9B%B9%EC%82%AC%EC%9D%B4%ED%8A%B8-%EC%A3%BC%EC%A0%9C-%EC%A0%95%ED%95%98%EA%B8%B0?node-id=5-516&t=MmiDOsW7C1ZbCDyU-1 )

 

 

.

.

.

.

.

( http://naver.me/5JVzJJFb ) 조별
( https://naver.me/xwWPjZKR ) 개인

1. 다양한 주제들 확인

2. 특정 주제를 결정하고 유사한 내용 마인드맵

3. 마인드 맵을 보면서 어떤 사이트를 만들지 결정

4. 사용자 분석

5. 사용자 분석에 따른 그 사용자들이 많이 이용하는
웹 사이트 3개 분석(핵심, 디자인적인 표현방식)
10~20개 정도 분석

레이아웃 구성 및 버튼의 위치 왜 그곳에 배치 했는지

6. 자신이 만들 웹 사이트에 대해서 의미 찾기
예) 구글: 누구나가 자유롭게 들어와서 정보를 찾는 사이트
예) 자동차 역사 : 자동차를 구매하기 위한 것이 아닌
자동차의 변천 과정을 보고 싶은 사람들이 찾는 사이트
왜 만들어야 하는지 이유가 있도록

.


 

 

카카오뱅크 모작 정리 페이지 ( https://codepen.io/hjyee/full/mdYRYrz )

1차 시도 ( https://codepen.io/hjyee/pen/MWdJdoe )

 

모작하기 전에 사전조사를 해야되는 구나... 신기

그리고 가운데 파란 네모에 플렉스 그로우를 주면 저렇게 되는고만! 방법 알았으니까 이제 스페이스-비트윈 할 필요 없는 듯

'UIUX(03.28~10.02)' 카테고리의 다른 글

0604 화 uiux 44일차  (0) 2024.06.04
0603 월 uiux 43일차  (0) 2024.06.03
0530 목 uiux 41일차  (0) 2024.05.30
0529 수 uiux 40일차  (0) 2024.05.29
0528 화 uiux 39일차  (1) 2024.05.28

0530 목 uiux 41일차

혜지 강사님 수업페이지(html&css) ( https://codepen.io/hjyee/full/OJGrVYJ ).
자바스크립트 수업페이지 ( https://codepen.io/hjyee/full/PogMVOP )
깃허브 기초 ( https://codepen.io/hjyee/full/LYoNWga )
기초 키보드 사용법 ( https://codepen.io/YoungHeom/pen/eYaOYEX )
연산자 ( https://codepen.io/YoungHeom/pen/Rwmbxze )
코드펜 사용법 ( https://codepen.io/YoungHeom/pen/gOJOWgE )
무료 강의 ( https://programmers.co.kr/ )
피그마 강좌 ( https://www.youtube.com/@yeonjung-figma ), ( https://www.youtube.com/@UXUIDesign ) - 개인적 메모
작업물 보기 - 핀터레스트나 드리블( https://dribbble.com/ ), 노트폴리오, 비핸스
자격증 기출문제 ( https://www.comcbt.com/ )( https://quizeey.com/ )

 

 

홈페이지 푸터 개구려서 다시 만들기 ( https://codepen.io/YoungHeom/pen/KKLmNRw )

 

 

 

 

인하우스
큰 프로젝트, 장기 프로젝트: 완벽한 프로젝트를 배움
경력자를 많이 뽑음

에이전시
단기 프로젝트: 많은 프로젝트를 할 수 있음

 

홈페이지 주제 - 마인드맵

 

1) 주제를 정하기 위한 브레인스토밍

2) 주제를 상세화

3) 이용할 사람들을 상세화

4) UI 디자인 요소들의 배치와 배치 이유

5) 디자인 도출 - 시각적 디자인(폰트, 색감)

내가 좋은 홈페이지를 디자인적으로 분석
이 페이지가 좋다. 왜 좋을까?(이유)

 

 

'UIUX(03.28~10.02)' 카테고리의 다른 글

0603 월 uiux 43일차  (0) 2024.06.03
0531 금 uiux 42일차  (0) 2024.05.31
0529 수 uiux 40일차  (0) 2024.05.29
0528 화 uiux 39일차  (1) 2024.05.28
0527 월 uiux 38일차  (0) 2024.05.27

0529 수 uiux 40일차

 

 

푸터 다시. 너무 디자인적으로 개별로 핵 별로임.

 

상세페이지 버리고 브랜드 소개나 회사소개나 디자인적인 게 들어갈 수 있는 걸로 다시 만들기

 

그리고 상품리스트 여백 설정. 

순서 설정 메뉴 가운데정렬

리스트 총 두개인데 두개 사이 마진 넣어주기(위에꺼를 마진바텀)

 

 

 

 

피그마로 웹 시안 짜기

'UIUX(03.28~10.02)' 카테고리의 다른 글

0531 금 uiux 42일차  (0) 2024.05.31
0530 목 uiux 41일차  (0) 2024.05.30
0528 화 uiux 39일차  (1) 2024.05.28
0527 월 uiux 38일차  (0) 2024.05.27
0524 금 uiux 37일차  (0) 2024.05.24

0528 화 uiux 39일차

혜지 강사님 수업페이지(html&css) ( https://codepen.io/hjyee/full/OJGrVYJ ).
자바스크립트 수업페이지 ( https://codepen.io/hjyee/full/PogMVOP )
깃허브 기초 ( https://codepen.io/hjyee/full/LYoNWga )
기초 키보드 사용법 ( https://codepen.io/YoungHeom/pen/eYaOYEX )
연산자 ( https://codepen.io/YoungHeom/pen/Rwmbxze )
코드펜 사용법 ( https://codepen.io/YoungHeom/pen/gOJOWgE )
무료 강의 ( https://programmers.co.kr/ )
피그마 강좌 ( https://www.youtube.com/@yeonjung-figma ), ( https://www.youtube.com/@UXUIDesign ) - 개인적 메모
작업물 보기 - 핀터레스트나 드리블( https://dribbble.com/ ), 노트폴리오, 비핸스
자격증 기출문제 ( https://www.comcbt.com/ )( https://quizeey.com/ )

 

피그마

 

반전 좌우반전 shift H 상하반전 shift v

안내선( https://velog.io/@dev_jeehyeon/3-Figma-%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0-Guide )

안내선 보이기 Shift + R

피그마 기초 정리 ( https://velog.io/@duboo/Figma-%EC%9B%B9-%EC%95%B1-%EB%94%94%EC%9E%90%EC%9D%B8%EC%9D%84-%EC%9C%84%ED%95%9C-%EA%B8%B0%EC%B4%88 )

vs코드 단축키 정리 ( https://velog.io/@solmii/VScode-%EB%8B%A8%EC%B6%95%ED%82%A4-%EB%BD%80%EA%B0%9C%EA%B8%B0-MAC )

자바스크립트 정리 ( https://velog.io/@solmii/Java-Script%EB%A5%BC-Script )

 

페이지 크기에 따라 이미지 크기 조절하는 방법

 

강사님 메모

피그마
클라우드 기반
어느 PC에서 사용하더라도 아이디만 있으면
제한 사용할 수 있다.

팀원 협업이 가능

웹디자인의 필수
업데이트가 빠르다.
2년전 최근 자료 확인

UIUX 

확대 축소 Ctrl + 마우스휠
Ctrl + 0 100% 화면보기
space 화면이동

단축키 F 프레임

Ctrl + D 복제

Ctrl + Alt + G
프래임그룹
Ctrl + G 그룹
Ctrl + <- 그룹해제

 

 

 

 

컴활 한능검.zip
9.98MB

 

 

 

ㄴ cbt

'UIUX(03.28~10.02)' 카테고리의 다른 글

0530 목 uiux 41일차  (0) 2024.05.30
0529 수 uiux 40일차  (0) 2024.05.29
0527 월 uiux 38일차  (0) 2024.05.27
0524 금 uiux 37일차  (0) 2024.05.24
0523 목 uiux 36일차  (0) 2024.05.23

0527 월 uiux 38일차

웹코딩 참고 사이트 김영원 강사님
https://kimyws.tistory.com/29 )
https://webstoryboy.co.kr/ )

플렉스 개구리
https://flexboxfroggy.com/#ko )
혜지 강사님 수업페이지(html&css) ( https://codepen.io/hjyee/full/OJGrVYJ ).
자바스크립트 수업페이지 ( https://codepen.io/hjyee/full/PogMVOP )
깃허브 기초 ( https://codepen.io/hjyee/full/LYoNWga )
기초 키보드 사용법 ( https://codepen.io/YoungHeom/pen/eYaOYEX )
연산자 ( https://codepen.io/YoungHeom/pen/Rwmbxze )
코드펜 사용법 ( https://codepen.io/YoungHeom/pen/gOJOWgE )
무료 강의 ( https://programmers.co.kr/ )
피그마 강좌 ( https://www.youtube.com/@yeonjung-figma ), ( https://www.youtube.com/@UXUIDesign ) - 개인적 메모
작업물 보기 - 핀터레스트나 드리블( https://dribbble.com/ ), 노트폴리오, 비핸스
자격증 기출문제 ( https://www.comcbt.com/ )( https://quizeey.com/ )

디자인 베이스 ( https://designbase.co.kr/ ) 다 무료는 아님

 

웹페이지 만들기 구성 - 홈, 내부 3개. 총 페이지 4개
메인홈 ( https://codepen.io/YoungHeom/pen/NWVqPZO ) 
내부1 - 상품리스트 ( https://codepen.io/YoungHeom/pen/bGyddbm )
내부2 ( https://codepen.io/YoungHeom/pen/ZENbWXE )
내부3 - 로그인 페이지 ( https://codepen.io/YoungHeom/pen/LYopZPe )
세일러 만년필( https://en.sailor.co.jp/ ), 칼라버스 잉크( https://colorverseink.co.kr/ )
트위스비 ( https://www.twsbi.com/ ), 산리오 페이지 ( https://www.sanrio.co.jp/ )


페이지만들 때 참고할 사이트 - ( https://sailors.co.kr/ ), ( https://www.thehyundai.com/ )
※ () - 괄호 안에 쓴 건 안 들어가는 내용임 

 

 

 

1) 페이지

피그마, 일러스트 이용하여 배치 연습( 디자인 ), 또는 코드로 작성

 

코드 쉽다면?

 디자인 완성 -> 코드 작성 배치

 

코드 짜기 어렵다면?

 디자인 완성, 디자인 완성

 간단 코드 연습

 

프론트, 웹디자인(편집 디자인), 웹퍼블리셔(코드)

 

왜 이런 배치를 했나?

코드는 어디에 배치할지만(구성만)

 

그리드를

일치성, 균형, 배치에 도움을 받기 위해서

배치를 못하면 그리드를 잡아보기(그리드를 어떻게 잡는데??? 크기를 몇으로 해야돼?!? 그리드 여백은??)

 

 

코쟁이(=코드쟁이)는

클래스 이름, 공통된 오브젝트에 이름

nth:child는 되도록 홀수만, 짝수만 제어할 때 사용하기

 

동일한 속성을 여러 클래스에서 작성하지 말 것

콘텐츠 안의 'box-1' 'box-2' 'box-3' 말고 한꺼번에 'box'

이 중에 하나만 제어하고 싶을 땐 id 설정하기

 

글자 3~5 이상 되지 않도록(아마도 클래스명 아이디명일 것임)

 

css

글자의 위계- 같은 계층은 같은 class 또는  h3

비슷한 속성은 한 줄에 쓰려고 하기

크기조절 가장 상위, 위치 설정은 크기 다음

 

ct > box > box-img 이렇게 만들었다가 나중에 ct box box-img 이렇게도 가능(대신 다른 콘텐츠랑 이름은 안 겹치게)

 

 

'.ct >.ct > div' > 'div>div>div'> 'id' > 'class'

자세할수록 우선순위로 스타일 적용됨

 

굳이 반응형 하려고하지 말기. 그냥 일반적인 크기로 사이즈 설정해서 만들기

 

css 스타일 우선순위

 

 

피그마 작업

 

 

강사님 메모

1. 페이지


코드는 거짓말을 하지 않는다.
디자인 많은 사이트를 봐라

디자인 (완성)
피그마, 일러스트
이용하여 배치 연습

코드로 작성

-> 디자인 완성 -> 코드 작성
배치 


디자인 완성, 디자인 완성
간단 코드 연습


웹 관련 예전 한명이서
모든것들을 작업함.


웹디자인 (편집 디자인)
웹퍼블리셔 (코드)

디자인 왜 그렇게 배치를 했는지

웹페이지를 프로그램은 알아서
구성만 배치

그리드 정렬
일치성, 균형, 배치에 도움을 받기 위해서
많다고 좋은 것이 아니다.

가독성이 좋게 하기 위해서
배치 크기 색상 모든 것 맞춰야 한다.

배치를 하는데 너무 못해
그리드라도 잡아 놓고 배치해라

웹으로 구현하지 마라
일러스트, 피그마로 배치만

편안함, 일치성, 균형, 비례



코드짜시는 분들은

클래스 이름
공통된 오브젝트에 이름

아이디 혼자서 사용하는 것

동일한 속성을 여러 클래스에서
작성하지 말것

box 
class=box id=box-center
box

그룹 class

글자 3~5 이상 되지 않도록

궁서 5px 궁서 5px 두께
궁서 10px

글자의 위계
같은 계층은 같은 class 또는
H3

속성 
크기조절 가장위에
위치 그다음

자식요소

ct > box > box-img > img
모든 박스 내가 편하게 짤수


ct  box  box-img  img
모든 박스 내가 편하게 짤수

우선순위
동일한 계층일때는

밑에가 우선(힘이 약함)
클래스 우선도 낮음
id가 우선도가 높음

box-img>img
자세히 사용한것이 우선도가 높다.

왼쪽     가운데    오른쪽
200px   100%    200px


JS
다른형태로 사용하는 방식을
연습을 많이 해봐라

제공된 코드를 가지고
이것저것 사용해봐라
내것이 된다.

.box1
.box2
.box3

[1,2,3]

정리노트
많이 사용하고 많이까먹는것

2달 밖에 안됨

https://notefolio.net/

적어보면서
색다른 만들어보기
일반적인 것들을 만들어보기

A디자인 완성 페이지
만들어보면서(코드)

디자인 만든다

다른 배치 A-1, A-2, A-3, A-4
각각에 어떤 차이점이 있고
보여지는 이미지 형태의 느낌을
작성

또다른 A-5

배경의 색   빨강
전체적인 분위기 

여러 웹사이트를 보고
특성을 비교 하고 디자인 적인
요소, 배치(코드)적인 요소
위치, 색상, 글자체
많이 쓰는 형태가 있다.

청색계통을 많이 버튼, 강조

회색을 많이 사용 불필요한것
설명을 작성하는데

핵심적인 단어가 제목
글자 크기 4px 
2단계를 거친다.

동일한 % 작아지는 것이 좋다.

1000px
950px
900px

20px
16px
12px


정적인 요소

동적인 요소 X 움직이는것


3가지형태의 페이지
1. PC
2. 태블릿
3. 모바일
 - 엡

연동되게

app 게임


포트폴리오
왜 그곳에
어디에다 배치하면 더좋을것 같은데.

 

 

 

 

 

 

취업특강.zip
5.24MB

뭔지 집에서 봐보깅

'UIUX(03.28~10.02)' 카테고리의 다른 글

0529 수 uiux 40일차  (0) 2024.05.29
0528 화 uiux 39일차  (1) 2024.05.28
0524 금 uiux 37일차  (0) 2024.05.24
0523 목 uiux 36일차  (0) 2024.05.23
0522 수 uiux 35일차  (0) 2024.05.22

0524 금 uiux 37일차

 

깃허브 기초 ( https://codepen.io/hjyee/full/LYoNWga )
자바스크립트 수업페이지 ( https://codepen.io/hjyee/full/PogMVOP )

강사님 수업페이지(html&css) ( https://codepen.io/hjyee/full/OJGrVYJ )
기초 키보드 사용법 ( https://codepen.io/YoungHeom/pen/eYaOYEX )
연산자 ( https://codepen.io/YoungHeom/pen/Rwmbxze )
코드펜 사용법 ( https://codepen.io/YoungHeom/pen/gOJOWgE )
무료 강의 ( https://programmers.co.kr/ )
웹코딩 참고 사이트 김영원 강사님
https://kimyws.tistory.com/29 )
https://webstoryboy.co.kr/ )

플렉스 개구리
https://flexboxfroggy.com/#ko )
혜지 강사님 수업페이지(html&css) ( https://codepen.io/hjyee/full/OJGrVYJ ).
자바스크립트 수업페이지 ( https://codepen.io/hjyee/full/PogMVOP )
깃허브 기초 ( https://codepen.io/hjyee/full/LYoNWga )
기초 키보드 사용법 ( https://codepen.io/YoungHeom/pen/eYaOYEX )
연산자 ( https://codepen.io/YoungHeom/pen/Rwmbxze )
코드펜 사용법 ( https://codepen.io/YoungHeom/pen/gOJOWgE )
무료 강의 ( https://programmers.co.kr/ )
피그마 강좌 ( https://www.youtube.com/@yeonjung-figma ), ( https://www.youtube.com/@UXUIDesign ) - 개인적 메모
작업물 보기 - 핀터레스트나 드리블( https://dribbble.com/ ), 노트폴리오, 비핸스
자격증 기출문제 ( https://www.comcbt.com/ )( https://quizeey.com/ )

.

 

웹페이지 만들기 구성 - 홈, 내부 3개. 총 페이지 4개

메인홈 ( https://codepen.io/YoungHeom/pen/NWVqPZO ) 

내부1 - 상품리스트 ( https://codepen.io/YoungHeom/pen/bGyddbm )

내부2 ( https://codepen.io/YoungHeom/pen/ZENbWXE )

내부3 - 로그인 페이지 ( https://codepen.io/YoungHeom/pen/LYopZPe )

세일러 만년필( https://en.sailor.co.jp/ ), 칼라버스 잉크( https://colorverseink.co.kr/ )

트위스비 ( https://www.twsbi.com/ ), 산리오 페이지 ( https://www.sanrio.co.jp/ )

 

페이지만들 때 참고할 사이트 - ( https://sailors.co.kr/ ), ( https://www.thehyundai.com/ )

※ () - 괄호 안에 쓴 건 안 들어가는 내용임 

 

 

글씨체 후보

https://fonts.google.com/specimen/Poetsen+One )

 

내부 1 페이지 상품 목록들에 넣을 것

https://en.sailor.co.jp/category_product/fountain-pen/?taxonomy-detail=shikiori )

 

세일러 만요 잉크 ( https://en.sailor.co.jp/product/13-2009/ )

세일러 잉크 시키오리 ( 세일러 일반 잉크 시키오리 20ml )

 

로지텍 코리아 k380 상세페이지도 참고하기

세일러 만년필

시키오리 사계 ( https://en.sailor.co.jp/product/11-1224/ )

베스트펜 정보 ( http://www.bestpen.kr/shop/shopbrand.html ) 공홈보다 정보 많음. 그리고 한국어임

 

'UIUX(03.28~10.02)' 카테고리의 다른 글

0528 화 uiux 39일차  (1) 2024.05.28
0527 월 uiux 38일차  (0) 2024.05.27
0523 목 uiux 36일차  (0) 2024.05.23
0522 수 uiux 35일차  (0) 2024.05.22
0521 화 uiux 34일차(깃허브)  (0) 2024.05.21

0523 목 uiux 36일차

 

 

css를 사용하지 않고 css적용하기 - JIT모드

 

JIT 모드 ( https://codepen.io/YoungHeom/pen/oNRLwLz )

클래스 101 이벤트 버튼 만들기 ( https://codepen.io/YoungHeom/pen/zYQBzMB ) (  )

2차메뉴 구현( https://codepen.io/YoungHeom/pen/yLWJXwy ) (  )

(  )

※ class 안에 적을 때 반드시 

<script src="https://cdn.tailwindcss.com"></script>

  ↑ 이걸 head에 적어야 한다. 안 그러면 적용안됨.

'UIUX(03.28~10.02)' 카테고리의 다른 글

0527 월 uiux 38일차  (0) 2024.05.27
0524 금 uiux 37일차  (0) 2024.05.24
0522 수 uiux 35일차  (0) 2024.05.22
0521 화 uiux 34일차(깃허브)  (0) 2024.05.21
0520 월 uiux 33일차  (0) 2024.05.20

0522 수 uiux 35일차

 

깃허브 기초 ( https://codepen.io/hjyee/full/LYoNWga )
자바스크립트 수업페이지 ( https://codepen.io/hjyee/full/PogMVOP )

강사님 수업페이지(html&css) ( https://codepen.io/hjyee/full/OJGrVYJ )
기초 키보드 사용법 ( https://codepen.io/YoungHeom/pen/eYaOYEX )
연산자 ( https://codepen.io/YoungHeom/pen/Rwmbxze )
코드펜 사용법 ( https://codepen.io/YoungHeom/pen/gOJOWgE )
무료 강의 ( https://programmers.co.kr/ )

.

 

웹페이지 만들기 구성 - 홈, 내부 3개. 총 페이지 4개

메인홈 ( https://codepen.io/YoungHeom/pen/NWVqPZO ) 

내부1 - 상품리스트 ( https://codepen.io/YoungHeom/pen/bGyddbm )

내부2 ( https://codepen.io/YoungHeom/pen/ZENbWXE )

내부3 - 로그인 페이지 ( https://codepen.io/YoungHeom/pen/LYopZPe )

세일러 만년필( https://en.sailor.co.jp/ ), 칼라버스 잉크( https://colorverseink.co.kr/ )

트위스비 ( https://www.twsbi.com/ ), 산리오 페이지 ( https://www.sanrio.co.jp/ )

 

페이지만들 때 참고할 사이트 - ( https://sailors.co.kr/ ), ( https://www.thehyundai.com/ )

※ () - 괄호 안에 쓴 건 안 들어가는 내용임 

 

 

글씨체 후보

https://fonts.google.com/specimen/Poetsen+One )

 

내부 1 페이지 상품 목록들에 넣을 것

https://en.sailor.co.jp/category_product/fountain-pen/?taxonomy-detail=shikiori )

 

세일러 만요 잉크 ( https://en.sailor.co.jp/product/13-2009/ )

세일러 잉크 시키오리 ( 세일러 일반 잉크 시키오리 20ml )

 

로지텍 코리아 k380 상세페이지도 참고하기

세일러 만년필

시키오리 사계 ( https://en.sailor.co.jp/product/11-1224/ )

베스트펜 정보 ( http://www.bestpen.kr/shop/shopbrand.html ) 공홈보다 정보 많음. 그리고 한국어임

 


호웽

 

.

'UIUX(03.28~10.02)' 카테고리의 다른 글

0524 금 uiux 37일차  (0) 2024.05.24
0523 목 uiux 36일차  (0) 2024.05.23
0521 화 uiux 34일차(깃허브)  (0) 2024.05.21
0520 월 uiux 33일차  (0) 2024.05.20
0517 금 uiux 32일차  (0) 2024.05.17

0521 화 uiux 34일차

깃허브 기초 ( https://codepen.io/hjyee/full/LYoNWga )
자바스크립트 수업페이지 ( https://codepen.io/hjyee/full/PogMVOP )

강사님 수업페이지(html&css) ( https://codepen.io/hjyee/full/OJGrVYJ )
기초 키보드 사용법 ( https://codepen.io/YoungHeom/pen/eYaOYEX )
연산자 ( https://codepen.io/YoungHeom/pen/Rwmbxze )
코드펜 사용법 ( https://codepen.io/YoungHeom/pen/gOJOWgE )
무료 강의 ( https://programmers.co.kr/ )

.

 

웹페이지 만들기 구성 - 홈, 내부 3개. 총 페이지 4개

메인홈 ( https://codepen.io/YoungHeom/pen/NWVqPZO ) 

내부1 - 상품리스트 ( https://codepen.io/YoungHeom/pen/bGyddbm )

내부2 ( https://codepen.io/YoungHeom/pen/ZENbWXE )

내부3 - 로그인 페이지 ( https://codepen.io/YoungHeom/pen/LYopZPe )

세일러 만년필( https://en.sailor.co.jp/ ), 칼라버스 잉크( https://colorverseink.co.kr/ )

트위스비 ( https://www.twsbi.com/ ), 산리오 페이지 ( https://www.sanrio.co.jp/ )

 

페이지만들 때 참고할 사이트 - ( https://sailors.co.kr/ ), ( https://www.thehyundai.com/ )

※ () - 괄호 안에 쓴 건 안 들어가는 내용임 

 

 

글씨체 후보

https://fonts.google.com/specimen/Poetsen+One )

 

내부 1 페이지 상품 목록들에 넣을 것

https://en.sailor.co.jp/category_product/fountain-pen/?taxonomy-detail=shikiori )

 

세일러 만요 잉크 ( https://en.sailor.co.jp/product/13-2009/ )


폰트어썸에서 아이콘 가져올 때 html 상단에 ↓ 이거 적을 것. 내가 아이디 만들어서 복사한 것임!
<script src="https://kit.fontawesome.com/c56732103f.js" crossorigin="anonymous"></script>
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" />
ㄴ 아님 강사님이 알려주신 이거 적기 ( https://codepen.io/YoungHeom/pen/JjVzWJV )

 

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/daisyui/4.10.3/full.css" integrity="sha512-qIL6mxTcCeoL0KcBnGtTai4qCJG1YdvvLRGhTuAxQIRjVxFQcnzen0DPpIMXiozMJor3ZvquMUUvN7Kq5h/ReQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />

ㄴ 데이지 UI 사용할 때 이거 적기

 

https://cdnjs.com/ ) 여기서 테일윈드, 데이지.css 검색후 html 상단에 붙여넣기

 

 


 

깃허브 기초 ( https://codepen.io/hjyee/full/LYoNWga )

 

밑줄친거 클릭해서 설치

설치 후 깃 더블클릭하여 설치(계속 next 누르면 됨)

 

로컬디스크에 work라는 폴더 만들기 - work 폴더 내부에 web_git_ex 라는 폴더 만들기

 

(자격 증명 내이름이 아닐 때 제거하는 방법)

깃허브 로그인 후 제어판 - 자격 증명 관리자 - Windows 자격증명 클릭 - 일반 자격 증명 깃허브

 

 

 

ㄴ 코드펜 열 때 둘 중 하나 사용.

    우클릭해서 안뜨면 상단 파일 주소(url)란에 cmd 치고 거기에 'code .'(따옴표 빼고) 입력 후 엔터

 

터미널 열기: ctrl + j 또는 ctrl + `

 

 

 

git init 입력 후 엔터 결과가 (master)로 나오면 깃허브 - 세팅 - Repositories? - main으로 업데이트하기(수업페이지 참고)

 

main으로 안 바뀌면 명령어 두개 다 입력

사용자 변경 방법(학원 컴퓨터)

git remote set-url origin ---

 

Fountain_pen_site-0521.zip
12.02MB

'UIUX(03.28~10.02)' 카테고리의 다른 글

0523 목 uiux 36일차  (0) 2024.05.23
0522 수 uiux 35일차  (0) 2024.05.22
0520 월 uiux 33일차  (0) 2024.05.20
0517 금 uiux 32일차  (0) 2024.05.17
0516 목 uiux 31일차  (0) 2024.05.16

0520 월 uiux 33일차

자바스크립트 수업페이지 ( https://codepen.io/hjyee/full/PogMVOP )
강사님 수업페이지(html&css) ( https://codepen.io/hjyee/full/OJGrVYJ )
기초 키보드 사용법 ( https://codepen.io/YoungHeom/pen/eYaOYEX )
연산자 ( https://codepen.io/YoungHeom/pen/Rwmbxze )
코드펜 사용법 ( https://codepen.io/YoungHeom/pen/gOJOWgE )
무료 강의 ( https://programmers.co.kr/ )

.

 

웹페이지 만들기 구성 - 홈, 내부 3개. 총 페이지 4개

메인홈 ( https://codepen.io/YoungHeom/pen/NWVqPZO ) 

내부1 - 상품리스트 ( https://codepen.io/YoungHeom/pen/bGyddbm )

내부2 ( https://codepen.io/YoungHeom/pen/ZENbWXE )

내부3 - 로그인 페이지 ( https://codepen.io/YoungHeom/pen/LYopZPe )

세일러 만년필( https://en.sailor.co.jp/ ), 칼라버스 잉크( https://colorverseink.co.kr/ )

트위스비 ( https://www.twsbi.com/ ), 산리오 페이지 ( https://www.sanrio.co.jp/ )

 

페이지만들 때 참고할 사이트 - ( https://sailors.co.kr/ ), ( https://www.thehyundai.com/ )

※ () - 괄호 안에 쓴 건 안 들어가는 내용임 

 

 

글씨체 후보

https://fonts.google.com/specimen/Poetsen+One )

 

 

내부 1 페이지 상품 목록들에 넣을 것

https://en.sailor.co.jp/category_product/fountain-pen/?taxonomy-detail=shikiori )

 

 

세일러 만요 잉크 ( https://en.sailor.co.jp/product/13-2009/ )

 

일러스트 (일러스트레이터) - 사각형  동그랗게 부풀리기. ( 이펙트 주는 방법!!)

  오브젝트 - 둘러싸기 왜곡(Envelope Distort) - 변형으로 만들기(Make with Warp) -  스타일(style) - 부풀리기(inflate)

 

 

 

폰트어썸에서 아이콘 가져올 때 html 상단에 ↓ 이거 적을 것. 내가 아이디 만들어서 복사한 것임!
<script src="https://kit.fontawesome.com/c56732103f.js" crossorigin="anonymous"></script>
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" />
ㄴ 아님 강사님이 알려주신 이거 적기 ( https://codepen.io/YoungHeom/pen/JjVzWJV )

 

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/daisyui/4.10.3/full.css" integrity="sha512-qIL6mxTcCeoL0KcBnGtTai4qCJG1YdvvLRGhTuAxQIRjVxFQcnzen0DPpIMXiozMJor3ZvquMUUvN7Kq5h/ReQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />

ㄴ 데이지 UI 사용할 때 이거 적기

 

( https://cdnjs.com/ ) 여기서 테일윈드, 데이지.css 검색후 html 상단에 붙여넣기

 

'UIUX(03.28~10.02)' 카테고리의 다른 글

0522 수 uiux 35일차  (0) 2024.05.22
0521 화 uiux 34일차(깃허브)  (0) 2024.05.21
0517 금 uiux 32일차  (0) 2024.05.17
0516 목 uiux 31일차  (0) 2024.05.16
0514 화 uiux 30일차  (0) 2024.05.14

0517 금 uiux 32일차

자바스크립트 수업페이지 ( https://codepen.io/hjyee/full/PogMVOP )
강사님 수업페이지(html&css) ( https://codepen.io/hjyee/full/OJGrVYJ )
기초 키보드 사용법 ( https://codepen.io/YoungHeom/pen/eYaOYEX )
연산자 ( https://codepen.io/YoungHeom/pen/Rwmbxze )
코드펜 사용법 ( https://codepen.io/YoungHeom/pen/gOJOWgE )
무료 강의 ( https://programmers.co.kr/ )

.

 

웹페이지 만들기 구성 - 홈, 내부 3개. 총 페이지 4개

메인홈 ( https://codepen.io/YoungHeom/pen/NWVqPZO ) 

내부1 - 상품리스트 ( https://codepen.io/YoungHeom/pen/bGyddbm )

내부2 ( https://codepen.io/YoungHeom/pen/ZENbWXE )

내부3 - 로그인 페이지 ( https://codepen.io/YoungHeom/pen/LYopZPe )

세일러 만년필( https://en.sailor.co.jp/ ), 칼라버스 잉크( https://colorverseink.co.kr/ )

트위스비 ( https://www.twsbi.com/ ), 산리오 페이지 ( https://www.sanrio.co.jp/ )

 

페이지만들 때 참고할 사이트 - ( https://sailors.co.kr/ ), ( https://www.thehyundai.com/ )

※ () - 괄호 안에 쓴 건 안 들어가는 내용임 

 

 

글씨체 후보

https://fonts.google.com/specimen/Poetsen+One )

 

 

내부 1 페이지 상품 목록들에 넣을 것

https://en.sailor.co.jp/category_product/fountain-pen/?taxonomy-detail=shikiori )

 

 

세일러 만요 잉크 ( https://en.sailor.co.jp/product/13-2009/ )

 

 


 

제이쿼리로 팝업 만들기_ 내가 한거( https://codepen.io/YoungHeom/pen/eYapPvq )

제이쿼리로 〃_ 강사님 버전( https://codepen.io/hjyee/pen/jOobewX )

코드펜 안에서 cdnjs 제이쿼리 적용하는 방법

 

 

 

 

$('.popup-box-1').click(function() {
    $('html').removeClass('popup-1-active');
});
$('.popup-box-1 > .popup').click(function(e) {
// console.log(e);
e.stopPropagation();
});

$('.btn-close').click(function() {
    $('html').removeClass('popup-1-active');
});

이거랑 

$('.popup-box-1').click(function() {
    $('html').removeClass('popup-1-active');
});


$('.btn-close').click(function() {
    $('html').removeClass('popup-1-active');
});

이거의 차이

 

 

 

 

$('.popup-box-1 > .popup').click(function(e) {
// console.log(e);
e.stopPropagation();
});

$('.btn-close').click(function() {
    $('html').removeClass('popup-1-active');
});

이거랑

$('.btn-close').click(function() {
    $('html').removeClass('popup-1-active');
});

이거의 차이

 

 

 

 

$('.popup-box-1').click(function() {
    $('html').removeClass('popup-1-active');
});
$('.popup-box-1 > .popup').click(function(e) {
// console.log(e);
e.stopPropagation();
});

$('.btn-close').click(function() {
    $('html').removeClass('popup-1-active');
});
이 세 가지 코드에 대한 설명(팝업 만들기 js 부분. 이게 최종임 아마도)

 

'UIUX(03.28~10.02)' 카테고리의 다른 글

0521 화 uiux 34일차(깃허브)  (0) 2024.05.21
0520 월 uiux 33일차  (0) 2024.05.20
0516 목 uiux 31일차  (0) 2024.05.16
0514 화 uiux 30일차  (0) 2024.05.14
0513 uiux 29일차  (0) 2024.05.13

+ Recent posts