서희2

47강 ID와 CLASS

    ID: 중복되어서는 안된다. 

    CLASS: 중복이 가능하다. /여러개 사용이 가능하다./붙여쓰는 것은 중복 조건이다.~이면서

48강 문제 1~10 flukeout.github.io/

49강 문제 11~19

50강 border-radius 개념: 모서리를 둥글게 한다.

       cursor:pointer 개념: 커서를 포인터로 변경한다.

51강 슬라이더의 페이지 메뉴 구현, border-radius약간

52강 inherit 개념

       상속된다. 부보를 따라한다.

       color의 default는 black이 아니라 inherit이다.

      *inherit되는 태그 vs inherit되지않는태그

PC 그리드 잡는 법

복잡한 사이트를 잘 정리하는 것

w1920

1440 1320 1080 

1320 보편적으로 많이 사용(ex.신세계)

보통 12컬럼 많이 사용

w1320

1320/ 110*12

110을 한 컬럼으로 / 좌우-20(20_70_20) / 10 90 10, 15 80 15로 해도 됨 자유

2개

1320의 좌우 -20을 제외한 1280을 사용

1280-40=1240/2=600,  사이값 간격 40을 뺌

3개

1280-80/3=400

4개

1280-120=1160/4=290

5개

1280-160/5=224

딱안떨어짐 앞부분에 맞춰서 진행

6개

1280-200/6=180

딱 떨어지는 수치를 찾는건 굉장히 어렵다 

w1440

1440/12=120, 1컬럼(20 80 20) 10 100 10해도 됨

w1080

1080 1컬럼(10 70 10)

1060-20=1040/2=520

1060-40/3=340

벤치마킹은 좋은 방법이다.
벤치마킹 자료로 핀터레스트, 실제 운영되는 사이트 추천한다.
디자인컨셉이나 레이아웃을 캡쳐본으로 구성해 전체적인 느낌을 잡아 본다.
(캡쳐본으로 레이아웃 짜집기) 느낌(운율감 등)을 찾아 작업을 진행해 본다.
이런 방법으로 지속적으로 훈련해야 한다.

- 39강 개념 nth-child 
  - first-child,nth-child(2),--nth-last-child(2),last-child.
  -& shift+7
- 40강 문제풀이 - nth-child 이용하여 무지개를 만들자.
- inline-block, inline 
  - 수동적으로 정렬됨
  - 부모의 text-align 속성에 의해 
- block
  - 능동적으로 정렬
  - margin 을 이용
  - 우측 margin-left:auto;

  - 중앙 margin:0 auto;
  - 좌측 margin-right:auto;
- 41강 block 요소 좌측,가운데,우측 정렬하는 방법
- 42강 개념 모든 보이는 엘리먼트의 부모는 body이고, 그의 부모는 html 이다.
- 43강~46강 문제풀이

참고사이트

lalacode.tistory.com/6

레이어 생성하기 : Ctrl + L

일러스트 기본 오브젝트가 쌓이는 구조 

각 레이어 별 바운딩박스 체크 이동 잠금 사용법 

영상보기

개발자와 효율적인 협업을 위한 GUI가이드 프로그램 제플린

제플린(Zeplin)은 디자이너 및 개발자를 위한 공동 작업 응용 프로그램입니다.

제플린은 스케치 또는 포토샵과 연동하여 자동으로 작업한 결과물을 이미지 파일 Asset과 디자인 가이드로 생성해 줍니다.

참고 사이트:  협업을 위한 심볼 구조화, 플러그인으로 똑똑하게 스케치 사용하기

34강 문제풀이 조건, 힌트

• 5분안에 완성해주세요.
• 메뉴의 구조 : section>nav*7>a
• 메뉴의 구조(v2) : section>({|}+nav>a[href="#"]{메뉴아이템 $})*7+{|}
• 메뉴 아이템안에 있는 a에 display:block

35강

• 개념 - 이미지, cover, contain

36강 문제풀이

• 문제 - 이미지 6개를 3x2 가운데 정렬로 배열해주세요. (6가지 방법으로)

37강

• 개념 - margin, padding
• 개념 - display:inline 에는 width, height, padding, margin이 제대로 작동하지 않는다.

38강 문제풀이 조건

• 이미지 6개를 3x2 가운데 정렬로 배열해주세요. (margin, padding)

학습목표

Gradient(2), Pathfinder

☆구글 로고 
☆계란_머핀
☆태극기
☆아디다스 로고
☆다양한 아이콘 만들기

p  : 펜툴 단축키
※ : 펜툴의 시작
+  : 앵커포인트 추가
-   : 앵커포인트 제거
/   : 펜툴 재개
O  : 펜툴의 완료
>  : 직선 곡선 직선

펜툴 연습할 때 앵커포인트가 많이 없지만 유려한 선을 만들자.

디자인은 시간이 생명이다.

시간내 높은 퀄리티의 마감을 해보자.

색과 형태를 만드는 조형감각을 익혀서 아트포스터를 잘 만들어 볼 것!

구글: 아트포스터 검색, 준비하기

참고:

m.blog.naver.com/PostView.nhn?blogId=wongansa&logNo=150146495110&proxyReferer=https:%2F%2Fwww.google.com%2F

32강 메뉴의 구조 section>a*7 / 문제풀이

33강 메뉴의 구조 section>nav*7>a / 문제풀이