$$config title: 22.08.06, 웹4, slog.gg/p/9364 keywords: - F강의장 - 12:00 - 15:00 $$ ## 개요 - 개강: 2022년 08월 06일 - 페이지: slog.gg/p/9364 - 디스코드 주소 : [https://discord.gg/3sFdQjVm](https://discord.gg/3sFdQjVm)
## 강사정보 - 강사: 김혜지 - 연락처: 010-4372-1301
## 수업안내 - 수업 시작: 12:00 ~ - 쉬는시간1: 12:50 ~ 13:00 - 쉬는시간2: 13:50 ~ 14:00 - 수업 종료: 14:50
## 관련주소 - 새 펜 열기 : [codepen.io/pen](https://codepen.io/pen) - 폰트어썸 : [to2.kr/dPB](https://to2.kr/dPB) - 주소 줄이기: [to2.kr](https://to2.kr/) - cdnjs : [cdnjs.com](https://cdnjs.com/) - 이미지 호스팅 : [postimages.org](https://postimages.org/) - 노트폴리오 : [바로가기](https://notefolio.net/?type=pick&term=all&keywords=F7) - Unsplash : [바로가기](https://unsplash.com/) - 픽사베이 : : [바로가기](https://pixabay.com/ko/)
## 유용한 팁 - VS코드 설치 : [바로가기](https://slog.gg/p/810) - VS코드 안열릴때 : [바로가기](https://slog.gg/p/398) - 없어지지않는 부분모작 이미지 : [바로가기](https://slog.gg/p/83) - Tailwind 사용시 font 적용법 : [바로가기](https://slog.gg/p/538)
# 포트폴리오 기획 ## 기획 - 디자인 - 구현 ![원본이미지](https://i.postimg.cc/gcVbprJK/1.jpg) ![원본이미지](https://i.postimg.cc/VLwLWzXv/image-1.jpg) ![원본이미지](https://i.postimg.cc/858VkbHc/image-2.jpg)
## 1강 : 포트폴리오 종류 - Q&A - 나의 작품과, 소개를 담은 사이트 → 자기소개 개인사이트 - 나의 디자인 실력을 보여줄 수 있는 작품 - 웹사이트 리디자인 - 모바일 앱 디자인 - 포스터, 아이콘, 배너 디자인
## 2강 : 포트폴리오 제작 과정 - 1단계 → 리디자인 사이트 지정 - 2단계 → 기획(프로세스 페이지와 이어짐) - 3단계 → 리디자인 페이지 디자인 - 4단계 → 프로세스 페이지 디자인 - 5단계 → 리디자인 페이지 구현 - 6단계 → 프로세스 페이지 구현
## 3강 : 포트폴리오 제작 1단계 - 사이트 지정 - 브랜드를 만들지않고 리디자인 하는 이유 → 친근하고, 비교대상이 확실하기 때문
## 4강 : 포트폴리오 제작 2단계 - 조사 및 기획 - 노트폴리오 포트폴리오 : [바로가기](https://notefolio.net/) - sbs아카데미 포트폴리오 : [바로가기](https://sbsart.com/portfolio/portfolio.asp?selMater=web)
- 웹 리디자인 기획 예시 - 논픽션 : [바로가기](https://notefolio.net/kimsungnyeom/309884) - 브로콜리너마저 : [바로가기](https://notefolio.net/a_quiet_room/310859) - 무신사 스토어 : [바로가기](https://notefolio.net/designrange/168167) - HP : [바로가기](https://notefolio.net/kwontaeuk/62452)
- 앱 리디자인 기획 예시 - WASH & PAY : [바로가기](https://notefolio.net/Designerkang/311799) - STOREY : [바로가기](https://notefolio.net/duestarlight/242416) - 마인드카페 : [바로가기](https://notefolio.net/rinazoa/300305) - 네이버날씨 : [바로가기](https://notefolio.net/seulgi94/295584)
- 예시 - 제목 - 작업기간 - 기여도 - 사용툴 - 리디자인 스토리 - 프로젝트 목표 - 프로토타입 - 와이어 프레임 - 사용컬러,사용폰트 - 특징
# 피그마 ## 5강 : 피그마 단축키 - 프레임 F - 파일열기 ctrl + shift + K - 줄자 shift + R - 도형 R - 그룹 ctrl + G - 그룹해제 ctrl + shift + G - 펜툴 P - 원 O - 스포이드 I
## 6강 : Clip content - 프레임 안에 요소를 넣었을때 프레임밖으로 요소가 나온다면? ![원본이미지](https://i.postimg.cc/wjZcbMkh/image-1.jpg) - 프레임을 클릭 후 Desing 패널에서 Clip content 체크해주세요. ![원본이미지](https://i.postimg.cc/HLM4GmSF/image-2.jpg)
## 7강 : Auto Components - Auto Components란? - Rectangle 안에 들어가있는 요소에 따라서 Rectangle과 요소 간격이 자동으로 바뀌는 것을 말합니다. - (*도형 ex 동그라미, 네모 등 ) - 특징이 있나요? - Rectangle 크기가 같아야 할때는 사용하지 않는것이 좋아요. - 어떤 상황에 사용되나요? - 같은 디자인을 사용하지만 텍스트와 아이콘이 조금씩 바뀔때 사용하면 좋아요. - 어떻게 만드나요? ![원본이미지](https://i.postimg.cc/rF20DWw0/Frame-7.jpg)
## 8강 : outline stroke - outline stroke란? - 글자깨기와 비슷한 기능입니다. - 어떤 상황에 사용되나요? - 텍스트가 들어간 디자인에 사이즈를 줄여야할때 사용합니다. ex) 프로세스 페이지 제작 - 어떻게 만드나요? - 단축키 Ctrl + Shift + O - 요소 우클릭 → outline stroke 클릭 - 예시 ![원본이미지](https://i.postimg.cc/SRpfRTKT/Frame-1.jpg)
# 그리드 ## 9강 : 그리드 ### 그리드 사이트 : [stacounter 이동하기](https://gs.statcounter.com/) - stacounter 이용방법 및 그리드 사이즈 확인하기 : [글 이동하기](https://slog.gg/p/9788) ### 피그마 그리드 제작 방법 [글 이동하기](https://slog.gg/p/9789) - 아이콘 클릭으로 간단하게 그리드 생성하기 ### 그리드 기초 - 그리드 용어 - Gutter : 여백 - Margin : 양 옆 공간 - Column : 거터와 마진을 제외한 공간 - Columns : Column 수 - 모바일 - 대표 사이즈: 360 - 가로 사이즈 : 0~599px - 세로 사이즈 : 유동적 - Column : 4 - Gutter : 8 - Margin : 16 - 작은 태블릿 - 대표 사이즈 : 768 - 가로 사이즈 : 600px ~ 1023px - 세로 사이즈 : 유동적 - Column : 8 - Gutter : 16 - Margin : 24 - 큰 태블릿 : 1024 - 가로 사이즈 : 1024px ~1439px - 세로 사이즈 : 유동적 - Column : 12 - Gutter : 20 or 30 or 40 - Margin : 10 or 15 or 20 - PC : 1440px - 대표 사이즈 : 1920px - 가로 사이즈 : 1440px ~ 1920px - Column : 12 - Gutter : 40 - Margin : 20
# Tip ## 10강 : 사이트 전체 캡쳐 - F12 → Ctril + Shift + P → cap → Capture node screenshot - 주의 : F12키 버튼 누른 후 마우스 사용x cap창이 닫힙니다. - 예시 ![원본이미지](https://i.postimg.cc/MG68Y1m3/Group-3.jpg) - 결과 ![원본이미지](https://i.postimg.cc/J4jn6cjR/www-naver-com.png)
# 쉽게 잊어버리는 html, css ## 11강 : inline-block 여백 - 문제 : [넓이 조절 없이 p태그가 한줄에 보이도록 해주세요.](https://codepen.io/kimhyeji324/pen/MWVLeNd?editors=1100) - 정답 : [확인](https://codepen.io/kimhyeji324/pen/eYMxdNO?editors=1100) - 원인 → inline-block은 기본적으로 여백이 같이 생긴다 - 해결 → body 또는 inline-bliock 부모 엘리먼트에 font-size:0; 적용 후 요소가 존재해야 하는 선택자에 다시 font-size 적용 - 개념 → [웹1 inline-block 여백](https://codepen.io/kimhyeji324/pen/MWVLjyN)
## 12강 : inline-block 레이아웃 망가짐 - 문제 : [상단이 기준이 되도록 봐꿔주세요.](https://codepen.io/kimhyeji324/pen/wvmNzyN?editors=1100) - 정답 : [확인](https://codepen.io/kimhyeji324/pen/dymapjJ?editors=1100) - 개념 : [웹1 vertical-align](https://codepen.io/kimhyeji324/pen/qBogqBx?editors=1100) - 개념 : [vertical-align 기본 속성 기준](https://codepen.io/kimhyeji324/pen/xxWMzpj?editors=1100) - 개념 : [텍스트 중앙정렬 안되는 이유](https://codepen.io/kimhyeji324/pen/oNqmQgR?editors=1100)
## 13강 : p태그 - 교재 : 55p - 문제 : [위 div와 같이 상하여백을 지워주세요.](https://codepen.io/kimhyeji324/pen/MWVLjKN?editors=1100) - 정답 : [확인](https://codepen.io/kimhyeji324/pen/wvmNzyN?editors=1100) - 개념 : [웹1 p태그](https://codepen.io/kimhyeji324/pen/KKoJgvj?editors=1010)
## 14강 : 그리드로 간단하게 퍼블리싱하기 - 1320그리드 / 40 / 20 - 1단계 : [그리드](https://codepen.io/kimhyeji324/pen/jOzdRej?editors=1100) - 2단계 : [이미지 추가](https://codepen.io/kimhyeji324/pen/QWmYRRd?editors=1100) - [이미지 추가 YouTube 이동](https://youtu.be/qXjQv4e-lM8) - 3단계 : [배경 이미지 추가](https://codepen.io/kimhyeji324/pen/PoRVrZN?editors=1100) - 4단계 : [텍스트 추가](https://codepen.io/kimhyeji324/pen/bGvzXpK?editors=1100)
# 구현 ## 마켓컬리 네비바 단계별 코드 - 마켓컬리 : [이동](https://www.kurly.com/main)
### 15강 : 1080px 그리드 잡기 1단계 - 문제 : [아래 이미지처럼 코드를 짜주세요.](https://codepen.io/kimhyeji324/pen/VwXOdJx?editors=1000) ![원본이미지](https://i.postimg.cc/g2g67hsH/1.jpg) - 정답 : [확인](https://codepen.io/kimhyeji324/pen/xxWNzNr?editors=1100)
### 16강 : 1080px 그리드 잡기 2단계 - 문제 : [아래 이미지처럼 코드를 짜주세요.](https://codepen.io/kimhyeji324/pen/LYdoBVQ) ![원본이미지](https://i.postimg.cc/qMtYqchz/2.jpg) - 정답 : [확인](https://codepen.io/kimhyeji324/pen/abYrjzy)
### 17강 : 520px 안에서 그리드 잡기 - 문제 : [아래 이미지처럼 코드를 짜주세요. border제외](https://codepen.io/kimhyeji324/pen/abYrjzy) ![원본이미지](https://i.postimg.cc/KcMzSPn2/3.jpg) - 1단계 정답 : [width: 130px, span태그](https://codepen.io/kimhyeji324/pen/xxWNMvr?editors=1100) - 2단계 정답 : [inline-block](https://codepen.io/kimhyeji324/pen/mdxYobz) - 3단계 정답 : [border](https://codepen.io/kimhyeji324/pen/RwMmdNY) - 4단계 정답 : [inline-block 여백](https://codepen.io/kimhyeji324/pen/yLKWwYO) - 5단계 정답 : [span태그](https://codepen.io/kimhyeji324/pen/bGvyZVX) - 6단계 정답 : [border제거](https://codepen.io/kimhyeji324/pen/RwMmdre)
### 18강 : 디테일 커스텀1 - 문제 : [아래 이미지처럼 코드를 짜주세요. border제외](https://codepen.io/kimhyeji324/pen/RwMmdre) ![원본이미지](https://i.postimg.cc/HkBW4BCQ/4.jpg) - 1단계 정답 : [html 텍스트 수정](https://codepen.io/kimhyeji324/pen/OJvYqrV?editors=1100) - 2단계 정답 : [text-align: center](https://codepen.io/kimhyeji324/pen/YzabgMb?editors=1100) - 3단계 정답 : [text-align: right](https://codepen.io/kimhyeji324/pen/QWmRoXp?editors=1100)
### 19강 : 디테일 커스텀2 - 문제 : [아래 이미지처럼 코드를 짜주세요. border제외](https://codepen.io/kimhyeji324/pen/QWmRoXp?editors=1100) ![원본이미지](https://i.postimg.cc/nr4ps1k9/5.jpg) - 1단계 : [배송안내 배경색과 공간생성](https://codepen.io/kimhyeji324/pen/MWVdRmG?editors=1100) - 2단계 : [inline-block](https://codepen.io/kimhyeji324/pen/qBoGwjz) - 3단계 : [padding](https://codepen.io/kimhyeji324/pen/KKoLYvQ?editors=1100) - 4단계 : [border-radius](https://codepen.io/kimhyeji324/pen/YzabMYy) - 5단계 : [margin](https://codepen.io/kimhyeji324/pen/MWVdRrB)
### 20강 : 디테일 커스텀3 - 문제 : [아래 이미지처럼 코드를 짜주세요. border제외](https://codepen.io/kimhyeji324/pen/MWVdRrB) ![원본이미지](https://i.postimg.cc/Cx1pY0Wq/6.jpg) - 1단계 : [border 테두리 생성](https://codepen.io/kimhyeji324/pen/ExEzJQJ?editors=1100) - 2단계 : [background-color와 border제거](https://codepen.io/kimhyeji324/pen/wvmbZmq?editors=1100)
### 21강 : 디테일 커스텀4(응용) - 문제 : [아래 이미지처럼 코드를 짜주세요. border제외](https://codepen.io/kimhyeji324/pen/wvmbZmq?editors=1100) ![원본이미지](https://i.postimg.cc/5tyLWs53/7.jpg) - 3단계 : [html 텍스트 분리](https://codepen.io/kimhyeji324/pen/PoRvgep) - 4단계 : [html a태그](https://codepen.io/kimhyeji324/pen/qBoGwKW?editors=1010) - 5단계 : [span에 되어있는 커스텀을 a로 이동](https://codepen.io/kimhyeji324/pen/OJvYGEm?editors=1100) - 6단계 : [inline-block](https://codepen.io/kimhyeji324/pen/gOeJydm?editors=1100) - 7단계 : [a가 포함된 span에 개별 커스텀](https://codepen.io/kimhyeji324/pen/RwMmOvo?editors=1100) - 8단계 : [좌우 padding a로 이동](https://codepen.io/kimhyeji324/pen/rNdgbRb) - 9단계 : [a노말라이즈](https://codepen.io/kimhyeji324/pen/zYWQXXV) - 10단계 : [html class적용](https://codepen.io/kimhyeji324/pen/MWVdRdZ?editors=1100) - 11단계 : [텍스트 디테일 커스텀](https://codepen.io/kimhyeji324/pen/vYRwMog?editors=1100)
# 스와이퍼 ## 22강 : 스와이퍼 불러오기 - 공식사이트 : [바로가기](https://swiperjs.com/) - 스와이퍼 라이브러리 불러오기 : [바로가기](https://swiperjs.com/get-started) - 스와이퍼 기본 설정 : [codepen 열기](https://codepen.io/kimhyeji324/pen/jOzogwa?editors=1010)
## 23강 : 스와이퍼 기본 디자인 시작 - 개념 : [열기](https://codepen.io/kimhyeji324/pen/RwMmXoP?editors=1010) - 자바스크립트를 기본 상태로 돌릴경우 마우스를 사용하여 직접 슬라이더를 사용 해야한다.
## 24강 : 스와이퍼 배경색 바꾸기 - 개념 : [열기](https://codepen.io/kimhyeji324/pen/PoRvMRW)
## 25강 : min-hight와 hight - 개념 : [열기](https://codepen.io/kimhyeji324/pen/xxWNvYN?editors=1100)
## 26강 : 스와이퍼 화면 높이만큼 채우기 - 개념 : [열기](https://codepen.io/kimhyeji324/pen/GRxaVdN?editors=1100)
## 27강 : 스와이퍼 레이아웃 불러오기 - 개념 : [열기](https://codepen.io/kimhyeji324/pen/MWVdNPP) - 관련 사이트 : [바로가기](https://swiperjs.com/demos) - 1단계 : 원하는 레이아웃 선택 - 2단계 : Open in new window 클릭 - 3단계 : ctrl + u - 4단계 : 자바스크립트 복사 붙여넣기
## 28강 : 스와이퍼 반복 여부 - 개념 : [열기](https://codepen.io/kimhyeji324/pen/LYdowMV?editors=1010)
## 29강 : 좌우 이동버튼 불러오기 - 개념 : [열기](https://codepen.io/kimhyeji324/pen/zYWQgbV?editors=1010) - 관련 사이트 : [바로가기](https://swiperjs.com/demos) - 1단계 : 원하는 레이아웃 선택 - 2단계 : Open in new window 클릭 - 3단계 : ctrl + u - 4단계 : 자바스크립트 복사 붙여넣기
## 30강 : 좌우 이동버튼 하단으로 옮기기 - 개념 : [열기](https://codepen.io/kimhyeji324/pen/XWELrNW?editors=1100)
## 31강 : 보고있는 페이지를 나타내주는 아이콘 - 개념 : [열기](https://codepen.io/kimhyeji324/pen/XWELrNW?editors=1000)
## 32강 : 스와이퍼 자동재생 - 개념 : [열기](https://codepen.io/kimhyeji324/pen/abYgoBv)
## 33강 : 스와이퍼 배너에 적용 - 개념 : [열기](https://codepen.io/kimhyeji324/pen/RwMzbYM?editors=1000)
# 스크롤 트리거 ## 34강 : 스크롤 트리거 테스트 환경 - 개념 : [열기](https://codepen.io/kimhyeji324/pen/eYMwvOy?editors=1100)
## 35강 : gsap to를 사용해서 박스를 우측으로 이동하는 애니메이션 - 개념 : [열기](https://codepen.io/kimhyeji324/pen/bGvPqdw)
## 36강 : gsap from을 사용해서 박스를 우측하단에서 원래 위치로 - 개념 : [열기](https://codepen.io/kimhyeji324/pen/qBozrOL)
## 37강 : 스크롤을 내렸을때 애니메이션이 작동하도록 - 개념 : [스크롤 내렸을때](https://codepen.io/kimhyeji324/pen/yLKdMXv) - 개념 : [markers표시](https://codepen.io/kimhyeji324/pen/PoRrpKz) - 개념 : [markers 커스텀](https://codepen.io/kimhyeji324/pen/VwXJbEM) - 개념 : [스크롤 트리거 요소가 시작점을 만났을때 애니메이션 요소가 움직인다.](https://codepen.io/kimhyeji324/pen/eYMwWQN) - 개념 : [strat 앞부분을 수정했을때](https://codepen.io/kimhyeji324/pen/NWYZjEo) - 개념 : [스크롤이 새로 시작될때마다 스크롤트리거 반복](https://codepen.io/kimhyeji324/pen/xxWodmR)
## 38강 : 스크롤 트리거 치트시트 - [열기](https://greensock.com/cheatsheet/)
## 39강 : 스크롤 트리거 적용 - 예제 : [열기](https://codepen.io/kimhyeji324/pen/NWYZjmJ?editors=1010)
# full page ## 40강 : full fage 이용방법 - 개념 : [열기](https://codepen.io/kimhyeji324/pen/GRxbmbB?editors=1010)