UI/UX디자인 & 프론트엔드(React.js) 과정
1.일러스트 기초 TIL (학습 1~2일차)
그 동안의 경력 공백을 보완하기 위해 6/9부터 강남에서 국기로 스마트웹디자인&프론트엔드(React.js) 과정을 수강하게 되었다.원래는 4월 개강이었는데 코로나19로 인해 2달이나 미뤄져 여기까지 오게 된 것...조바심이 생기지만, 마음을 다잡고 완전 기초부터 다시
2.포토샵 Part.1 TIL(학습 4일차)
Layer창에서 해당 개체의 오른쪽 빈 칸을 더블 클릭하여 쉽게 Layer Style을 지정하자.Alt키로 Reset 할 수 있음을 기억하자.클리핑 마스크가 아닌 Layer 마스크를 적재 적소에 활용하자.Layer를 추가할 때 Ctrl키를 누르면 아래 순서로 Layer
3.포토샵&일러스트 평가 및 복습(학습 5일차)
Timeline의 Make Frames for layers로 애니메이션 GIF 이미지를 만들 수 있다.(Save for web으로 확장자를 GIF로 지정하여 저장한다.)같은 이미지를 복제해서 soft Light를 적용하면 화사한 효과를 줄 수 있다.2019부터 shif
4.포토샵 Part.2 TIL(학습 3일차)
210611 포토샵 리마인드 기초 툴 연습 시작자석 올가미 툴로 경계가 확실한 이미지 누끼를 쉽게 딸 수 있다.선택 툴로 이미지를 잘라낼 때 Feather를 이용하면 가장자리를 부드럽게 처리할 수 있다.상단의 아이콘 or alt와 shift키를 사용해 빼거나 추가할 수
5.코딩환경 구축하기(feat. 코딩 기본 개념 / 6일차 TIL )
210616 포토샵, 일러스트 기초가 끝나고 드디어 코딩을 시작했다.
6.UI/UX에 대하여(6일차 TIL part.2)
사용자와 직접 소통하는 제품의 인터페이스를 디자인하는 것.사용자가 제품 또는 서비스를 사용할 때의 할 수 있는 모든 경험들.UX디자인은 사용자의 관점에서 그들의 문제를 해결해주는 것.ex) 앞이 뚫려 있는 장화, 충전 포트가 아래쪽에 있는 무선 마우스 등
7.HTML 학습 2일차 (7일차 TIL)
210617 오늘은 HTML 태그 중 링크(a), 이미지(img), 목록(list) 태그에 관해 학습했다.VSC 자동 태그 닫기가 적용이 안된다면 하단에 HTML 설정이 되어 있는지 확인한다.창 크기가 작어서 긴 문장 등을 보기 불편하면 alt + z 키를 누른다.웹
8.HTML 학습 3일차 (8일차 TIL)
210618 시간이 느린듯 빠르게 지나간다.오늘은 ul, dl, dt, dd 활용에 대해서 학습했다.VSC Short cut! + tab 해도 HTML5형식의 문서 구조가 자동 완성 된다.내어쓰기 Shift + tab현재 라인 이동 - (이동할 부분 선택) Alt +
9.HTML 테이블 코딩 (학습 9일차 TIL)
210621 오늘은 HTML table 코딩에 대해 학습했다.colspan과 rowspan의 차이를 숙달하기 위해 한국남부발발전현황.html 파일 작성큰 틀은 captiond으로 표의 제목을 달아 주고, thead > tfoot(소계/합계) > tbody순으로 마크업한
10.HTML Form 코딩 (학습 10일차 TIL)
210622 오늘은 form 형식 코딩에 관하여 학습했다.input에 required(필수적으로 입력할 요소)를 써주면 입력란을 작성하라는 말풍선이 나타난다.input - autofocus = 자동 커서(1개만 가능)input - type="search"로 하면 입력한
11.HTML 복습 및 레이아웃 (학습 11일차 TIL)
210623 오늘은 지금까지 배운 HTML 태그들을 복습하면서, skip 내비게이션(본문 바로가기), Layout에 대해 학습했다.각 요소들의 시작과 끝에 주석으로 달아주므로 구분하기 쉽게 해준다.(sub_layout.html 참조)HTML5가 아닌 문서에서는 id를
12.HTML video, audio 삽입과 기타 태그들(학습 12일차 TIL)
210624 오늘은 video, audio를 삽입하는 방법과 기타 태그 및 HTML5에 추가된 input 타입들에 대해 학습했다.Video/Audio의 Formats을 확인하여 모든 웹 브라우저를 지원하는지 확인한다.video는 muted를 쓰지 않으면 크롬에서 재생이
13.HTML Main page 코딩하기 (학습 13일차 TIL)
210625 기업 홈페이지를 참고하여 메인페이지 HTML 구조를 마크업하는 연습을 했다.이미지에 텍스트가 많을 경우 다른 요소로 따로 써 줘도 무방하다.(CSS로 안보이게 처리)일러스트로 픽토그램 그려보기.
14.CSS 단계적 적용(학습 14일차 TIL)
210628 오늘은 CSS학습에 들어갔다.자식 선택자는 피하고, class 선택자를 잘 활용하자.웹 접근성
15.CSS background 속성(학습 15일차 TIL)
210629 CSS 학습 2일차로 오전에는 font속성에 대해 복습하고, background속성에 대해 학습하고, 오후에는 오븐을 이용해서 기획한 앱의 와이어프레임을 그려봤다.이름으로 사용할 수 있는 Color = white, black, gray(\* 스프라이트 이미
16.CSS list-style, link(a), overflow, border 속성(학습 16일차 TIL)
210630 CSS학습 3일차로 list-style, link(a태그), overflow, border속성에 대해 학습했다.추가로 Adobe XD를 사용하는법을 배웠다.네이밍 규칙의 언더스코어(\_) 조합은 파일, 폴더, 이미지에 사용한다.네이밍 규칙의 하이픈(-) 조
17.CSS 선택자 활용(학습 17일차 TIL)
210701 CSS학습 4일차로 border 속성에 대해 복습하고,
18.CSS Box Modeling(학습 18일차 TIL)
210702 오늘은 Box Modeling에 대해 학습했다. Today's tips Must Remember 전체선택자(*)를 Asterisk(애스터리스크,아스테리스크)라고 한다.
19.CSS Position (학습 19일차 TIL)
210705 오늘은 중요한 개념인 Position에 대해 학습했다.h1과 같이 고유속성이 있는 태그는 CSS로 건들지 말자.id(재사용성 어려움), 태그 선택자는 지양하자. class 적극 활용!!CSS에서 id로 스타일을 주는 것이 '안티패턴'으로 되어 있다.디자인시
20.CSS Float(학습 20일차 TIL)
210706 오늘은 position에 이어 float에 대해 학습했다.앞의 객체가 float 되어도 안의 내용물은 float 뒤로 가려지지 않는다.(red와 green에 float:left를 지정해 줌)float을 해주면 당연히 clear(clear fix)를 해 준다
21.CSS float, skip source (학습 21일차 TIL)
210707 어제 배웠던 float에 대해 복습하고, CSS float 앞의 형제 요소가 float 되었다면, 해당 요소는 clear로 간단하게 스타일을 잡아준다.
22.CSS float 심화(학습 22일차 TIL)
210708 어제의 이어서 float에 대해 복습하고, Must Remember 웹 접근성 준수를 위해 각 그룹마다 h요소로 제목을 꼭 달아주자. CSS 속성 기술의 흐름 = 위치 선정 > 윤곽 > 외곽 디테일링 > 채색 > 타이포그래피 Heading element
23.CSS float 심화2(학습 23일차 TIL)
210709 오늘은 지금까지 배운 내용들을 바탕으로하여 연습용 웹페이지 2가지를 마크업 했다. CSS tips CSS파일에서 다른 CSS를 불러올 때 @import url(reset.css);를 해준다. (But, 엣지브라우저에서 import 방식은 스타일이 적용되지
24.CSS Navigation 만들기(학습 24일차 TIL)
210712 어느덧 교육을 시작한지 1달의 시간이 흘렀다... 이제부터 본격적으로 포트폴리오를 준비할 생각이다. 오늘은 float을 복습하고, navigation 메뉴를 코딩해보는 시간을 가졌고, 정규 수업시간 이후에는 CSS로 탭메뉴와 간단한 이미지 슬라이드를 만들어
25.JavaScript Navigation, TabMenu 만들기(학습 25일차 TIL)
210713 오늘은 만들어져 있는 자바스크립트를 이용해서 마우스 hover시 하위 메뉴가 펼쳐지는 Navigation과 TabMenu를 마크업했다. 정규 시간 이외에는 순수 CSS만으로 구현할 수 있는 슬라이드 애니메이션으로 이미지 슬라이드 콘텐츠를 제작했다.탭메뉴는
26.JavaScript QuickMenu, CSS3 border-radius(학습 26일차 TIL)
210714 어제 실습했던 navigation 메뉴를 복습하고, 미리 작성되어 있는 js를 삽입하여 side에 둥둥 떠다니는 quick 메뉴, border-radius에 대해 학습했다.두 번째 시간에는 Figma 사용법에 대해 배웠다.border-image는 이미지를
27.CSS3 shadow, gradient(학습 27일차 TIL)
text-shadow, box-shadow 상세 기능(중첩), gradient 속성에 대한 정리
28.CSS3 box-shadow: inset, 가상 요소 선택자, 웹폰트, transform(학습 28일차 TIL)
210716 어제에 이어 box-shadow의 inset 속성을 활용한 다양한 버튼을 꾸미는 방법, 가상 요소 선택자, 인접/형제 선택자, 웹폰트, transform에 대해 학습했다.정보를 전달할 때는 '고딕 계열'을 사용하자.box-shadow에 inset을 활용해
29.CSS3 transition (학습 29일차 TIL)
210719 오늘은 animation 효과를 줄 수 있는 transition에 대해서 학습했다.transition은 원본에 줄 것.property - 모든 속성 or 일부 속성에 animation적용(all, background, color, height, width,
30.CSS3 transition 응용, accordion (학습 30일차 TIL)
210720 오늘은 transition을 활용해 navigation 메뉴와, accordion 메뉴를 마크업했다. 학습 후에는 display: gird를 실습해 보는 시간을 가졌다.display속성은 transition이 적용되지 않는다.Pseudo-class :tar
31.CSS3 Pseudo-Class, background-size, text-overflow, word-break, column-count 등 (학습 31일차 TIL)
210721 그동안 배운 선택자를 복습하고 새로운 속성 선택자, 슈도 클래스 선택자, background-size에 대해 학습했다.속성 선택자를 활용하여 스타일을 적용할 수 있다.새로 알게 된 Pseudo-class 선택자resize 속성을 이용하면 요소의 크기를 사용
32.HTML5 / CSS3로 신문기사 마크업하기, form 복습(학습 32일차 TIL)
210722 그 동안 배운 HTML5와 CSS3를 활용하여 신문기사 페이지를 마크업 했다. 정규 수업시간 이외에는 Form tag를 복습할 겸, 회원가입 form 페이지를 마크업 했다.위와 같은 "조건 주석문"을 활용하여 IE 9 lt(미만)에서는 해당 스크립트를 실행
33.HTML5 복습, 다양한 Hover effect(학습 33일차 TIL)
210723 오늘은 어제 배운 HTML5 태그들을 복습하고, transform을 활용한 다양한 hover effect에 대해 학습했다. CSS tips inline요소는 transform 적용이 안 된다. transform은 속성 순서에 따라 animation 효과가
34.CSS3 hover effect, tab contents (학습 34일차 TIL)
210726
35.CSS3 Animation & keyframes (학습 35일차 TIL)
210727 오늘은 animation과 keyframes를 활용하여 시계와 물방울 효과를 구현해 보았다. 정규시간 이외에는 간단한 자바스크립트를 이용한 navigation 메뉴를 만들었다. 물방울이 커지면서 위로 올라간다. CSS3 tips animation: na
36.CSS3 Animation Part.2(학습 36일차 TIL)
210728
37.CSS3 Animation Part.3(학습 37일차 TIL)
210729 animation을 어제보다 더 깊이 있게 배웠다.정규시간 이외에는 과거에 만들었던 웹 사이트를 처음부터 새롭게 퍼블리싱 해보는 시간을 가졌다.position:absolute;시에 개체를 정 중앙에 위치시키는 3가지 방법left:calc(50% - 가로 1
38.CSS3 Animation Part.4(학습 38일차 TIL)
210730 오늘은 CSS만을 이용한 이모지 animation을 완성하고, 이를 응용하여 Ryan도 만들어 보았다.
39.CSS3 Animation Practice (feat. 휴가기간)
8월 2일 ~ 8월 6일까지 학원 휴가기간으로 인해 수업이 없다. 이 기간 동안에 틈 나는 시간마다 지금까지 배운 내용들을 복습하고, animation 과제를 할 예정이다.html/css만을 사용하여 졸고 있는 apeach animation 완성!
40.Javascript 연산자 (학습 39일차 TIL)
210809 한 주간의 휴가가 끝나고, 오늘부터는 자바스크립트 수업이 진행 되었다.객체.메서드(); - 객체 기반 언어변수명은 대, 소문자를 구분하고, 앞에 영문, \_, $가 올 수 있고, 숫자는 불가능let은 같은 변수명으로 재선언 불가능조건 삼항 연산자 = 조건식
41.Javascript 조건문, 반복문 (학습 40일차 TIL)
210810 Javascript 2번째 시간으로 제어문에 대하여 학습했다. Javascript Basic if문 말고도 switch ~ case 문을 활용하여 지정한 변수에 저장된 데이터와 정확히 일치하는 경우를 찾을 수 있다.
42.Javascript 다중 for문, 객체 (학습 41일차 TIL)
210811 어제에 이어 for문을 복습하고, 객체에 대해 학습했다.태그를 출력할 경우에 문자처럼 붙여써도 무방함문자열 안에 쌍따옴표와 홑따옴표를 표시해야 할 때, 문자열에 표시하려는 따옴표와 다른 따옴표로 구분하여 작성하면 된다.이러한 경우 escape문자("\\")
43.Javascript Math, String 객체 (학습 42일차 TIL)
Math와 String 객체의 내장 method
44.Javascript Array 객체, 함수 (학습 43일차 TIL)
Array(배열) 기초 학습
45.Javascript 함수 Part2 (재귀, 전역변수, 지역변수 학습 44일차 TIL)
재귀함수, 전역변수, 지역변수, onclick
46.Javascript 함수 Part3 (input관련, 내장함수 학습 45일차 TIL)
form, input 과련 tip, 내장함수
47.Javascript 함수 Part4 (event, browser 객체 학습 46일차 TIL)
Javascript - event handler, event, DOM, browser
48.Javascript navigator 객체, DOM(학습 47일차 TIL)
Javascript DOM, DOM Method, navigator object...
49.Javascript활용 menu 제작(학습 48일차 TIL)
Create a Menu-bar with Javascript
50.Javascript활용 menu 제작(학습 49일차 TIL)
ES5활용한 menu제작, CSS em과 rem의 적절한 활용법
51.반응형 웹 with Media Queries(학습 50일차 TIL)
반응형 레이아웃, Media Queries
52.반응형 웹 with Media Queries Part2(학습 51일차 TIL)
미디어쿼리를 사용한 반응형 웹 제작
53.반응형 웹 with Media Queries Part3(학습 52일차 TIL)
미디어쿼리, float 해제관련
54.반응형 웹 with Media Queries Part4(학습 53일차 TIL)
반응형 레이아웃을 %로 잡을 때 width 값은 (자식 / 부모 * 100)으로 구할 수 있다.
55.jquery lesson1 (학습 54일차 TIL)
jquery 기본 메서드
56.jquery lesson2 (학습 55일차 TIL)
제이쿼리 1.xx버전 사용하는 이유, event, effect, animate관련 method
57.jquery lesson3 (학습 56일차 TIL)
제이쿼리 응용(배너, 슬라이드, hover), 제이쿼리 모바일
58.Web Site Clone Coding (학습 57일차 TIL)
CSS linear-gradient 각도관련, Nike 클론 코딩
59.Web Site Clone Coding2 (학습 58일차 TIL)
제이쿼리 .index(), CSS transform: rotate(deg); 기준점
60.Jquery mousewheel, scroll(학습 59일차 TIL)
Jquery mousewheel, scroll event
61.Jquery mousewheel, scroll(학습 60일차 TIL)
제이쿼리, new Date();
62.Jquery .get(), video control (학습 61일차 TIL)
.get()은 DOM element를 반환한다.
63.Jquery e.page, imagesloaded (학습 62일차 TIL)
imagesloaded 플러그인 활용법
64.Jquery Horizontal Scroll(학습 63일차 TIL)
제이쿼리 가로스크롤 효과
65.Jquery 스크롤하면 요소들이 앞으로 나오는 효과 구현하기(학습 64일차 TIL)
scroll, translateZ를 활용한 제이쿼리 이벤트
66.Jquery FullPageScroll(학습 65일차 TIL)
순수 제이쿼리를 이용한 Full Page Scroll Part 1
67.Jquery One Page Scroll(학습 66일차 TIL)
제이쿼리 mousewheel을 사용한 원 페이지 스크롤
68.Kink Landing Page 퍼블리싱 (학습 67일차 TIL)
kink landing page 퍼블리싱 2일차
69.반응형 웹디자인 완성 (학습 68일차 TIL)
웹 랜딩페이지 퍼블리싱과 반응형 웹디자인 pc, tablet, mobile, 랜딩 페이지를 완성
70. CSS, JS로 포트폴리오 예제 준비하기(학습 69일차 TIL)
Javascript onmousemove, setProperty
71.웹 접근성을 준수하여 기업 웹사이트 제작하기 Part.2 (학습 71일차 TIL)
gnb 제목 두 개 이상일때
72.웹 접근성을 준수하여 기업 웹사이트 제작하기 Part.3 (학습 72일차 TIL)
background-position-x, background-position-y
73.웹 접근성을 준수하여 기업 웹사이트 제작하기 Part.4 (학습 73일차 TIL)
내비게이션바 제이쿼리 드롭다운 hover 효과, inline-block 알 수 없는 공백 처리 방법.
74.웹 접근성을 준수하여 기업 웹사이트 제작하기 Part.5 (학습 74일차 TIL)
input 속성 readonly, disabled
75.웹 접근성을 준수한 기업 웹사이트 완성 (feat.웹표준, 웹접근성 유효성 검사 학습 75일차 TIL)
header, footer import / css 분리
76.웹 접근성 준수 포트폴리오 기업 웹사이트 제작 (76일차 TIL)
스크롤을 내리면 스크롤 높이에 따라 Animation 효과 구현하기
77.웹 접근성 준수 포트폴리오 기업 웹사이트 제작 (77일차 TIL)
CSS선택자 n번째부터 끝까지, check box 스타일링
78.211006 TIL (학습 78일차)
html include시에 window.onload로 스크립트로 DOM 제어를 할 수 있다.
79.211007 TIL (학습 79일차)
제이쿼리 체크박스 모두선택/해제
80.웹 접근성을 준수하여 기업 웹사이트 제작하기 Part.1 (학습 70일차 TIL)
Nuli 웹접근성
81.211008 TIL (학습 80일차)
mobile에서 스크롤바 없애기
82.211011 TIL 제이쿼리 가로스크롤, data 메소드 (학습 81일차)
제이쿼리 가로스크롤, data() 메서드
83.211012 TIL picture 태그 이해하기(학습 82일차)
html5 picture tag
84.211013 TIL animation, forwards(학습 83일차)
animation의 forwards 속성은 animation이 keyframe의 100%에 도달했을 때, 마지막 keyframe을 유지한다.
85.211014 TIL 제이쿼리 기능 추가(학습 84일차)
제이쿼리 .is(":visible"), 순수 제이쿼리 슬라이드 Banner 재생/멈춤/롤링 버튼 제어
86.211015 TIL (학습 85일차)
background-blend-mode, filter, Swiper Slider 심화
87.211021 TIL Google Maps 활용하기 (학습 89일차)
구글 맵 API 이용하기 Google Maps
88.211019 TIL 모바일 앱 코딩 (학습87일차)
iOS meta Tag
89.211020 TIL 자바스크립트 스크롤의 방향에 따라 숨겨지고 보여지는 효과(학습 88일차)
window.pageYOffset, .contains()
90.211022 TIL Flex-Box (학습 90일차)
flex box model
91.211025 TIL Kakao 앱코딩 (학습 91일차)
body의 가로, 세로값을 vw, wh로 주면 브라우저에서 스크롤 영역까지 차지하게 된다. (100%로 하면 상관없음)
92.211026 TIL Kakao 앱코딩2 (학습 92일차)
placeholder 정렬하기, flex: auto
93.211027 TIL Kakao 앱코딩3 (학습 93일차)
flex-box, align-self
94.211029 TIL Swiper(학습 95일차)
Swiper Options
95.211028 TIL CSS3 Grid(학습 94일차)
오늘은 박스모델링 grid 시스템에 대해서 학습했다. Must Remeber rows는 행, column은 열 가로, 세로 개념이랑 비슷하다 생각.
96.211101 TIL JS-ES6 (학습 96일차)
ES6 짚고 넘어가기.
97.211102 TIL React.js 시작 (학습 97일차)
React.js 환경설정
98.211103 TIL React.js Part2 영화앱 만들기 (학습 98일차)
Class Component 생명주기함수, axios
99.211104 TIL React.js Part3 영화앱 만들기 (학습 99일차)
.React-Router-dom v6
100.211105 TIL React App Git에 배포하기 (학습 100일차)
React App Git 배포하기
101.211108 TIL React Hooks (학습 101일차)
React Hooks
102.211109 TIL React & SCSS (학습 102일차)
React, classNames, SCSS
103.React.js Redux
리액트 리덕스
104.React-Router-Dom v6 exact Error
React-Router-Dom v6 exact관련 오류