yamoo9 / fdc Goto Github PK

프론트엔드 디자인 CAMP, 5기 종료

design design-theory grid-system typography vertical-rhythm html5 css3 rwd responsive-design

fdc's Introduction

FastCampus

Front-End Design CAMP

본 과정에서는 GOOD DESIGN 방법론을 기반으로 하여 모던 웹 사이트를 제작해봅니다. 디자인 이론에 충실한 실전 방법론을 통해 설득력있고 논리적인 웹 사이트를 디자인한 후, 프론트엔드 웹 언어(HTML/CSS)로 구성된 페이지를 만들어가는 과정을 공부하게 됩니다. 디자인부터 제작까지 단언컨데 매우 흥미로운 여정이 될 것입니다!

디자이너의, 디자이너를 위한, 디자이너에 의한

디자인 발상, 기획, 그리고 기획서에 표현된 디자인을 직접 코드로 구현하기 위해 어떤 지식이 필요한지 전적으로 디자이너의 입장에서 전달합니다. 디자이너 출신의 프론트엔드 개발자 야무님의 알토란 같은 노하우를 모조리 가져가세요.

포트폴리오, 결과물이 나올 수밖에 없는 실습위주 강의

하나의 웹 페이지가 제작되기까지 전 과정을 커리큘럼에 그대로 녹여냈습니다. 웹디자인 방법론(타이포그래피, 그리드시스템, 황금분할)에서 시작하여 PSD디자인 시안을 HTML/CSS 웹사이트로 제작하는 실습까지 10주간 진행합니다. 11,12주차는 포트폴리오 제작에 집중하여 전 수강생이 퀄리티 높은 결과물을 가져갈 수 있도록 밀착 지도해드립니다.

GOOD DESIGN 방법론
타이포그래피×모듈러 스케일×버티컬 리듬×그리드 시스템×황금 비율

Pre Survey

과정 시작 전, 사전 조사

Agenda

1. 웹 디자인 워크플로우 살펴보기

웹디자인에 최적화된 환경설정
원활한 업무 협업을 위한 역할 프로세스 이해
웹 표준/접근성을 준수한 마크업/스타일링
비주얼 디자인을 넘어 상태 디자인 구현

2. 웹 타이포그래피, 그래픽 데이터, HTML/CSS 구조 & 스타일링

웹 타이포그래피 기초/응용
타이포그래피 웹 브라우저 기본 설정
HTML 구조화, 의미를 부여하는 바른 마크업
CSS 스타일링. 컴팩트한 스타일 적용

3. 웹 타이포그래피, 그래픽 데이터, HTML/CSS 구조 & 스타일링

Headings, Paragraph, Lists, Tables, Forms 등 구성요소 별 UI Kit 제작
고정 단위(px)와 상대 단위(em, rem, %, vw, vh)의 상황 별 적절한 활용
Vertical Rhythm 구현 (공식 활용)

4. CSS 박스모델과 레이아웃(FLOAT, POSITION, FLEX)

박스모델 이해 및 레이아웃 별 구현 실습

Box-Model
Float
Clearfix
Position
Flex

5. 웹 그리드 시스템

그리드 시스템 구조 이해

Container
Row
Column
Gutter
Module
그리드 시스템 그리는 방법 (with Photoshop)

6. CSS 그리드 시스템 모듈

재사용 가능한 CSS 그리드 시스템 모듈 구현

.container 모듈
.row 모듈
.col 모듈
.push, .pull 모듈
.prefix, .suffix 모듈
.clearfix 모듈

7. HTML5/CSS3 애니메이션 배너 디자인

CSS3 애니메이션 모듈

transition
animation
@keframes 활용

8. 반응형 웹 (RWD)

반응형 웹 디자인 레이아웃 대응 그리드 시스템
고해상도 디스플레이/반응형 웹 이미지 대응 방법
모바일 퍼스트
단계적 기능 향상
Adapt Web 구현

9. 와이어프레임

콘텐츠 선정
중단점 설계
타이포그래피 / 그리드 시스템 구축
와이어프레임 제작 (PSD)

10. 포트폴리오

비주얼 목업 제작
HTML/CSS 마크업, 스타일링
View 파트에 따른 반응형 대응 처리
크로스 브라우징 테스트
Git Page에 빌드 / 배포

Front-End Design CAMP, FastCampus / yamoo9.net

fdc's People

Contributors

Stargazers

Watchers

Forkers

cmjwh rickyjeon smtlkbs seuli23 betterthan9 kormim76 soojeekim jeunhee jeonginyoung mlee9179 kimkijoong verybusystudio sparkk87 tatoruz i9930 biaen shinsu91 yoon-joung starseeker38 softcamp2017 yumins allison14 coconutnk kyuree roscoe11 hw0507 pooah marojay sonyule kookoo9 iray75 mjm4sky iamwouldyou dev-piperchapman verybusyboy kangjina jistudio youngjoo1127 jslee0728 eyeray ihyen haha7 physiohan minhi981 kkwakja feanar729 eunsollee hahayuni gaayounglee baezino superluckhee makershin amal022 cepien hsootree watch1out4you lioliolio lukapark

fdc's Issues

Frontend 4기 김현정 10일차 Poster 과제 제출

<작업물>
https://roscoe11.github.io/DAY10/homework-day10/homework-day10.html

<원본이미지>
https://roscoe11.github.io/DAY10/images/little_miss_sunshine-784110764-large.jpg

애니메이션은 추후에..죄송합니다..ㅠ ㅠ 일이랑 같이 하려니 힘드네요..
작업물 타이틀 부분을 언더라인에 맞추고 싶은데 어떻게 해야할까요?ㅠㅠ

선생님 수업 외 질문이 있는데요

안녕하세요 김예진입니다
지금 프론트엔드 4기 수업을 듣고 있는데요
프론트엔드/프론트엔드 개발 스쿨의 차이가 궁굼합니다
자바스크립트랑 제이커리 부분을 더 깊이배우는 건가요~?

FrontEnd DAY_08 과제(김예진)

안녕하세요 김예진입니다.
8강 과제 올립니다.
확인부탁드립니다

과제를 수행하는 중에 궁굼 한 것이 있어 질문 드립니다.
참고사이트의 상단 gnb 영역을 보시면 FASHION/BEAUTY/LIVING 부분이 서로 가까운데
각 클래스에 마진 값을 주어서 임의로 영역을 붙이려고 하였으나 구현되지 않았습니다.
하위 메뉴랑 같이 통으로 잡혀있기 때문에 그런건지.. 궁굼합니다..

-과제 html 주소
https://tatoruz.github.io/DAY_08_homework/byredo/index.html

-참고사이트 주소
http://beauty.sivillage.com/display/brandAutoCategory?brndHallCd=BEBH001&brndDspCatNo=010000003451&listPagingType=&dspCatNo=010000002007&depth=1&productOrdCd=PP&currentPage=4&perPage=24&chkBrndCds=&chkSizeCds=&chkColorChipNos=&chkAttrCds=&filterOpenYn=&filterOpenGrp=&srchDateTime=&infwPathTp=BR&currentPage=3

감사합니다

질문드립니다.
workspace 설정을 하려고 하는데 알려주신 대로
소스탭에서 cloud 폴더에서 마우스 오른쪽 버튼을 눌러서 add folder to workspace로 만든 다음
액세스 허용을 하면 주황색 폴더가 생긴후, 주황색 폴더의 고칠 파일을 선택후 마우스 오른쪽 버튼을 눌러서 Map to network resouce를 해주면 cloud 폴더가 사라지게 되면 성공이라고 하셨는데, 제 경우에는 여기까지 되는데 막상 파일을 수정을 하면 반영 되지가 않습니다. 노트북에서는 되는데, 회사 컴에서는 반영되지가 않습니다. 다른 설정 방법 있는건지, 하는 방법을 잘못 알고 있는건지 알고 싶습니다.

질문 있습니다!

지금 복습 중인데, ! 치고 tab 해도 아무 반응이 없네요ㅠ
해당 프로그램은 다 설치된 상태입니다.
이유가 뭘까요..

그리고, 저장소를 하나 더 만들어서 복습하고 싶은데, 수업 때 만든 저장소를 삭제하지 않고는 또 만들 수 없나요?
'제이름.github.io'로만 저장소 사용이 가능하다고 하니..

FDC 4th_신수정 과제 제출

[고스트 버튼]
https://shinsu91.github.io/Day7/ghost-button.html

[레이아웃 디자인]
https://shinsu91.github.io/Day8/layout.html

FDC 4th_신수정 과제 제출

원숭이 배너
https://shinsu91.github.io/Day10/banner-assets/banner.html
영화포스터
https://shinsu91.github.io/Day11/poster/poster.html

body에 height: 100vh; 을 기입,
추가적으로 background-repeat: no-repeat; / background-size: cover; 이 소스도 넣어봤는데요,,
이미지가 온전히 보여지지 않습니다,, 소스 확인 부탁드립니다.
상단에 JAKE GYLLENHAAL 문구가 들어갔는데, 적용되지 않습니다,,,ㅠㅠ 소스 확인 부탁드릴게요!
누끼를 딴 인물이 총 13명인데요~
큰사람부터 작은 사람까지 차례대로 딴!딴!딴! 나오게끔 CSS에서 작업 할 수 있나요?

FrontEnd 4기 이혜원 과제 제출

FrontEnd > DAY06 > homework

에 올려놨습니다.

수고하세요~

FrontEnd CAMP 이혜원 DAY07 homework 위치

https://github.com/hw0507/hw0507.github.io/blob/master/FrontEnd/DAY07/homework.zip

과제 했는데.. 제대로 된건지 모르겠네요...
맨날 :hover 만 해봐서....요;;;

선생님 고대비? 관련 질문 있습니다.^^;;

프론트앤드 캠프 4기 수업 들었던 이혜원 입니다.

배경 이미지가 랜덤하게 바뀌면서 텍스트가 잘 보이게 텍스트 색이 자동적으로 변경되게 해야 하는데요;;;
명도 대비 수치값 같은거.... 그런거 아는게 하나도 없어서요....
참고할 사이트나.. 자료.. 뭐 없을까요???

FDC 4기 이혜원 poster 무빙 효과 과제

https://hw0507.github.io/DAY11/poster_moving_hw/poster_moving_hw.html

수고하세요~

과제제출- gridsystem/은정희

https://starseeker38.github.io/DAY-12/images/grid-system-960-cloudlink.jpg

감사합니다.

PSD 업로드

ihyen.github.io/DAY12_HW/Portfolio_work.psd

업로드했습니다! 감사합니다.

FrontEnd 4기 신유민 과제제출

Medical View 과제제출합니다
https://github.com/YuminS/yumins.github.io/tree/master/DAY5/practice

10강 과제 banner

과제 올립니다.
배너

FDC 4기 이혜원 wireframe 과제

수고하세요~

질문드립니다~!

선생님 이번 과제 중
2 번째 과제는 자유롭게 한페이지를 디자인하고 html/css작업하는건가요~?

그리고 css를 따로 분리하지 않고
html내 에서 작성시와 css를 따로 분리했을 때
작성 위치만 다를 뿐
css 작성방식은 모두 같다고 생각하면 되는지 궁금합니다

감사합니다.

프론트엔드 디자인 CAMP 4기 이혜원 과제

https://github.com/hw0507/hw0507.github.io/blob/master/DAY08/float_hw.zip

수고하세요~

김나연

github.com/sensemint89

과제제출_타이포그래피_은정희

치과
https://github.com/starseeker38/starseeker38.github.io/tree/master/DAY_6

2.자유주제(미완성입니다)
https://github.com/starseeker38/starseeker38.github.io/tree/master/study

6주차 과제입니다

비슷하게는 되는데 똑같이 만들기는 정말 어렵네요!
항상 감사합니다 :)

https://iamwouldyou.github.io/IELTS/ielts.html
https://iamwouldyou.github.io/IELTS/IELTS.psd

선생님 확인부탁드립니다.

선생님, 지난번에 YOUYU 작업 했던거 확인해주신다고 했었는데..
지난번에 압축파일을 올려놓고 이슈를 다시 작성하지 않았더라구요.. ;;
https://kyuree.github.io/day14/YOUYU.COM.zip
이게 압축파일 경로구요.

아래올리는건 제가 그 후에 다른 파일로 다시 작업해본건데요..
이게 맞는건지 잘 모르겠어요.. ; 확인부탁드립니다.
(일단 전체적인것만 확인해서 하느라 상태 디자인이나 이런건 작업 안된게 많지만.. 레이아웃 잡는 큰 틀만 좀 봐주세요~~ )
https://kyuree.github.io/happykorea/index.html
https://kyuree.github.io/happykorea/happykorea.zip

그리고 아래것 작업하면서 궁금했던게, 왼쪽 중간쯤에 있는 투표부분인데요.
radio 버튼 부분을 잘 모르겠어요.
(라디오 버튼 디자인을 변경하는 것들은 어떻게 하는건지도 좀 알려주세요. ^^; )

3/9 Position 연습과제

안녕하세요!
과제 링크는 https://iamwouldyou.github.io/03092017/Assignment/assignment.html 입니다.
확인 부탁드립니다.

감사합니다 :)

FDC 4기 김복은 DAY06 실습

Typography

인터파크 예매페이지 내용(width 값 700px)을 바탕으로 설계

FDC 4기 김태연 과제 : 움직임 마무리

원숭이배너 움직임

이전 수업시간에했던 움직임/효과 과제 업로드합니다 :)

디자인 psd 파일입니다.

https://github.com/kyuree/kyuree.github.io/blob/master/Assets/youyu_main.psd

디자인 psd 파일입니다.

이은솔

https://github.com/eunsollee

질문이 있습니다~

1080px이하에서 가운데 로고와 텍스트 이미지를 가로사이즈에 맞게 줄어들게 하고싶어요 (양옆 마진 있게)
어떤 코드를 어디에 써야하나요 ㅠㅠ?
coming soon.zip

FDC 4기 김예진 DAY10 과제

안녕하세요 김예진입니다.
과제 수행하여 올립니다
확인부탁드립니다

과제1:영화포스터
ㄴ노트북에서 확인하실 때 화면에 가득차서 안 나오더라구요!
크롬 환경설정에서 화면을 50%줄여서 봐주세요..

과제2:Banner-assets

여쭤볼게있는데요!
애니메이션 효과를 주었는데 시작점이 박스 밖일 경우 안보이게 가릴 방법이 없을까요~?
감싸고있는 class="banner"에 display:hidden으로 주었는데 적용이 안되어서 여쭤보아요!

박진희 과제

http://oddgallery.cafe24.com/test.html
운영중인 몰에 테스트 페이지 생성하여 제작해보았습니다

질문
: li onclick 으로 링크 연결시 새탭으로 띄울 수 있나요?

FDC 4기 김복은 DAY07 실습

Button Design

안녕하세요.
윈도우에서 css 설계할 때는
버튼의 안쪽 글씨가
'a' Element의 padding 상하값을 같게 주면 버튼 정중앙에 왔는데,
맥에서 보니 수업 때처럼 위치가 중앙보다 위로 올라가게 변하네여..
그래서 맥에서 중앙에 보이도록 padding의 상하값을 다르게 주었습니다.

고맙습니다.

황승희

https://github.com/sxxnghxx

김규리 14일차 과제 - YOUYU.com

https://kyuree.github.io/day14/YOUYU.COM/index.html

지난주 YOUYU 퍼블리싱한 내용입니다.
수업하면서 디자인 작업이 미흡했던 부분 psd 수정해서 작업했습니다.
(상단 필터 부분 레이어 부분, 로그인 레이어 부분, 언니의 팁 캐러쉘은 적용되지 않았습니다. ;;;)

질문1. 제품 리스트에서 좋아요 부분 코딩이 좀 헷갈립니다.
제품 전체를 클릭했을때는 제품리스트로 이동이 되어야하고, 좋아요 (하트 아이콘) 부분을 클릭했을때는 좋아요가 적용되는 식으로 하려고 하는건데..
회사 퍼블리셔분이 작업하신거 보고, 좋아요 부분을 를 사용해서 퍼블리싱 하긴 했는데요.. 이게 맞는건지 잘 모르겠어요.

질문2. 베스트리뷰에 별점 부분 코딩쪽이 제가 원하는 대로 코딩을 할수가 없네요.. ;;
제가 생각하기엔 첫번째 별위로 마우스가 올라오면, 첫번째 별만 색상이 변하고,
두번째 별 위로 마우스 위로 올라가면 첫번째 부터 두번째 별까지 색상이 변해야 하고,
세번째는 세번째별까지 색상이 변하는 식으로 되는게 맞을 것 같은데.. 이런식으로 코딩하려면 어떤식으로 해야하는지 잘 모르겠어요..

네이버 영화 별점 주는 부분 참고..
http://movie.naver.com/movie/bi/mi/point.nhn?code=136872&onlyActualPointYn=Y#pointAfterTab