kimyws

■ 아래 컨텐츠가 밀어 올리면서 화면전환 Section 1 Section 2 Section 3 Section 4   ■ 패럴렉스 옆으로 이동 이후 콘텐츠 올라오기 Section 1 Section 2 Section 3 Section 4 콘텐츠2

■ Snap Scrolling Section 1 Section 2 Section 3 Section 4  ○ Scroll-snap▷ scroll-snap-type: 축 스냅 종류;- 축 :  x  y  both 로 적용- 종류mandatory : 스크롤 완료시 스냅 포인트에 반드시 스냅proximity : 스크롤이 스냅 포인트에 가까운 경우에만 스냅 되도록 ▷ scroll-snap-align: 스냅포인트를 자식요소에 지정start : 시작부분을 포인트로 설정center : 중앙부분을 설정end : 끝 부분을 설절none : 설정하지 않음

■  버튼 클릭시 스크롤 이동 Section 1 Section 2 Section 3 Section 4 1 2 3 4   ■  스크롤 확인 후 클래스 추가 버튼 1 2

■  이미지 슬라이드 자동 효과 let i = 0;$(".imgbox").append($(".img").first().clone(true));setInterval( function(){ i++; $(".imgbox").animate({marginLeft:-$(".img").width()*i},600); if(i===$(".img").length-1){ setTimeout( ..

■ 이미지 페이드 인아웃 효과

■ 팝업창 나오게 하기 버튼 공지사항 안녕 안녕 닫기

■  메뉴바 나오기 1메뉴 1 2메뉴 1 2메뉴 2 2메뉴 3 1메뉴 2 2메뉴 1 2메뉴 2 2메뉴 3 1메뉴 ..

■  트렌지션  ○ 클래스 전체 잡기 ○ 각각에 들어가도록 for문 만들기 넣어주기 ○ 함수로 만들어서 적용하기 ○ eq()로 인덱스 잡아주기 ○ 나의 다음번째 있는 녀석 변경 ○ 함수선언 및 반복시키기

JQuery 함수 모음 - inpa ■ 트렌지션 ■ 메뉴바 나오기 ■ 팝업창 나오기 ■ 이미지 페이드 인아웃 효과 ■ 이미지 슬라이드 효과 ■ 버튼 클릭시 스크롤 이동 ■ 스넵 스크롤 CSS ■ 아래 컨텐츠가 밀어 올리면서 화면전환 ■  화면 이동에 따른 회전과 곡선  ■ 특정 구간 화면 이동 후 효과 실행 ■

■ 피그마기초○ 특징- 클라우드 기반으로 컴퓨터에 저장할 필요 없음- 윈도우 맥 OS 제약을 받지 않는다.- 팀원과 실시간 협업이 가능- 커뮤니티에서 다양한 에셋 과 플러그인을 제공- 기획 프로토타이핑 개발까지 최적의 툴임 ○ 인터페이스-  툴바- 레이어 패널- 캔버스- 계정, 공유, 프로토 타입- 속성 패널 ○ 주요 단축키- Ctrl + G : 그룹- Ctrl + Alt + G : 프레임으로 그룹- Ctrl + Shift + G : 그룹해제- Alt 드래그 : 복제- Ctrl + [, ] : 순서- Ctrl + Shift + [, ] : 한번에 순서 이동- Ctrl + D : 반복작업 ○ 많이 사용하는 plugin - Unsplash : 이미지 사용 사이트- Pixabay : 이미지 사용 ○ 레이어, ..

■ 피그마 설치○ 피그마 사이트 ○ 피그마 로그인(구글과 연계) ○  피그마 다운로드  ■ 피그마 실행 / 주요 툴 ○  새 파일 만들기- 단축키 Ctrl + N- 위 메뉴에서 Design file 누르기  ○  이름변경- 위의 이름을 클릭하면 이름을 변경할 수 있다.  ○  확대 축소-  Ctrl + 마우스 휠- +, - 키- Ctrl + 0 : 100% 크기- 크기 수치조정  ○  이동과 크기- Move : 단축키 V : 이동을할 수 있는 툴- Scale : 단축키 K : 오브젝트의 크기를 변경하는 툴  ○  Frame, Section, Slice- Section : 아트보드를 전체 관리하는 부분 단축키 Shift + S- Frame : 아트보드 영역, 하나의 화면을 의미 단축키 A- Slice : ..

Webstoryboy Site - CSS■ CSS 란? CSS의 역할○ CSS (Cascading Style Sheets)- Cascading : 계단식 위에서 흐르는- Style : 양식- Sheets : 판, 한장- 계단식으로 스타일을 정의하는 문서- HTML 문서에 스타일을 더해준다. HTML은 계단식 구조를 지니고 있다.  ○ CSS 기본문법- 선택자 : 어떤 요소에 스타일을 적용할지 정보- {중괄호} : 선택한 요소에 적용할 스타일을 정의 하는 구간- 속성명 : 어떤 스타일을 정의하고 싶은지에 대한 정보- 속성값 : 어느정도의 수치에 맞게 정의하고 싶은지에 대한 정보 ○ html에서 연결방법 ○ CSS주석처리p{ background-color: blue; /* p태그에 파랑 넣기 */..

■ HTML이란?○ HTML : HyperText Markup Language- HyperText : 하이퍼 링크(참조)를 통해 어떤 문서에서 다른 문서로 접근할 수 있는 텍스트- Markup : 표시 (콘텐츠를)- Language : 언어> 하이퍼 텍스트와 콘텐츠를 표시해주는 언어> 웹브라우저를 통해 표시되는 웹페이지의 콘텐츠를 정의하기 위해 사용하는 언어 ○ HTML은 콘텐츠를 정의- 개발자는 HTML 코드로 웹페이지에 어떤 내용이 표시될 지를 정의함- 완성된 HTML코드를 웹브라우저에 로딩하면 웹페이지가 만들어진다.- HTML코드가 웹브라우저를 통해 해석되고 표현되는 과정을 렌더링이라 한다. ○ HTML 문서 : 확장자가 HTML- 텍스트 편집기 : Brackets, VScode- 웹 브라우저 : ..

보호되어 있는 글입니다.

보호되어 있는 글입니다.

보호되어 있는 글입니다.