<?=$title?>

$$config title: 훈련 공부기록 위키 백업 keywords: - IT - 공부기록 - 백업 $$ # 김서연 위키 ## 유용한 링크 - [to2.kr](https://to2.kr/)- 주소를 줄여준다. - [google.com](https://google.com/) - [code.org](https://code.org/) - [repl.it](https://repl.it/) - [github.com](https://github.com/) - [programmers.co.kr](https://programmers.co.kr/) - 수업페이지 [to2.kr/chf](https://to2.kr/chf) # 관련링크 - [김서연 부분모작 위키](https://to2.kr/cv7) --- # 2021-04-13, 001일차 ## 일러스트 - 그래픽 프로그램 - 백터 : 일러스트품질변화가 없음 (이미지가 안깨짐) - 로고 - 비트맵 : 포토샵품질변화가 있음 (이미지가 깨짐), 사실적 표현 - 사진편집 - 색상 - RGB: 가산혼합 / 빛을 더한다. 색상이 섞일수록 밝아진다 / 빛의 삼원색 - CMYK: 감산혼합 / 빛을 뺀다. 색상이 섞일수록 어두워진다 / 색의 삼원색 - 태그, 엘리먼트 - 별도의 표시로 컴퓨터가 내용을 인식하게 해주는 꼬리표 - <여는태그>, ->엘리먼트 ## html, css - Html, CSS, JS의 역할 - Html : 내용. 배우 대기실 / <열> - CSS : 꾸밈, 스타일리스트 대기실, 배우를 꾸며주는 역할 / 선택자{ : ;} - JS : 문서의 인터렉션 문서에 쓰이는 효과들 - 배경색, 너비, 높이 - 쓸 수 있는 태그 종류 : div, section, nav, article - background-color : 배경색 - height : 높이 - width : 너비 - display - block - 너비 : 지정되어 있지 않으면 최대한 유연하게 늘어난다. - 높이 : 높이가 지정되어 있지 않으면 최소한으로 유연하게 줄어든다. - 배열방향 : 세로 (한 줄을 다쓴다.) - inline-block - 너비 : 지정되어 있지 않으면 최소한으로 유연하게 줄어든다. - 높이 : 높이가 지정되어 있지 않으면, 최소한으로 유연하게 줄어든다. - 배열방향 : 가로 (내용만큼의 너비를 나눠쓴당) # 2021-04-14, 002일차 ## 일러스트 - 면에 색상을 두 가지 이상 넣을 수 있게 하는 툴 - 그라디언트, 메쉬툴(U) - Anchor Point - 점과 점의 최소단위, 앵커포인트 두개로 하나의 선, 선이 모여서 면이 된다, -> 오브젝트or 패스 - Segment : 선분 - anchor point 끼리 연결된 선분->모여서 오브젝트, 패스window -> pathfinder ## html, css - 엘리먼트의 부모 자식 관계 - 나를 감싸는 엘리먼트: 부모 엘리먼트 - 내가 감싸는 엘리먼트: 자식 엘리먼트 - 같은 부모를 둔 엘리먼트 : 형제 엘리먼트 ```

``` - 모든 자식 엘리먼트는 하나의 부모 엘리먼트를 가진다. - 부모 엘리먼트 : section - section의 자식 엘리먼트 : div - div의 자식 엘리먼트 : nav - section의 후손 엘리먼트 : div, nav - div는 형제관계 - 글자 속성 - font-weight(폰트 굵기): nomal(기본) / bold(두껍게) - font-size(폰트 크기) : px/rem - letter-spacing(자간) : ~px; - color(글자 색상) : #ffffff (16진수 표현법) : rgba(0, 0, 0, 1) -> red, green. black, a(투명도) # 2021-04-15, 003일차 ## 일러스트 - 선분 중앙에 Anchor Point 추가하기 - object - path - add anchor point ## html,css - table 태그 ```

``` - tr 태그 : 줄 - thead 태그 : 테이블의 머리 - tbody 태그 : 테이블의 몸통 - td 태그 : 칸 - th 태그 : 정보의 대한 정보 ex)시간표 중 교시, 요일 - [table 태그 내용 위치](https://codepen.io/sbyeony/pen/JjEZKVr) - a태그, br - a 태그 : 하이퍼링크 태그, 이동 - 속성1: href="홈페이지 주소" - 속성2: target="_self/_blank" - _self : 같은 페이지에서 열림 - _blank : 새창 열림 - br 태그 : 줄바꿈 태그 / 혼자서 닫는 - 젠코딩 - 태그[속성="속성값"]{내용} - '+'형제 태그 생성 - '>'자식 태그 생성 - ex) a[href="#"][target="_blank"]{네이버}+br+a[href="#"][target="_blank"]{구글}+br+a[href="#"][target="_blank"]{다음} - 후손선택자 - 부모-자식-후손 - div a {} : 후손선택자. div 안에 있는 '모든' a 태그 (자손, 후손) 선택 - div > a {} : 자식선택자. div의 '자식' 태그 - 스타일 적용 순위 - 같은 태그 선택 시 가장 아래에 있는 선택자 적용 - 선택자가 길면 우선순위가 높다 - [예시 코드펜](https://codepen.io/sbyeony/pen/zYNaKaj) # 2021-04-16, 004일차 ## 일러스트 - 그라디언트 - '.' 그라디언트 실행, 'G' 그라디언트 방향 - window->gradient 상세 설정 ## html,css - text-align - 엘리먼트 자체가 아닌 엘리먼트가 가지고 있는 텍스트만을 정렬하는 것. - 텍스트 - inline 속성인 태그 - display: inline-block화 한 태그 - 텍스트 이해하기 1 ```

텍스트는 몇 개일까?

``` - 공백 문자까지 총 11개 (하지만 공백 문자는 아무리 많아도 1개 이상 표현되지 않는다.) - [text-align 나의 예제](https://codepen.io/sbyeony/pen/poRKMaN) - :hover - 마우스가 올려진 상태일때 활성화 되게 한다. - [연습문제(+정렬까지)](https://codepen.io/sbyeony/pen/LYxrwgg) - emmit(자식, 인접동생) - 인접 동생 선택자 : '+' - 자식 선택자 : '>' - ` ` - 두칸 이상 띄울 때 사용~ 공!백! - 공백 한칸을 의미 - text-decoration - 글자의 효과 - text-decoration: none; -> 효과 없음 -

효과

# 2021-04-17, 005일차 - 웹디자인 입문 강좌 - 와이어 프레임 - 게슈탈트 이론 # 2021-04-18, 006일차 - 웹디자인 입문 강좌 - 배너디자인 - 섹션디자인 # 2021-04-19, 007일차 ## 일러스트 - arrang, align, transform - arrange: 오브젝트의 앞, 뒤 순서 (ctrl+[ or ]) - align: 두 개 이상의 오브젝트의 정렬 (왼쪽,가운데,오른쪽,위,아래) - distribute: 여러개의 오브젝트를 '양 끝' 오브젝트를 기준으로 간극 정렬 - 옵션: align to - selection: 내가 선택한 오브젝트 기준으로 - key object: 일정한 수치 기준 - artboard: 아트보드 기준 - transform 패널:오브젝트의 앵커 포인트 x,y축 수치를 수정하면서 위치 이동. - 다중선택 중 한 오브젝트를 클릭하면 기준이 된다. - 패스파인더 - 두 개 이상의 오브젝트의 겹치는 부분을 변경하는 기능 - unite 오브젝트를 합침. (가장 앞에 있는 오브젝트 기준으로 색상 바뀜) - minus front 맨 뒤에 있는 오브젝트의 겹치지 않은 부분만 남김 - intersect 오브젝트가 겹친 부분만 남는다 (가장 많이 겹쳐진 곳) - exclude 짝수로 겹쳐진 곳만 빠진다. - divine 오브젝트 겹쳐진 곳 경계로 조각조각 남. (그룹해제해줘야함.) - trim 오브젝트가 보여지는 모양대로 만들어줌 (색상 구분 없음) - merge 오브젝트가 보여지는 모양대로 만들어줌 (색상이 같으면 합쳐짐) - crop 가장 앞에 있는 오브젝트 모양대로 남음-> 맨 앞 오브젝트 투명 패스가 됨. - outline 오브젝트 조각조각, 선으로 나누어 짐. - minus back 맨 앞의 오브젝트의 겹치지 않은 부분만 남김 ## html - inline 특징 - margin, padding height, width 값이 적용되지 않는다. - BMX 메뉴 만들기 - [메뉴 만들기 연습](https://codepen.io/sbyeony/pen/ExZeRGO) # 2021-04-20, 008일차 ## 일러스트 - 펜툴 - P(※): 펜툴의 시작 - (+): 앵커포인트 추가 - (-): 앵커포인트 제거 - (/): 펜툴의 재개 - (o): 펜툴의 완료 - (>): 직선->곡선->직선 ## html, css - img - img 태그는 종료태그가 없는 단일 태그이다. - 기본 속성은 inline. - img src="이미지 경로(url)" - img는 자식을 가질 수 없다. - 이미지는 고유의 비율을 가지고 있다. 너비or높이를 수정하면 자동으로 조정됨. - 강제로 고정된 너비, 높이 값을 줄 수 있으나 비율이 망가진다 - object-fit:containe; 이미지가 비율이 유지된 상태로 박스에 맞춰진다. - object-fit:cover; 이미지가 고정된 수치의 여백을 다 채운다. - object-position: 10% 100%; 넘친 이미지 위치 조정 [예시](https://codepen.io/sbyeony/pen/eYgPZbM) - margin, padding - margin: 박스 바깥쪽으로 밀어내는 힘 - padding: 박스 안쪽을 채우는 여백 - display inline은 width, height, margin, padding 값 적용이 안된다. - 대표 inline 태그들 : a, span, img -> inline-block, block으로 격상시킨다. - [사진 정렬하기](https://codepen.io/sbyeony/pen/bGgmWaE) # 2021-04-21, 009일차 ## 일러스트 - 캐릭터 제작 - 펜툴, 앵커포인트 적게 쓰기 - 펜툴의 필압조절 - object - path - outline stroke (선->면) ## html, css - nth-chlid(~) - 자식 엘리먼트의 순서 선택 - [무지개만들기](https://codepen.io/sbyeony/pen/XWpyrjR) - block 요소 수평 정렬하기 - block의 기본 성질 margin:left - width값이 고정인 경우, margin-right가 적용되지 않는다. - margin-left를 auto로 풀어줘야 함. - margin-left, margin-right 양쪽을 다 풀어주면 block이 가운데 위치함. - inline-block, inline - 수동적으로 정렬됨 - 부모의 text-align 속성에 의해 - block - 능동적으로 정렬 - margin을 이용 - 우측 margin-left:auto - 가운데 margin:0 auto - html, body - [상단 이미지 4개 구현 연습](https://codepen.io/sbyeony/pen/xxgQyRr) # 2021-04-22, 010일차 ## 일러스트 - 타입 상세옵션: 타입->캐릭터 - 타입 단축키 - 사이즈 : ctrl+shift+<,> - 자간 : alt+방향키 좌,우 - 행간 : alt+방향키 위,아래 - 타입툴 클릭 - 바운딩 박스, 모양 조정 - 타입툴 드래그 - 텍스트 박스, 줄 조정 - 오브젝트 테두리에 타입툴 정용하기:type on the path toop - 세가지 바 중 윗쪽 화살표: 글씨를 테두리 바깥, 안쪽 드래그로 조정 - 오브젝트 모양대로 타입툴 적용하기:area type tool - 커서 모양이 동그라미 되었을 때 클릭 - 글자 수가 넘칠 경우 다른 오브젝트에 이어서 나타나게 하는 법 ## html, css - 클래스 - 태그에 클래스 부여 class="~" - css 선택자 '.' - 이름 중복으로 부여 가능 (알파벳 시작, 숫자, '-''_') - ID - 태그에 아이디 부여 id="~" - css 선택자 '#' - 이름 중복 부여 불가능 (알파벳 시작, 숫자, '-''_') - 클래스, id 선택자 예시 - div#a2 : div 태그 이면서 아이디가 a2인 엘리먼트 - .a2 .a3 : 클래스 a2인 엘리먼트의 후손인 클래스 .a3 엘리먼트 - CSS 선택자 연습 - [css dinner](https://flukeout.github.io/) - border-radiusa - 모서리에 각을 완만하게 해주는 속성, 적용 순서(좌측위, 우측위, 우측아래, 좌측아래) - 50% : 원이 된다. - [슬라이더 메뉴 만들기](https://codepen.io/sbyeony/pen/eYgQbdo) - inherit - 부모 엘리먼트의 속성이 자식 태그에게 상속 - [inherit 되는 속성 찾아보기](https://codepen.io/sbyeony/pen/rNjQoqa) # 2021-04-23, 011일차 ## 일러스트 - 컴파운드 패스 - 복합적인 패스 - window - appearance 패널에서 알 수 있다. - 사진을 이용해서 로고 만들기(캐릭터 3번째 방법) - 펜툴을 이용해 사진의 테두리와 디테일 작업 (떨어진 패스가 있으면 안된다.) - 패스 전체 outline stroke - 면 전체를 pathfinder에서 합쳐준다 - 채색을 위한 큰 오브젝트를 밑에 깔고 pathfinder에서 trim - 그룹 해제 후 색을 입혀준다 ## html, css - a 노말라이즈 - a의 기본 속성(파란글씨, 언더라인)을 평범하게 만들어 주는 것. - color:inherit, 부모의 color를 상속받는다 - text-decoration:none - body 노말라이즈 - margin:0 - nav - 네비게이션(gnb) - menu를 담고있다는 뜻(경계를 구분지어 줌) - menu-box > menu > menu-item > menu-item-text - 1차 메뉴 만들기 - [1차 메뉴 만들기](https://codepen.io/sbyeony/pen/ZELVadj?editors=0100) - [클래스 연습](https://codepen.io/sbyeony/pen/OJWrzbg?editors=1100) - [div>div](https://codepen.io/sbyeony/pen/mdRapZp?editors=1100) - 클래스는 최상위에 - 상황에 맞는 태그를 모르면 div(block), span(inline) # 2021-04-24, 012일차 ## 일러스트 - 마디아 일러스트 초급 강의, 포스터 만들기 연습 ## html,css - 멘토시리즈 24강 레이아웃, 선택자 헤더부분 강의 - 피그마 툴 강의 공부 # 2021-04-25, 013일차 ## 일러스트 - 포스터 제작 자료 찾기 - 모작 연습 ## html,css - 멘토시리즈 24강 레이아웃, 선택자 헤더 실습 - 피그마 툴 공부 # 2021-04-26, 014일차 ## 일러스트 - jpg 이미지 벡터화 하는법 - 이미지 선택 > 컨트롤바 > image trace > expand - 같은 색상 일괄 변경하기 - select > same > fill color (그룹지정 후 더블클릭: 그룹안에서만 색상 변경 가능) - edit > edit color > recolor artwork - 텍스트 변형 - 아웃라인 스트로크: ctrl+shift+O - 글씨 둘러싼 테두리: object > path > offset path - 모양 변형1: effect > wrap > ~~~ , object > expand appernace - 모양 변형2: object > envelope distort > make with warp (make with top object:오브젝트 모양에 맞춰서 변형) - 패턴 - 등록하는 법: window > swatches > 드래그 - 크기조절: 변형툴에서 tranform pattern 체크 - 오브젝트 뒤에 있는 투명패스 부분만 패턴이 된다. ## html,css - 리스트 - ul(순서 상관 없는 목록), ol(순서 있는 목록) - li: 목록의 아이템 - ul은 li만 자식으로 가질 수 있음! ```

메뉴 1-1
- 메뉴 2-1
- 메뉴 2-2
메뉴 1-2
- 메뉴 2-1
- 메뉴 2-2

```

메뉴 1-1
- 메뉴 2-1
- 메뉴 2-2
메뉴 1-2
- 메뉴 2-1
- 메뉴 2-2

- ul, ol, li 노말라이즈 - list-style:none - margin:0 - padding: 0 - h1~h6 - h1 가장 큰 제목 - h2~h6 하위 내용의 제목 - 동등한 수준의 내용의 제목은 같은 크기로 맞춰줘야 함 - h1~h6 노말라이즈 - margin:0 (기본적인 마진 제거) - 시멘틱 태그 - 의미가 있는 태그, 기계가 태그의 의미를 파악할 수 있음. - [1차 풀다운메뉴 만들기](https://codepen.io/sbyeony/pen/NWdJxwv) - [3가지 메뉴 구현하기](https://codepen.io/sbyeony/pen/gOgEagE) - 모양이 같고 어느 일부분만 변경해야 할 경우에는 클래스 명을 이중으로 부여하여 불러온다. - [a:hover+div](https://codepen.io/sbyeony/pen/WNRmQVo) - display: none - [inline-grid](https://codepen.io/sbyeony/pen/VwPRPPd) - 글자는 줄 안에 산다. - inline-block, 텍스트, 공백문자를 해결해주는 방법. - class="inline-grid" - font-size:0 - inline-grid의 모든 자손 vertical-align: top, font-size: 1rem # 2021-04-27, 015일차 ## 일러스트 - 브러쉬 - 단축키: B - 더블클릭 옵션 - fidelity: accurat<>smooth (정교함, 부드러움, 앵커포인트 수 차이) - fill new brush stroke (면 채움) - edit selected path (이어 그리기) - 새로운 브러쉬 등록: 오브젝트를 브러쉬 패널에 드래그 - scatter - art - pattern - 심볼 - 단축키: shift+S - 더블클릭 옵션 - intensity: - 심볼 위치 조정 툴 - 새로운 심볼 등록: 오브젝트를 심볼 패널에 드래그 ## html, css - vh - 뷰포트 높이 (뷰포트: 화면상의 화상 표시 영역) - 부모들의 높이값을 지정해주지 않고도 후손 엘리먼트의 높이값을 비율로 지정할 수 있다. - [그리드로 계단식 비율](https://codepen.io/sbyeony/pen/LYxaveo) - 가장 첫번째(부모) 엘리먼트 class 꼭 부여하기 # 2021-04-28, 016일차 ## 일러스트 - 블랜드 - 도형 또는 색상이 변화되는 과정을 표현 - 단축키:W - 실행: ctrl+alt+B(+shift 해제) - 더블클릭 옵션 - smooth color - specified distance: 과정의 도형 수 - specified distance: 도형 사이의 거리 - 오브젝트 순서에 따라 모양이 달라진다. - 오브젝트 선분을 각자 선택해 표현 가능 - 타입을 단일 패스로 만들기 - 아웃라인 스트로크 - 부분선택툴로 필요없는 앵커포인트 삭제해 열린 패스 만들기 - ctrl+J로 패스 붙이기 - 우클릭>언그룹, 우클릭>release compound path - 바운딩 박스 생성/해제: Ctrl+shift+B - 앵커포인트 생성/해제: ctrl+H ## html,css - position - 엘리먼트 배치 속성 - static - 사람모드 - relative - 사람모드 - 유령의 집 - absolute - 유령모드 - 유령의 집 - [2x2](https://codepen.io/sbyeony/pen/RwKOvVG) - [1x3](https://codepen.io/sbyeony/pen/gOgyqQX) - [3x3](https://codepen.io/sbyeony/pen/QWdPoLz?editors=1100) - [width, height X](https://codepen.io/sbyeony/pen/bGgJZEQ) - 엘리먼트 중앙 위치 시키기 - top을 50%, left를 50% 위치했을 때 박스가 아닌 시작점이 중앙에 위치해 있게 된다. (우측 아래로 치우쳐 있음) - 자신의 너비, 높이의 반 만큼 되돌아가야 함. - transform: translateX(-50%) translateY(-50%) 해결 - [정중앙](https://codepen.io/pen/) # 2021-04-29, 017일차 ## 일러스트 - 블랜드 획 시작 순서 바꾸기: blend > revers spine - 블랜드+패스 색상 수정: 블랜드 도형 부분선택 후 수정 - 컬러 모드 바꾸기: file > document color mode - transparency - 어두운 합성: 어두운 부분 강조, 밝은 부분 생략 - 밝은 합성: 밝은 부분 강조, 어두운 부분 생략 - 혼합: 중간 - 3D - effect > 3D - extrude&bevel options: 오브젝트의 입체감 - revolve options: 오브젝트를 둘러싼 형태 - rotate options: 오브젝트 3d 회전 - 단일 오브젝트와 그룹 오브젝트 형태 달라짐 ## html, css - [선택자 문제](https://codepen.io/sbyeony/pen/eYgavre) - [width, height X](https://codepen.io/sbyeony/pen/YzNbQeY) - 서브메뉴 선택, 후손 선택자 원칙 - 최대한 앞 순서에서 끊어준다 - [시험 공부](https://codepen.io/sbyeony/pen/QWdROdY) - overflow: 고정된 넓이의 넘치는 부분 - 기본값: visible - white-space: nowrap 줄바꿈 금지 - overflow-x: auto 스크롤바 자동생성 - overflow-x: scroll 스크롤바 무조건 생성 - overflow-x: hidden 넘치는 내용 숨김 - text-overflow: ellipsis 넘치는 내용 ... 처리 (nowrap, hidden 상태일 때 의미있음) - [overflow](https://codepen.io/sbyeony/pen/KKaLmjb) # 2021-04-30, 018일차 ## 일러스트 - 라이브 페인트 - 페인트 툴: K - 열린 패스로 생긴 공간 안에 색상 채우기 - shape bulider tool: 면을 생성하면서 색상을 채운다 - 이미지 트레이스 - jpg를 벡터로 변환시킨다. - 결과물의 다양한 옵션 - 디자인 - 디자인: 레이아웃/그리드 - 컨셉 및 기획: 스토리텔링 - 포스터: 타이틀(주제)/서브(부제)/바디(본문) - 정보: 가독성/주목성 - 심미: 색과 형태 - 설득: 공감 및 커뮤니케이션 - 3,3,3 원칙 - 자료, 컨셉(스토리텔링), 설득 - (많이, 다르게~) 보고, 그리고, 생각하고 - 대충, 수정, 완벽 - Copy 무엇을? 왜? 어떻게? - 크기, 비율, 색상 → 레이아웃/ 그리드 - 변화 주기 ## html,css - [3차 풀다운 메뉴 만들기](https://codepen.io/sbyeony/pen/yLgdbXv) # 2021-05-01, 019일차 - 포스터 자료 조사 - [메뉴 만들어보기](https://codepen.io/sbyeony/pen/NWdZERM) - 피그마 조 과제 # 2021-05-02, 020일차 - 피그마 조 과제 - [3차 풀다운 메뉴 만들기 복습](https://codepen.io/sbyeony/pen/yLgdbXv) - 마디아 영상 # 2021-05-03, 021일차 ## 일러스트 - 포스터 제작 - 자료 조사 - 좋은 작품의 레이아웃 규칙 찾기 - 주제, 컨셉 정하기 - 제작 의도 정리하기 ## html, css - [선택자 문제 풀기](https://codepen.io/sbyeony/pen/WNRVgYN?editors=1100) - [3차 메뉴 만들기 마지막 단계 연습](https://codepen.io/sbyeony/pen/LYxwJOz?editors=1100) # 2021-05-04, 022일차 ## 일러스트 - 클리핑 마스크 - 단축키: ctrl+7 - 아래 위치한 레이어를 기준으로 바로 위의 레이어를 아래 레이어의 형태만큼만 보여주는 기능 - 그룹 오브젝트를 컴파운드 오브젝트(ctrl+8)로 변환해야 클리핑 마스크로 사용할 수 있음 - 오퍼시티 마스크 - 흰색은 보여주는 부분, 검은색은 숨기는 부분, 회색 반투명 - 그라데이션 오브젝트 이용 > transparency > make mask ## html - 폰트 어썸([fontawesome.com](http://fontawesome.com/)) - 텍스트 처럼 사용하는 아이콘 - 이미지 단점을 보완 (깨지지 않음, 색상 변경 등이 용이함) - cdnjs.com에서 css 불러오기 해야 한다. - 트랜지션 - transition: width 1s, height 2s, background-color 3s; - 호버로 변하는 태그 속도 조절 효과 - 호버 적용한 태그에 입력하는것 아닌, 원래 태그에 입력. - box-sizing - content-box 기본값 - border-box 정해진 너비의 값을 넘지 않는다. - 폰트 사용하기 - 무료상업폰트: 눈누 - css에 붙여넣기 - 항상 맨 위에 적어야함! - [블로그 top-bar 만들기 (메뉴 1차)](https://codepen.io/sbyeony/pen/zYZOogm) # 2021-05-05, 023일차 ## 일러스트 - 포스터 작업 (진척도 80%) ## html, css - [블로그 top-bar 만들기 복습 1](https://codepen.io/sbyeony/pen/KKWPWZO) - [블로그 top-bar 만들기 복습 2](https://codepen.io/sbyeony/pen/LYWPqQJ?editors=1100) # 2021-05-06, 024일차 ## 일러스트 - 메쉬툴 : U - 오브젝트 안에서만 작동 - 클릭하면 수평,수직선 메쉬포인트 생성된다(alt 취소) - 부분선택툴로 선택 - object > create gradient mesh : 메쉬포인트를 일정한 간격으로 생성 ## html, css - 영문 웹폰트, 구글폰트 사용 - 영문 웹폰트와 한글 웹폰트 동시에 사용하기 - 사용할 폰트 css 불러오기 - font-family: "영문폰트~", "한글폰트~", "기타폰트~"; - box-shadow - x축, y축, 흐린정도, 색상 ## 자주하는 실수 - 일러스트 타입 툴 사용 후 종료하지 않는 것 - css 자동완성 되기 전 엔터 누르는 것 ## 큐 - 타입툴 사용 후 ctrl+enter 꼭 누르자 - css 끝까지 입력하자 ## 느낀점 - 끝까지 생각하고 차분하게 해야 효율이 올라갈 것 같다. # 2021-05-07, 025일차 ## 일러스트 - 포스터 과제 컨펌 - 폰트, 색상 다양하게 변화 줘보기 - 포인트가 되는 색상을 활용하기 ## html, css - visual studio code - 삭제, 설치하는 법 - 프로젝트 폴더 생성 후 폴더 빈 공간 우클릭 후 code로 열기 - .html 파일 우클릭 > 연결프로그램 > 크롬으로 열어야한다 - 확장기능 live server(html 내용 실시간 보기), beautify(소스코드 정리) 설치하기 - emmet 안될때 f1 emmet: expand abbreviation ## 자주하는 실수 - 오브젝트 그룹화 하지 않는 것, 수정이 어렵다 - 태그를 클래스로 불러올 때 헷갈리는 것. - position: absolute > width 값이 최소한으로 줄어듦 ## 큐 - 클래스를 입력할 때 어떤 태그에 부여했는지 잘 기억한다. - 같은 색상 위주로 그룹으로 묶는다. # 2021-05-08, 026일차 - 포스터 수정 - 컬러헌트에서 어울리는 포인트 컬러 찾아보기 - 오브젝트 크기, 위치 수정 - 마디아 영상 (UXUI_PC 9강, 10강) - vs code로 탑바 만들어보기 # 2021-05-09, 027일차 - 포스터 제작 마무리, 발표 준비 - 마디아 영상 (UXUI_PC 11강) # 2021-05-10, 028일차 ## 일러스트 - 포스터 발표 - 포스터 요소의 의미와 의도 - 다양한 자료 조사가 필요하다 - 실무자의 자!세! ## html, css - 깃허브 세팅하기 - 계정 기본 브랜치 설정 settings > repositories > main=>mater로 변경 - 리포지터리 settings > 하단 github pages > mater, docs 선택 후 저장 - docs 파일 생성후 파일 업로드 주소 mater/docs 에서 파일 올리기 - [리포지터리](https://github.com/seoyoenkk68/blog) - [블로그](https://seoyoenkk68.github.io/blog/) - 탑바 메뉴 링크 - 절대주소와 상대주소 - 내부 간 페이지 이동시 아이피, 폴더명 생략 - con - 고정너비레이아웃 - width값 고정 - margin값으로 가운데 정렬 # 2021-05-11, 029일차 ## html, css - 도메인 일괄 관리: DNSZI 가입 후 도메인 연결하기 - 깃허브 블로그에 CNAME 연결하기 - 블로그 홈에 이미지 나열하기 - img가 inline 속성(텍스트)을 가지고 있기 때문에 이미지 사이에 공간이 생긴다. 텍스트 행간 크기(line-height)를 0으로 바꾸거나 img display 속성을 block으로 바꿔줘야 한다. - 이미지 링크 img src="img(폴더)/bn_1.jpg(파일명)" ## 자주하는 실수 - 혹시 몰라서 블로그를 계속 복사본으로 수정하고 업로드 하니까 어떤 것이 최종으로 업로드 할 폴더인지 매우 헷갈린다. ## 큐 - 사용하지 않을 파일은 바로 삭제하고 얼만큼 수정한 것인지 폴더 이름 상세하게 입력해놓기.파일 이름 변경은 바로한다. # 2021-05-12, 030일차 ## 포토샵 - 포토샵에서 중요한 것 - 레이어 운용 - 마스크 - 블랜딩 - 포토샵은 비트맵 방식으로 해상도의 변화가 있기 때문에 캔버스 크기 등을 조심해야 한다. - 새 레이어 단위 값을 미리 설정 후 수치를 입력해야 좋음 - 단축키 - 사각선택영역툴:M(shift, atl) - 전경색채우기: alt+del - 배경색채우기: ctrl+del - 캔버스만들기: ctrl+N - 레이어생성: ctrl+shift+N - 선택영역해제: ctrl+D ## html, css - img-box - 이미지 반응형으로 만들기 - img의 부모에게 적용한다 - .img-box > img - widht: 100%, display: block ## 계획 - 12일 - 19:00~21:30 이동 및 저녁식사, 이사 짐 나르기 - 21:30~23:30 공부 vlog - 23:30~24:00 영상 업로드, 취침 - 13일 - 08:00~09:00 공부 vlog, 영상 업로드 - 10:00~ 학원 가기 전 까지 이사~~ # 2021-05-13, 031일차 ## 포토샵 - 사각 영역 선택 툴 M, style - nomal, fixed ratio(비율고정), fixed size(사이즈 고정) - 이동툴 : V - 레이어 복사 : alt+도형(레이어) 드래그 - 레이어 합치기: ctrl+E - 다중선택 ctrl, 다중연속선택 shift - 레이어 상단: ctrl+](+shift), 레이어 하단: ctrl+[(+shift) - 다양한 선택툴 - 매직봉/퀵셀렉션 툴:W - 픽셀 영역에 따라서 선택해주는 툴 - contiguous : 체크X 같은 색상 모두 선택, 체크O 면 안의 같은 색상만 선택 - tolerance : 색상 선택 허용치, 수치가 높을 수록 선택된 색상과 가까운 색까지 허용 - 색감 훈련하기 - 웹툰, 애니메이션 - 색상을 수치로 파악하는 훈련 ## html, css - 사진 사이 띄우기 ver.1 - 사진 width값 설정 - calc ((100% - (n칸 - 1) * 마진값px) / n칸) - ~n 마진 빼기 - ~번째 칸 마진 빼는 것 li:not(:nth-child(~)) - [사진 사이 띄우기 ver.1 연습](https://codepen.io/sbyeony/pen/mdWVaNV) - 사진 사이 띄우기 ver.2 - li에 padding, ul에 -margin - ~~ div>div.img-box>img - width값 100%/n칸 - li에 좌우 패딩 원하는 만큼 - ul에 양쪽 마진 값 빼주기 - 음수 마진은 부분 유령화이다. 부모를 벗어날 수 있음 - [음수마진 연습](https://codepen.io/sbyeony/pen/poegGYY) # 2021-05-14, 032일차 ## html,css - 썸네일 작품명, 작업기간 - div.work-name - div.work-date-period - li 사이 간격은 padding으로 준 것. 서로 붙어있는 상태이기 때문에 li 안의 자식들(.img-box, .work-name, .work-date-period)를 div로 감싸준것. - 아이템 호버시 검은색 이미지가 어두워지는 효과 - ~~ div.img-box > div.bg - background-color: rgba(0,0,0,0) - position: absolute, top:0, left: 0 - width:100%, height:100% - trnasition:background-color 1s - ~~ li:hover > ~~ > div.bg - background-color:rgba(0,0,0,0.5) - ~~ .img-box - position: relative - 아이템 호버시 이미지가 커지도록 - ~~ li:hover~~>img - transform: scale(1.4) - ~~ img - transition: transform 1s - ~~ .img-box - overflow: hidden - 자식의 overflow(커져서 삐져나온 사진) 처리하기 - img - position: relative - z-index: -1 - 아이템 호버시 추가 버튼 노출 - ~~ div.img-box > div.addi - color - border - border-radius - padding - position:absolute, top:50%, left:50%, transform:translate(-50% -50%) - opacity:0 - transition:opacity 1s - ~~ li:hover ~~ > div.addi - opacity: 1 - [적용](https://codepen.io/sbyeony/pen/bGqeWZY) # 2021-05-15, 033일차 - 블로그 홈페이지 추가버튼까지 적용해서 업로드 - 포토샵 따즈아 강의로 진도 맞추기 - 마디아 영상 (UXUI_PC 13~16강) # 2021-05-16, 034일차 - 블로그 처음부터 짜기 - 마디아 영상 (UXUI_PC 17~20강) # 2021-05-17, 035일차 ## 포토샵 - 요가 선생님 팔 구부리기 - 실루엣 magic wand tool 선택, ctrl+J - 실루엣 레이어 ctrl 클릭 영역 선택, select > modify > expand로 영역 활장 후 배경 레이어에서 content-aware fill - edit > puppet warp - 목각인형 포즈 바꾸기 - 폴리곤 라소 툴 팔 영역 선택 > ctrl+shift+J(영역 잘라내서 새 레이어에 붙이기) - puppet warp - 자유변형툴: ctrl+T - 드래그:정비례 / alt: 가운데 기점 / shift+드래그: 자유변형 - ctrl+드래그: 왜곡 / ctrl+shift+드래그: 자유왜곡 / ctrl+alt+드래그: 원근왜곡 - 브러쉬툴 - 브러쉬툴 B (+alt: 색감추출) - 사이즈 크게 ], 작게 [ - 오퍼시티 조절 0~9 - F5 옵션패널 다양한 브러쉬 설정 ## html - float - 요소 정렬하기 - 관련 규칙 - block 요소는 float 요소를 무시한다. - left: 좌에서 우로 나열 - right: 우에서 좌로 나열 - clear:both float계의 줄바꿈 - float-gird - .float-grid>* - float:left - .float::after - content: ""; - display: block - clear: both - [반응형 상품 리스트 구현](https://codepen.io/sbyeony/pen/XWMjpdQ?editors=1100) ## 자주하는 실수 - 라이브러리 내용 잊어버리는 것. ## 큐 - 필요한 라이브러리 한번은 써본다. # 2021-05-18, 036일차 ## 포토샵 - 브러쉬 만들기 - 형태는 흰색(인식 안되는 부분), 검은색(인식되는 부분)으로 이어야 한다. - 채도 낮추기: ctrl+shift+u - 색상 반전: ctrl+i - 명도 조절: ctrl+l - edit > define brush preset - 브러쉬 사용시 shift 누른 채 클릭하기 : 반듯하게 그려진다. - 레이어 패널 locks 사용하기 - 타입툴 - 단축키: T - 텍스트 레이어: 해상도x, 색상o, 왜곡x - 일반 레이어: 해상도o, 색상o, 왜곡o - 스마트 오브젝트 레이어: 해상도x, 색상x, 왜곡o ## html, css - 반응형 상품리스트 구현하기. - max-width - @media - flex 연습 # 2021-05-19, 037일차 - 3차 메뉴 복습하기 - 반응형 상품리스트 스스로 구현하기 - flex 연습 # 2021-05-20, 038일차 ## 포토샵 - 쉐이프 레이어 특징 - 해상도x, 색상o, 왜곡o - 선택툴 A - 패턴 등록하기 - edit > define pattern - 채우기 - 단축키: shift+F5 - 채우기 옵션 선택 - 색도 변경: ctrl+U - 클리핑 마스크 - ctrl+alt+G / Alt+클릭 - 상위 레이어가 하위 레이어의 의해 마스킹 되는 기능 ## html, css - 부분모작 - 반응형 상품리스트 2 연습 # 2021-05-21, 039일차 ## 포토샵 - 펜툴: P - paths 레이어에 생성된다. - 레이어 더블클릭 후 저장해야 다음 작업에도 사라지지 않는다. (work path 저장이 안된 패스) - 패스 모양대로 영역 만들기 - ctrl+enter - ctrl+레이어 클릭 등 - 패스 레이어 선택 시 옵션바 패스파인더 기능 일러스트와 동일 - 패스 선택 툴 A (전체, 부분 선택) - 여러가지 효과 - 광선검: 소프트 라운드 브러쉬 > 레이어 스타일 > outer glow - 속도감: 스마트오브젝트 > 필터 > 블러 > 모션블러 > 스마트필터 (마스크) > 검숨흰보 - 스마트 오브젝트 - 레이어 우클릭 > convert to smart object - 원본 손상 없이 필터 적용할 수 있다 (스마트 필터) - 색감 보정하기 - image > abjustments ## html, css - 밑줄 효과 [링크](https://codepen.io/sbyeony/pen/OJpWadm) - after 사용한다. - position: absolute - left: 50% / transform: translateX(-50%) - 카카오톡 상단바 모작, flex 사용하기 [연습1](https://codepen.io/sbyeony/pen/mdWWOyL) - flex-grow 너비 최대한 넓어지는 개구리. 나머지 여백을 다 차지하는 개구리이다. - top-bar 만큼 con이 늘어나게 한다. (탑바와 콘을 한몸처럼 만들기) .height-full: wdith:100% - ㅊon의 자식들의 높이?! 왜 쭉 늘어나느냐? 개구리들 기본값이 align-items가 stretch이기 때문이다 >center로 하면 쫙 줄어든다는 문제 - 쫙 늘어나 있는 높이는 그대로 둔 채 요소만 가운데 보내기. 가운데 보낼 요소: img 의 부모 a 한테 flex 준다. 그리고 a 한테 flex-ai-c 를 준다(flex flex-ai-c 공식) - 높이가 전파된 경위 - header.top-bar >> 높이 px로 고정 - div.con >> flex / 높이 height-full - a.top-bar__logo >>flex의 자식 높이 받음/flex 부모 - img >> flex 자식 높이 받음 - nav.top-bar__menu-box-1 >> flex 자식 높이 받음 --- flex 끊김 - ul >> !!!높이 물려받지 않음!!! // height-full을 줍니다. // flex의 부모임 - li >> flex의 자식 높이 받음 - a >> height-full // (a이기 때문에) display:flex / 수직중앙정렬 / flex-ai-c - .flex-as-c : align-self:center ## 계획 - 금요일 - 19:00~22:00 - 22:00~23:00 귀가 - 23:00~24:00 공부 1st 포토샵 복습 - 24:00~01:00 공부 2st flex 복습 - 토요일 - 13:00~14:00 공부 3st 전체복습 - 14:00~15:00 공부 1st 부분 모작 - 15:00~16:00 공부 2st 부분 모작 - 16:00~17:00 공부 3st 인강 # 2021-05-22, 040일차 - 카뱅 상단바, flex 복습 [연습](https://codepen.io/sbyeony/pen/MWppbxJ) - 모작 상단바에 flex 적용하기 - 디자인 인강 ## 자주하는 실수 - ::after에 content 넣는 것. ## 큐 - ::after 입력 후 바로 content 생각하기 # 2021-05-23, 041일차 - 문고리닷컴 상단바 모작 # 2021-05-24, 042일차 ## 포토샵 - 도장툴:S - alt로 선택한 곳의 픽셀을 가져와서 덮는 것 - aligned: alt로 선택한 곳 위치 고정 or 브러쉬랑 같이 이동 - 반창고툴:J - alt로 선택한 곳의 질감을 가져와서 덮는 것 - spot healing brush tool: 자동으로 질감 선택 - patch tool: 영역을 그려서 선택 가능 - red eye tool: 적목 보정 - 지우개툴: E - 우클릭으로 브러쉬처럼 선택 가능하다. - 그 외 - 샤픈: 선명하게(픽셀이 원색으로 변하는 원리) - 블러: 흐릿하게 - 스머지: 픽셀을 밀어버린다 - 닷지: 밝게 - 번: 어둡게(태우는 듯한 효과) - 스펀지: 흑백(색이 빠지는 효과) - 픽셀잠금에서 지우개로 지우면 색이 지워진다. ## html, css - 148, 150강 공부 # 2021-05-25, 043일차 ## 포토샵 - Liquify - filter > liquifty - 픽셀유동화 - 마스크 - 사진과 액자 - 레이어 순서: 사진이 위에, 액자는 뒤에 - ctrl+alt+G - 레이어패널 > add layter mask - 수정이 가능한 지우개: 검은색 숨김, 흰색 보여줌 - 마스크 썸네일: 색종이에 색상이 없음(검,흰계열) - image-abjustment-threshold(한계치) ## html, css - 148,150강 시험 # 2021-05-26, 044일차 ## 포토샵 - 마스크 예제:수채화 느낌 - 마스크의 프레임: threshold - 프레임의 내용에 프레임 마스크 생성 (레이어 패널) - 마스크 레이어에 프레임 옮기기 - 마스크 레이어 진입: alt+마스크 레이어 썸네일 클릭 - 조정레이어 - 레이어패널 하단 반달모양 아이콘 - 보정할 이미지의 원본을 보존하면서 효과를 줄 수 있다 - 조정레이어 아래의 레이어에 대한 정보를 조정 - 선택영역반전:ctrl+shift+I - 레이어 합치기 - ctrl+E : 선택/유실 - ctrl+alt+E : 선택/유지 - ctrl+shift+alt+E : 눈/유실 - 블랜딩모드 - 질감, 색상을 합성하다. - 노멀/디졸브 - 어두운합성:밝은면 생략, 어두운면 강조 - 밝은합성:어두운면 생략, 밝은면 강조 - 혼합합성:밝은면 중간 강조, 어두운면 중간생략 - 그외 ## html, css - flex 레이아웃 - header, section, footer {flex, flex-direction: column} - header. footer {flex-grow:0} - section {flex-grow 1, min-height:100vh} - section > nav, main, aside {flex, flex-direction:row} - nav, aside{flex-grow:0, flex-bais:~px, flex-shrink:0} 너비 고정 - main{flex-grow:1,} - [연습](https://codepen.io/sbyeony/pen/oNZegoR) # 2021-05-27, 045일차 ## 포토샵 - 블랜드 예제 - 벽에 비치는 조명빛 만들기: 검은색 배경+소프트라운드 브러쉬 > linear light 모드 - 네온사인 글씨 - 텍스트레이어 > 일반레이어 변환 > 영역선택 > 선택영역 축소(select>modify>contract) - 레이어스타일(블랜딩옵션) > outer grow - 슈퍼맨 로고 - 배경 - (픽셀이 있는 상태에서) 레이어스타일 그라디언트 오버레이 - filter > stylize > extrude - 텍스트 효과 - bevel & emboss - stroke - color overlay - dorp shadow ## html, css - 탑바 반응형 - @media - .top-bar {position: fixed} : 탑바 메뉴 위치 고정 - 라이브러리 overflow-x-auto : 탑바 메뉴 가로 스크롤 생성 # 2021-05-28, 046일차 ## 포토샵 - 필터 - 필터 적용하기 위한 레이어에 픽셀이 존재해야 필터가 적용된다. (예: 검은색 배경에 필터효과 주고 블랜딩 사용하여 합성하는 방식) - 필터 적용하기 위해서는 레이어의 투명 잠금이 해제되어야 한다. - 비맞는 여자 만들기 - pixelate > mezzotint: 입자 - blur > motion blur: 떨어지는 빗방울 느낌 - 밝은 색 합성 블랜딩 - 색보정-블리치 바이 패스: 사진레이어복사 > 흑백(ctrl+shift+U) > 블랜딩 multiply - 스파이더맨 웹배너 만들기 - 비네팅 효과: 새레이어+색상+블랜딩 multiply > 가운데 부분 지워주기 - 플레어 효과: 새레이어+검은색 채우기+필터>랜더>렌즈 플레어+블랜딩 밝은 합성 - 조정레이어+마스크 - 원하는 픽셀에만 마스크를 적용하고 싶을 때 마스크 기능을 활용한다. ## 자바스크립트 - console의 개념 - 눈에 안보이는 정보 확인. 프로그램의 내부 정보를 보여주는 창 - console.log(""); - 코드펜에서는 자동 랜더링이기 때문에 console.clear(); 를 맨 위에 입력한다. - 숫자와 문장 - 데이터의 두 형태: 문장, 숫자 - console.log("문장"); ==> '문장' 문장 - console.log(1); ==> '1' 숫자 - console.log("문" + "장"); ==> '문장' 문장 - console.log(3 + 3); ==> '6' 숫자 - console.log("문장" + 3); ==> '문장3' - console.log("문장" + 3 + 6); ==> '문장36' - console.log("문장" + 3 * 6); ==> '문장18' (연산 순서 곱하기 먼저) - console.log("문장" + (3 + 6)); ==> '문장9' (연산 순서 괄호 먼저) - 변수 - 자바스크립트 구성요소: 변수, 값(데이터) - 변수 : 값 저장소, 공간 - let x; (x를 변수로 선언(생성,초기화)한다) - x = 3; (변수 안에 값을 넣는다) - 변수에는 값이 1개 - 변수 이름 설정 : 알파벳, 숫자, 언더바 (숫자먼저안됨) - 변수의 해석 - 변수는 '=' 좌측에서만 변수로 취급된다. 공간으로써의 의미 - lex x(=undefined); ==> x는 변수 - x = 10 ==> x는 변수 - console.log(x) ==> x는 변수가 아님, 10 - 변수 a와 b의 값을 서로 교체 (변수 활용) - [문제풀이](https://codepen.io/sbyeony/pen/abJLmXQ) - 제이쿼리로 디자인하기 - 코드펜 세팅 > JS > jq 검색, script src="붙여넣기" - $('div').css('width','100px'); 요런식으로 - 변수 응용하기 - let divWidth = '100px'; - $('div').css('width', 'divWidth'); # 2021-05-29, 047일차 - 시각디자인 인강 : 2강 - 멘토시리즈 최종 예제 연습하기 - 말랑말랑 모작 시작 # 2021-05-30, 048일차 - 말랑말랑 모작 # 2021-05-31, 049일차 ## 포토샵 - 채널 - 레이어패널 > 채널레이어패널 - 색상 레이어: 검은색인 부분-해당 색상이 없다는 뜻 - 채널에서 누끼작업 - 최대한 검은색이 나온 채널 카피 - ctrl+L 최대한 검은색 흰색 대비되게 보정 - 흰부분만 선택 후 rgb 레이어에서 복사 - 일반 레이어 패널에서 붙여넣기 - 채널의 누끼작업: 질감 추출시 사용하기 좋음.(불꽃, 구름 등) - 병합복사 : ctrl+shift+C,V ## 자바스크립트 - 자바스크립트 구성요소 - 변수 - 데이터 - 실행불가능: 숫자,문자,참거짓 - 실행가능: 함수 - 소스코드의 2대 제어요소: 조건문, 반복문 - 조건문 if - if (소괄호/참이면) {중괄호/실행된다} 이프소중 - else 조건문이 거짓일 경우 - if () {} else if () {} - if () {} else {} - == 같다 - != 같지 않다 - ! 반전 - && 그리고 - || 또한 - 함수 - 코드조각을 모아둘 수 있음. - funtion 함수명() {} - 함수명(); : 함수명 함수를 실행한다. - onclick - html 클릭했을 때 ~~ - onclick="a();" 클릭했을 때 a함수 실행 - no % 2 == 0 : 짝수, 홀수 판별 # 2021-06-01, 050일차 ## 포토샵 - 포스터 과제 준비하기. - 주제, 컨셉, 제작경위 작성 ## 자바스크립트 - [isRed 변수로 구분하기](https://codepen.io/sbyeony/pen/MWprBZM) - [클릭 이벤트](https://codepen.io/sbyeony/pen/JjWMaKW) - [팝업1 구현](https://codepen.io/sbyeony/pen/eYvyLgJ) ## 자주하는 실수 - 자바스크립트 입력할때 '' 까먹는다. - 변수랑 함수를 '' 안에 넣는다. '' 하면 안된다..! - 자바스크립트에서 클래스선택을 까먹는다.. ## 큐 - 괄호와 작은따옴표 세트로 생각한다. - 변수, 함수를 입력하는것을 인식한다. - .을 잊지 말자..! # 2021-06-02, 051일차 ## 포토샵 - 1안 타이포 레이아웃 결정 - 2안 만들기 ## 자바스크립트 - 팝업 복습하기 (10분 컷) ## 계획 - 19:00~19:30 귀가 - 19:30~20:30 저녁식사, 정리 - 20:30~21:00 산책, 휴식 - 1st - 21:00~21:30 위키 필기 정리 - 21:30~22:00 인강 - 2nd - 22:00~23:00 포스터 과제 - 3st - 23:00~24:00 자바스크립트 복습, 모작 # 2021-06-03, 052일차 ## 포토샵 - 포스터 작업 컨펌 - 몽환적 분위기, 색상 더 많이 넣기 ## 자바스크립트 - [팝업구현, mouseenter, mouseleave](https://codepen.io/sbyeony/pen/PopRzNN) - [addClass, removeClass 배경색 변경, 회복](https://codepen.io/sbyeony/pen/QWpmEKM) - active 클래스에 스타일을 설정 - 클릭했을 때 active 클래스를 더하기, 빼기 - [hasClass 버튼 하나로](https://codepen.io/sbyeony/pen/jOBzrYZ) - 태그에 active 클래스가 있는지 판별하는 변수 - if, else 적용하기 - addClass로 제이쿼리를 최소화 하는것이 좋다. # 2021-06-04, 053일차 ## 포토샵 - 포스터 수정 - 2안 제작 ## 자바스크립트 - [addClass, removeClass 팝업 구현](https://codepen.io/sbyeony/pen/ExWEeJg) - 클래스 불러올때 . 잊지말기! - 팝업2 구현하기 - [레이아웃](https://codepen.io/sbyeony/pen/ExWEdYN) - [닫기 버튼](https://codepen.io/sbyeony/pen/bGqvmgX) - [레이아웃 완성](https://codepen.io/sbyeony/pen/MWpVPme) - [버튼 구현하기](https://codepen.io/sbyeony/pen/ZEexqaL) - [팝업 애니메이션](https://codepen.io/sbyeony/pen/WNpzaJQ) - 투명~불투명 애니메이션 공식: display 대신 opacity + visibility - 위에서 내려오기: transform: translateY(-100%) - 클래스 .popup.active 안에 있는 .popup__content - [함수 매개변수](https://codepen.io/sbyeony/pen/XWMEQeW) - 팝업 2개 구현 - [팝업 2개](https://codepen.io/sbyeony/pen/LYWdvXW) - [팝업 버튼 함수로 묶기](https://codepen.io/sbyeony/pen/KKWoYJj) - [함수도 하나로 만들기](https://codepen.io/sbyeony/pen/BaWrEeG) # 2021-06-05, 054일차 - 자바스크립트 복습 - 피그마(노트폴리오) 웹 배너 제작하기 - 부분모작 말랑말랑 info-box # 2021-06-06, 055일차 - 부분모작 말랑말랑 반응형일 때 탑바 메뉴 수정 - 포스터 발표 준비 # 2021-06-07, 056일차 ## 자바스크립트 - preventDefault, return false: 링크의 이동을 막는다 - alert, confirm: 경고, 확인창 - confirm 확인선택 : true - confirm 취소선택 : false > return false 링크이동 막기 - stopPropagation - 자식 태그 클릭하면 부모 태그까지 전달된다. - 적용한 태그까지만 클릭이 전달됨. - [팝업의 어두운 부분 클릭해도 꺼지게 하기.](https://codepen.io/sbyeony/pen/MWpXrQz) - 팝업 닫는 함수에 검은부분 태그 불러오기(popup) - [팝업의 콘텐츠 부분을 클릭해도 꺼지지 않게 하기.](https://codepen.io/sbyeony/pen/YzZvYLW) - return false - [화면 높이 한계 정하기](https://codepen.io/sbyeony/pen/MWpXvLx) - max-height:100vh - overflow-x:auto # 2021-06-08, 057일차 ## 자바스크립트 - [팝업 나오는 동안 html 수준 스크롤바 나오지 않게 하기](https://codepen.io/sbyeony/pen/YzZjoya) - 버튼 누를때 html에 클래스 더하기, 제거하기. - 클래스에 overflow:hidden 스타일 적용하기 # 2021-06-09, 058일차 ## 자바스크립트 - [팝업 2개 동시에 띄우기](https://codepen.io/sbyeony/pen/LYWBwZq) - 팝업 열때 효과들 함수로 묶기 ## 부분모작 - [말랑말랑 반응형 탑바 메뉴 버튼 구현](https://codepen.io/sbyeony/pen/mdWKXvz) - 노트북으로 기준으로 패딩 간격 맞추면, 학원컴에서는 간격이 넘쳐버림. # 2021-06-10, 059일차 ## 자바스크립트 - [객체](https://codepen.io/sbyeony/pen/gOmdGJz) - [객체(폴더)의 값(파일) 내용이 함수](https://codepen.io/sbyeony/pen/VwpGrer) - [개명하기](https://codepen.io/sbyeony/pen/dyvqZvJ) - [스와이퍼 라이브러리](https://codepen.io/sbyeony/pen/LYWJOJd) ## 부분모작 - [말랑말랑 캐릭터 탄생 스토리 작업, 반응형 중](https://codepen.io/sbyeony/pen/jOBvyqg) ## Daily UI 001 - Sign Up 페이지 만들기 # 2021-06-11, 060일차 ## 자바스크립트 - [슬라이더1 슬라이더 2개 만들기, 기본옵션](https://codepen.io/sbyeony/pen/NWpEVYg) - html, JS 불필요한것 지우기 - JS 함수로 묶기 - [슬라이더2 슬라이더 응용](https://codepen.io/sbyeony/pen/RwpqmdR?editors=1010) - min-height: 100vh 과정 - 2분할, 3분할 # 2021-06-12, 061일차 - [말랑말랑 부분모작 하단부](https://to2.kr/cv7) - 시각디자인 인강 # 2021-06-13, 062일차 - [말랑말랑 부분모작 완성](https://cdpn.io/sbyeony/debug/ExWOamb/wQMPoGOqpeXk) # 2021-06-14, 063일차 ## 자바스크립트 - 48강 [속성*="~"] - 선택자의 속성 중 ~ 포함한 것 모두 불러오기 - [49강 - 팝업 최종](https://codepen.io/sbyeony/pen/YzZRoJr?editors=1100) - 팝업 바디에 flex-grow:1 - 팝업 컨텐츠 height: 100% # 2021-06-15, 064일차 ## 자바스크립트 - 그레이브 문법 ``` - 선택: .popup-1-actived - 기존방법: '.popup-' + no + '-actived' - 그레이브: `.popup-${no}-actived` ``` - [아코디언2 구현](https://codepen.io/sbyeony/pen/abJPGoZ?editors=1010) # 2021-06-16, 065일차 ## 자바스크립트 - 제이쿼리의 본질 - [57강 풀어보기](https://codepen.io/sbyeony/pen/gOmqOJv) - toggle - [58강 풀어보기](https://codepen.io/sbyeony/pen/zYZeYbx) - next, prev - [59강 풀어보기](https://codepen.io/sbyeony/pen/jOBdOJX) - mouseenter - [60강 풀어보기](https://codepen.io/sbyeony/pen/poeGvRz) - $box1Itme.addClass('active') $this.removeClass('active') - [61강 풀어보기](https://codepen.io/sbyeony/pen/PopVwWd) - parent, children - [62강 풀어보기](https://codepen.io/sbyeony/pen/rNyPame) - find(>*) - [63강 풀어보기](https://codepen.io/sbyeony/pen/oNZmgwG) - siblings # 2021-06-17, 066일차 ## 자바스크립트 - 반응형 메뉴 만들기 - [1단계](https://codepen.io/sbyeony/pen/mdWoyrq) - 테일윈드 md:block md 크기 이상일 때 보인다, md:hidden md 크기 이상일 때 숨어있는다. - [2단계](https://codepen.io/sbyeony/pen/YzZgXjg) - 테일윈드 flex-1 flex: 1 1 0%; (Three values: flex-grow | flex-shrink | flex-basis) - 테일윈드 (fixed와 함께) inset-0 : top: 0px | right: 0px | bottom: 0px | left: 0px + bottom-auto - [3단계](https://codepen.io/sbyeony/pen/jOBJEVd) # 2021-06-18, 067일차 ## 자바스크립트 - 반응형 메뉴 만들기 - [최종](https://codepen.io/sbyeony/pen/YzZMEeK?editors=0010) - 정리 - 1단계: 피씨 탑바 / 모바일 탑바 스위치(Md) - 2단계-1: 탑바 커스텀 1) 마크업 시 블럭 단위로 클래스 명 부여하는 것 : 관련있는 엘리먼트의 모음이 블럭 > 블럭과 블럭이 모여서 블럭 2) 가로정렬 flex, flex-grow 3) 세로정렬 : 가장 안쪽 요소를 쫙 늘려붙여서 가운데 정렬하기 (텍스트=span일 경우 span 바로 위) 4) 메뉴아이템의 간격을 a에게 padding으로 주는것! 5) 내용 들어가는 섹션 / 탑바 픽스드, div로 간격주기(가장 위에 입력) fixed, inset-0, bottom-auto, h-값 - 2단계-2: 모바일 탑바 커스텀 1) 로고 가운데 정렬위해 양옆 flex-1 2) 햄버거는 span(폰트어썸)으로, 오른쪽 flex-1의 자식으로 만들기 - 3단계 1) 사이드바 마크업 2) 검은배경 3) 박스만들기: 헤드flex-shrink-0 바디flex-grow 4) 버튼만들기 5) 버튼구현: 자바스크립트 입력 순서: 초기화 >> 함수 >> 실행 6) 사이드바 노출시 html 스크롤바 숨기기(미디어쿼리로 모바일일때만) > 제이쿼리 추가 - 4단계 1) 메뉴 마크업 2) 열닫표시 [+],[-],> 3) 커스텀 (2차 메뉴 배경 중첩, 간격, 호버 등) 4) 자바스크립트 구현, hover > active 바꾸기 5) 엑티브 빼주는 온갖 작업 등 (Return false, 형제 siblings, 자식 find) - 5단계 1) 옮기기 2) 스크롤(바디 overflow-y-auto) 3) 사이드바 키고 끌때 액티브 빼주기 # 2021-06-19, 068일차 ## 자바스크립트 - 시험공부 # 2021-06-20, 069일차 ## 자바스크립트 - 시험공부 - 디자인 인강 # 2021-06-21, 070일차 ## 자바스크립트 - lge 사이트 모바일 메뉴까지 모작 시험 - [시험용 위키](https://to2.kr/cKf) # 2021-06-22, 071일차 ## 자바스크립트 - [시험 모작 번외](https://codepen.io/sbyeony/pen/YzZMgmX) - 슬라이드 다운-복습필요 # 2021-06-23, 072일차 ## 자바스크립트 - [아코디언 정복](https://codepen.io/sbyeony/pen/xxqoOaz) - .slideDown() / .slideUp() - .stop() : 현재 동작하고 있는 애니메이션은 즉시 동작이 중단 된다. - find('this의 자식~~!!') <<잊지ㅁr - [gsap](https://codepen.io/sbyeony/pen/ZEedBbN) - gsap.to('대상, {애니메이션내용}, 딜레이'); - gsap.from - {duration: } 움직이는 시간 # 2021-06-24, 073일차 ## 자바스크립트 - [탭메뉴1](https://codepen.io/sbyeony/pen/gOmNVQL) - [탭메뉴2](https://codepen.io/sbyeony/pen/MWpMNMP) - 탭메뉴 불러오기 [링크](https://codepen.io/jangka44/pen/poeXYdy) - data-tb="tab-box-1__2__head" - data-tb-clicked - .tb-active - html.tab-box-1__1__actived - [GSAP 트리거](https://codepen.io/sbyeony/pen/OJpKQzz) # 2021-06-25, 074일차 ## 자바스크립트 - scroolTrigger: { trigger:'box-1', markers:'true', start: '0, 50%'} [링크](https://codepen.io/sbyeony/pen/RwpXMp) - markers : 화면에 시작,끝 표시 - start : 상단 기준 ~퍼센트 기준으로 트리거 시작 이 지점을 지나야 애니메이션 실행 - [효과 easing](https://greensock.com/docs/v3/Plugins/ScrollTrigger/) - [트리거 문제](https://codepen.io/sbyeony/pen/VwpoXyx) - enter, leave, enterBack, leaveBack - [글로오아시스 모작 적용](https://cdpn.io/sbyeony/debug/wvJVLmb/GnrnbXLDZadr) # 2021-06-26, 075일차 - 시각디자인 인강 | 타이포그래피 - 부분모작 | 동아출판 - 자바스크립트 복습 | 아코디언메뉴, 탭메뉴, gsap # 2021-06-27, 076일차 - 시각디자인 인강 | 타이포그라피, 예제 - 부분모작 | 동아출판 # 2021-06-28, 077일차 ## 조과제 - 타슈 리디자인 - 피그마 인터랙션 공부 ## 자바스크립트 - [스와이퍼 5,6강 문제풀기](https://codepen.io/sbyeony/pen/poPovEb) - [스와이퍼 7강 문제풀기](https://codepen.io/sbyeony/pen/BaRayZB) - [스와이퍼 8강 문제풀기](https://codepen.io/sbyeony/pen/poPovdN) - [스와이퍼 9강 문제풀기](https://codepen.io/sbyeony/pen/abWbzPj) - [스와이퍼 10강 문제풀기](https://codepen.io/sbyeony/pen/KKmKwOv) - [스와이퍼 11강 문제풀기](https://codepen.io/sbyeony/pen/ExmxjXM) # 2021-06-29, 078일차 ## 자바스크립트 - [스와이퍼 11, 12강 문제풀기](https://codepen.io/sbyeony/pen/mdmdQWM) - [스와이퍼 13강 문제풀기](https://codepen.io/sbyeony/pen/JjNjeeE) # 2021-06-30, 079일차 ## 자바스크립트 - [슬라이더 배너 실습 1](https://codepen.io/sbyeony/pen/NWjPppZ) # 2021-07-01, 080일차 ## 웹코딩 - 스프라이트 이미지 사용하기 - postimages.org 에서 url 재생성하기 - 고정비율 div - height의 퍼센트 : 부모 width 대비 - after, padding-top - background-image / background-size: cover / background-position: center ## 자바스크립트 - [슬라이더 배너 실습 2](https://codepen.io/sbyeony/pen/oNWXZaE) # 2021-07-02, 081일차 ## 자바스크립트 - 클래스 101 슬라이더 모작 - 심플 스와이퍼 # 2021-07-03. 082일차 - 조과제, 와이어프레임 프로토타이핑 작업 # 2021-07-04, 083일차 - 조과제, 와이어프레임 프로토타이핑 작업 # 2021-07-05, 084일차 ## 자바스크립트 - [23강 배너 - 양옆에 조금 보이게](https://codepen.io/sbyeony/pen/mdmVJNZ) - [24강 배너 - 양 옆이 보이는 슬라이더, 반응형](https://codepen.io/sbyeony/pen/BaRjNwg) - [클래스 101 슬라이더 모작](https://codepen.io/sbyeony/pen/ZEKQYKN) # 2021-07-06, 085일차 - border / outline - 슬라이더 바뀔때 마다 감지 swiper API : [링크](https://codepen.io/sbyeony/pen/poPyEpx) - 이벤트 on: - afterInit 최초의 한번 세팅 / slideChange 변경될 때마다 표시하도록 세팅 - realIndex - attr 엘리먼트에 속성 부여하기 # 2021-07-07, 086일차 ## 자바스크립트 - [슬라이더 배너 실습 3](https://codepen.io/sbyeony/pen/dyWMWXR) - 페이지네이션 미리보기(NEW!) - 양 옆 보이기 - 네비게이션 커스텀 - 사진 점점 커지는 효과 - 좌측 위 상품평 내려오기 # 2021-07-08, 087일차 ## PHP - [수업페이지(to2.kr/cSq)](https://to2.kr/cSq) - https://www.apachefriends.org/index.html - https://getcomposer.org/ # 2021-07-09, 088일차 ## PHP - [수업페이지(to2.kr/cSq)](https://to2.kr/cSq) - git 설정하기 - git init - git remote add origin https://github.com/seoyoenkk68/php - git remote remove origin - git remote -v - git config user.name "seoyoenkk68" - git config user.email "seoyeonkk68@gmail.com" - 작업사항을 로컬 리포지터리에 넣는 명령어 - git status - git add . - git commit -m "커밋 메시지" - git log - 로컬 리포지터리 -> 원격 리포지터리 업로드 - git push origin master # 2021-07-10, 089일차 - 시각디자인 인강 - 포토샵 복습 - 모작 1시간 # 2021-07-11, 090일차 - 시각디자인 인강 - 포토샵 복습 - 모작 1시간 # 2021-07-12, 091일차 ## php - github 저장소(리포지터리) 생성 - 작업폴더 생성 - 작업폴더에서 cmd 실행 - git init - 작업폴더에 로컬 저장소를 만든다 - git config user.name " ", git config user.email " " - 협업 시 누가 commit 했는지 추적하기 위해 - git remote add origin ~~ - 로컬 저장소와 깃허브의 원격 저장소를 연결 - git add . - 작업파일을 장바구니에 담는 것 (git status로 상태 확인) - git commit -m "작업내용" - 메세지와 함께 장바구니에 담긴 작업파일을 로컬 저장소로 commit 하는것 - git push origin master - 로컬 저장소에 있는 작업파일을 원격 저장소로 push 하는 것 - 작업폴더 cmd > code . > vs code 에서 ctrl+1 옆 물결 에서도 가능 - git pull origin master # 2021-07-13, 092일차 ## php - https://www.oooo.com/aa/bb/cc/ff.html - ./ ==> /aa/bb/cc/ - php -S localhost:8021 -t ./docs ``` ``` # 2021-07-14, 093일차 ## php - 웹서버 - 브라우저 요청, 웹서버 응답 - php 구문: 실행하면 없어진다 - 웹루트 - 빈공간 우클릭으로 vscode 여는거 굉장히 중요함 - docs 우클릭 새파일 test.php - 웹루트가 되었다: 웹브라우저를 통해서 남들이 내 컴퓨터에 접속할 수 있음 - php ``` 안녕하세요. 저는 , 살 입니다. ``` ``` 안녕하세요. 저는 , 살 입니다. ?name=임꺽정&age=21 안녕하세요. 저는 임꺽정, 21살 입니다 ``` ``` 안녕하세요. 저는 , 살 입니다. ?name=홍길동&age=19 denied! ``` - 주의할 것 - commit 하기 전에 ctrl+c로 php서버 꺼야한다 - echo - script태그 안의 데이터 표출하기 console.log(), document.write() - php 데이터 표출하기 echo"~" ``` "; ?> 함축한 표현 ``` # 2021-07-15, 094일차 ## php - git 협력하기 - 저장소 주인이 원격 저장소 생성 후 협력자 초대 - 저장소 주인이 세팅 후 push 하면 협력자가 pull 하여 작업한다 - 같은 곳을 작업하거나 수정하면 push 시 충돌이 생긴다 # 2021-07-16, 095일차 - [토스트 에디터로 임시 블로그 수업 페이지](to2.kr/cUN) - git 협력하기 - 작업 순서 - git pull ~ - 수정 - save - git add . - git commit -m "~" - git pull / push - 수정, save, add, commit 사이에 push 끼어들 수 없음. - git 주의, 팁 - git init 후에 docs 만들기 - git clone으로 모든게 세팅된 로컬 저장소 한번에 만들기 : git clone https:~~ . - git push 안될 때 윈도우 자격증명 : window 자격증명관리 -> github 선택 후 제거 - git add . 안될 때 : git add .-u - 작업 저장 add commit은 일련의 이어진 행동이다. 이 사이에는 절대 pull을 하면 안된다. - defer - html에서 body 실행 전 script가 실행됨 -> defer로 html이 다 로딩된 후 작동하도록 하는 것 ``` ``` # 2021-07-17, 096일차 - 조과제: 프로세서 페이지 코딩 - 과제 개인 작업: 타슈 어플 리디자인 - 시각디자인 인강 # 2021-07-18, 097일차 - 포토샵 복습 인강 - 시각디자인 인강 - 조과제: 프로세서 페이지 코딩 - [내 임시 블로그](https://codepen.io/sbyeony/pen/ExmmYdO) # 2021-07-19, 098일차 - 토스트UI 에디터 코드펜 embed 하기 - 코드펜 Embed의 Iframe - src="~" 링크 주소를 에디터에 codepen으로 임베드 - 코드펜 임배드 높이 설정 &height=400 - 토스트UI 에디터에 자바스크립트 콘솔 보이는 코드펜 embed 템플릿 [링크](https://to2.kr/bXA) # 2021-07-20, 099일차 - 토스트UI 에디터 블로그에 php 예시 embed 하기 - replit.com [링크](https://replit.com/~) 사이트 - php 내용 입력한 주소로 임배드 - 임배드 높이 설정 ?height=800#index.php # 2021-07-21, 100일차 ## php - 준비 - 폴더 생성 후 우클릭 vscode 열기 - vscode에서 docs 폴서 생성하기 - ctrl+backtick으로 cmd 창 열기 - php 창 열기: php -S localhost:8021 -t ./docs - 파일 - 프로젝트/docs/index.php - 프로젝트/docs/sub1.php - 프로젝트/docs/head.php - 프로젝트/docs/foot.php - requrie_once - index.php 에서 ```

메인1

``` # 2021-07-22, 101일차 ## php ### php - head 설정하기 - head.php ``` ``` pageCode가 home이면 title에 홈을 출력한다 pageCode가 sub1이면 title에 서브1을 출력한다 - index.php ``` ``` index.php의 pageCode가 home이다 -> head.php 실행 (title 출력) - GITHUB PAGE로 퍼블리싱 방법, 주의사항 - 이미지 불러오는데 느릴 때가 있음: 이미지 불러오는 방법 (to2.kr/cVY) - https://rawcdn.githack.com/[깃허브아이디]/[깃허브리포지터리]/master/[경로] - 경로 쓰는법: docs/~/img.png # 2021-07-23, 102일차 ## php ### php 공통 네비게이션 현재 페이지 표시 - head.php ``` <?=$title?>

홈 서브1

``` 순서대로 실행되기 때문에 순서가 중요하다! 1. 타이틀 이후 스타일 입력: 클래스 acitve의 color는 red임 2. php 변수 설정 $nav~는 "" 이다 (공백) 3. pageCode가 home이면 $nav~home은 active이다. 4. a의 class는 pageCode에 따라 $nav~의 설정으로 출력된다. # 2021-07-24, 103일차 - 타슈 어플 리디자인 프로세서 페이지 개인 작업 (50%) - php 복습 # 2021-07-25, 104일차 - 타슈 어플 리디자인 프로세서 페이지 개인 작업 (60%) - php 복습 # 2021-07-26, 105일차 ## php ``` ``` a가 b이다 -> 참이면 c 실행, 거짓이면 d 실행
- 타슈 어플 리디자인 프로세서 페이지 개인 작업 (8-90%) # 2021-07-27, 106일차 ## php - php 서버는 거의 유료이기 때문에 github 사용할 것, github는 php 지원하지 않기 때문에 방법이 필요함 - SSG - static site generator - php 웹을 html로 변환하기 위해 사용 - [링크](https://github.com/jhs512/php_simple_ssg) 의 파일 받아서 사용한다. - html로 변환해야 하는 파일에 .ssg. 붙이기! - 터미널에서 명령어(php cmd.php) 입력하면(컴파일하기) .ssg. -> docs에 html로 저장된다.
- 타슈 어플 리디자인 프로세서 페이지 개인 작업 (100%) # 2021-07-28, 107일차 ## php #### 현재시각표시 - php는 새로고침 시 매번 새 html을 만들어내기 때문에(동적) 현재시각을 실시간으로 출력할 수 있다. ``` ```
#### 심리테스트 - 편지지의 선택 값에 따라 출력되는 것 사용 ``` index.php ``` - 설명 - form: 편지지 action: 받는사람 - form에서 button을 누르면 result.php로 페이지 이동이 일어난다. - '1번 선택' 선택시 주소 /result.php?sel(name)=1(value) 로 이동 ``` result.php

1번 결과

``` - 설명 - 변수 sel 이 '?sel=~'의 값을 가진다 - 1번 결과의 div를 php로 감싼 것 - sel == 1 이 참이면 {~} 내용 출력
#### 50% 확률로 당첨 ``` ``` - 설명 - echo time: ~부터의 초(sec). - 변수 n은 초를 2로 나눈 나머지 값이다. -> 0(짝수 나눈 값의 나머지) or 1(홀수 나눈 값의 나머지) - 변수 n의 참, 거짓 따라 출력이 달라지는 것.
``` 꽝 당첨 ``` - 설명 - php 문법 부분만 감싸주는 방법
``` ``` - 설명 - 3항 연산자 읽기 - $n==1이 참이면 왼쪽, 거짓이면 오른쪽
#### 내비 아이템 복습 ``` ``` - 설명 - index.php?pageCode=a1 - a 태그 링크에 index.php?pageCode=~ 로 pageCode 값을 각각 부여했다 - 최상단: $pageCode는 주소의 pageCode의 값을 가져온다 - 메뉴1 클릭 시 index.php?pageCode=a1의 주소로 이동 $pageCode의 값이 a1이 되는것임. - a의 class는 설정한 $pageCode 값의 참, 거짓으로 active가 출력되도록 했다. (3항 연산자)
- 타슈 어플 리디자인 프로세서 페이지 코딩 시작 # 2021-07-29, 108일차 - [어플리디자인웹1차완성](https://seoyoenkk68.github.io/pf_tashu/) - [fullpages 연습](https://codepen.io/sbyeony/pen/GRmxGyq) - Masonry & 로딩화면 구현하기 - [masonry jq binding](https://masonry.desandro.com/events.html) - [연습 코드펜](https://codepen.io/sbyeony/pen/xxdzBBG) - [로딩시간차](https://codepen.io/sbyeony/pen/XWRYQVd) - setTimeout(funtion() {}, 5000) - [로딩화면 만들기-무작정 5초 기다리기](https://codepen.io/sbyeony/pen/YzVvMva) - [font-awesome Animating Icons](https://fontawesome.com/v5.15/how-to-use/on-the-web/styling/animating-icons) - [로딩 정식 방법](https://codepen.io/sbyeony/pen/YzVvbKO) - jquery.imagesloaded 불러오기 - 불러오는 위치: jq 아래, masonry 위 # 2021-07-30, 109일차 ## CSS 애니메이션 - [연습링크](https://codepen.io/sbyeony/pen/OJmZXBw) - [w3schools CSS](https://www.w3schools.com/css/css3_animations.asp) - animation 적용할 요소 - animation-duration: 애니메이션이 작동되는 시간 - animation-iteration-count - animation-fill-mode: 애니메이션 - animation-play-state - @keyframes ~ {0% {~} 50% {~} 100%{~}} ## GSAP, 스크롤트리거 - 스크롤트리거 치트시트 [링크](https://greensock.com/cheatsheet/) - rangeFixedV1 - [불러오기](https://codepen.io/sbyeony/pen/jOmKoow) - [연습링크](https://codepen.io/sbyeony/pen/VwbdJMv) - image의 부모 div에 flex-shrink-0 넣는 것 주의하기 # 2021-07-31, 110일차 - 시각디자인 인강 / 타이포그래피-조판~ # 2021-08-01, 111일차 - 시각디자인 인강 / 타이포그래피-결합,해체,변형~ # 2021-08-02, 112일차 - 최신 테일윈드 기능 활용 [수업페이지 cXf](https://codepen.io/jangka44/live/GRmGBLM) - 테일윈드 치트시트에 없는 라이브러리를 사용하고 싶을 때(용량문제) - tailwind just-in-time(jit) [불러오기](https://codepen.io/sbyeony/pen/VwbdOJo) - 사용법 [연습링크](https://codepen.io/sbyeony/pen/poPKXop) - '테일윈드 치트시트 단축어'-[~] - w-[134px] ## GSAP, 스크롤트리거 - 주의사항 - image에 div 부모 있어야 함 # 2021-08-03, 113일차 ## rangeFixed - [18강~20강 테스트](https://codepen.io/sbyeony/pen/RwVBjKW) ## fullpage - [스크롤바 보이기](https://codepen.io/sbyeony/pen/MWmBOLz) - scrollBar: true - [anchors](https://codepen.io/sbyeony/pen/bGWjYZL) - anchors: ['section1', 'section2', 'section3'] - 섹션에 주소 저장 # 2021-08-04, 114일차 ## 웹디자인기능사 - 팝업 [연습링크](https://codepen.io/sbyeony/pen/poPQwJg) - onclick="$('.popup-1').show();" - onclick="$('.popup-1').hide();" - .hide(); or .css('display', 'none'); - 탭메뉴 [연습링크](https://codepen.io/sbyeony/pen/eYWQRZg) - 버튼과 내용 일치하게 태그 명 주기 - onclick="$('.tab-box-1__itme').removeClass('active'); $('.tab-box-1__itme-1').addClass('active')" - 슬라이더 - 페이드 [연습링크](https://codepen.io/sbyeony/pen/LYyXLOB?editors=1111) - setInterval(function() {}, 5000); - ++i: i를 1 증가, ++i 도 바로 1 증가 - i++: i를 1 증가, i++ 바로 증가x - 좌우이동 [연습링크](https://codepen.io/sbyeony/pen/WNjYEPJ) - slider에 width 값 고정(100%) - margin-left: -100%;로 이동 - 상하이동 [연습링크](https://codepen.io/sbyeony/pen/YzVRrWV) - height 값 고정 - margin-top 픽셀로 움직이기
- [타슈 리디자인 프로세스 웹 수정](https://seoyoenkk68.github.io/tashu_redesign/) - 인트로 페이지 한 화면에 나오게 수정하기 위아래 잘림 없이. # 2021-08-05, 115일차 ## rangeFixedV2 - 이미지 특정 구간에서 바뀌는 것 - [정답 링크](https://codepen.io/sbyeony/pen/QWvXKBX) # 2021-08-06, 116일차 ## 캐시, F5, ctrl+shift+R - 웹서버 - 프로토콜(https), 도메인, 포트(:443 생략) - localhost, 127.0.0.1 내 컴퓨터 - URL에 해당하는 것을 주는 사람 ## imagesLoaded - [불러오기]() - 해당하는 이미지가 로딩 되어야 함수가 실행된다. - 제이쿼리 불러오기 -> images loaded 불러오기 순서 ## niceScroll - [불러오기]() - 1920px 맞춰야 할때 스크롤 처리하기 - 제이쿼리 불러오기 -> nice scroll 불러오기 순서 - PC 사이트만 - 반응형 사이트에 적용할 때 - 요호이 - 줄바꿈안하고 스크롤 오토 일 때 스크롤바에도 적용 - 요호이 ## web gradeints - [웹 그라디언트 링크]() --- ### 포폴 fullpage 적용하기 - [fullpage site](https://github.com/alvarotrigo/fullPage.js/tree/master/lang/korean#옵션) - 옵션 > 찾기로 원하는 기능 찾기 - js - anchors: ['hero', 'overView', 'readMore', 'profile'], - responsiveWidth:600, : 반응형 600이상에서만 된다 - afterResponsive: function(isResponsive){alert("Is responsive:" + isResponsive);} : 반응형 적용됐을 때 알람 - html - class="fp-auto-height" : 자동 높이 조절 - class="fp-auto-height-responsive" : 반응형일 때만 높이를 자동으로 조절 한다. - 추가 플러그인 - [링크](https://codepen.io/sbyeony/pen/VwWvvGQ) scrollOverflow:true, : 자동 높이 조절 + 화면에 넘치는 내용물 사용할 때