CSS HTML JAVASCRIPT 웹디자인기능사 GSAP 포트폴리오 유튜브 Tutorial146 12. GSAP Parallax Effect : 가로 효과 Tutorial/webd GSAP 패럴랙스 이펙트 : 가로 효과 by @webs 2023. 06. 01. 12 GSAP Parallax Effect : 가로 효과 난이도 중간 소스 다운로드 완성 화면 소스 보기 유튜브 소개 안녕하세요! 웹스토리보이입니다. 패럴랠스의 하이라이트 가로 효과입니다. 저도 이 효과 때문에 GSAP를 사용했는데요! GSAP를 이용하면 쉽고 간편하게 효과를 줄 수 있습니다. 물론 처음에는 이해하는 과정이 필요합니다. 필수 속성 값을 알고 있어야, 내가 원하는 장소에서 스크롤 효과를 제대로 줄 수 있습니다. 보통은 스크롤 이팩트가 세로로 작동하지만, 가로로 작동하는 사이트들도 많이 볼 수 있기 때문에 이번에는 가로로 한번 작업해 보겠습니다. 그럼 시작해볼까요? 🤭 1. 기본 구조 만.. 2023. 6. 20. 11. GSAP Parallax Effect : 메뉴 숨기기 효과 Tutorial/webd GSAP 패럴랙스 이펙트 : 메뉴 숨기기 효과 by @webs 2023. 06. 01. 11 GSAP Parallax Effect : 메뉴 숨기기 효과 난이도 중간 소스 다운로드 완성 화면 소스 보기 유튜브 소개 안녕하세요! 웹스토리보이입니다. 이번에는 메뉴를 숨기는 효과를 만들어보겠습니다. 스크롤을 내리면 메뉴는 위로 올라가고, 스크롤을 올리면 메뉴는 다시 나타나는 형태입니다. GSAP를 이용하니 퀄리티 애니메이션을 구현할 수 있는 점이 좋네요! 소스로 새로운 속성들이 나오기는 하나 그렇게 어렵지는 않으니 같이 잘 따라 해봅시다. 그럼 시작해볼께요! 💩 1. 기본 구조 만들기 1-1. 준비하기 GSAP를 배우는 시간이기 때문에 HTML/CSS 코딩은 생략하겠습니다. 기본 코딩은.. 2023. 6. 20. 10. GSAP Parallax Effect : 메뉴 축소 효과 Tutorial/webd GSAP 패럴랙스 이펙트 : 메뉴 축소 효과 by @webs 2023. 06. 01. 10 GSAP Parallax Effect : 메뉴 축소 효과 난이도 중간 소스 다운로드 완성 화면 소스 보기 유튜브 소개 안녕하세요! 웹스토리보이입니다. 메뉴 클릭에 있어 메뉴 확대 축소 효과를 완성해보겠습니다. 일반적으로 메뉴가 있다가 스크롤을 내리면 축소되거나 모바일 메뉴로 바꾸는 형태로 많이 사용합니다. 다시 처음으로 돌아오면 크게 확대되는 효과입니다. 스크립트와 CSS를 같이 사용하는 효과입니다. 비교적 사용빈도가 높고 쉽게 때문에 쉽게 따라할 수 있습니다. 그럼 바로 시작해보겠습니다. 🤪 1. 기본 구조 만들기 1-1. 준비하기 GSAP를 배우는 시간이기 때문에 HTML/CSS 코딩은.. 2023. 6. 20. 09. GSAP Parallax Effect : 메뉴 이동 효과 Tutorial/webd GSAP 패럴랙스 이펙트 : 메뉴 이동 효과 by @webs 2023. 06. 01. 09 GSAP Parallax Effect : 메뉴 이동 효과 난이도 중간 소스 다운로드 완성 화면 소스 보기 유튜브 소개 안녕하세요! 웹스토리보이입니다. 이번에는 메뉴를 클릭하면 이동하는 스크립트를 작성하겠습니다. 예전 자바스크립트 패럴랙스에서도 작업한 적이 있는데요! GSAP 용은 스타일이 많이 틀린긴 합니다. 그래도 패럴랙스 사이트에서 없어서는 안되는 효과이기 때문에 열심히 작업해보겠습니다. 그럼 시작해볼까요? 😏 1. 기본 구조 만들기 1-1. 준비하기 GSAP를 배우는 시간이기 때문에 HTML/CSS 코딩은 생략하겠습니다. 기본 코딩은 복사해서 사용하겠습니다. 우선 웹폰트를 설정하고 G.. 2023. 6. 20. 08. GSAP Parallax Effect : 진행바 효과 Tutorial/webd GSAP 패럴랙스 이펙트 : 진행바 효과 by @webs 2023. 06. 01. 08 GSAP Parallax Effect : 진행바 효과 난이도 쉬움 소스 다운로드 완성 화면 소스 보기 유튜브 소개 안녕하세요! 웹스토리보이입니다. 진행바 스크립트를 작업해보겠습니다. 사이트 전체의 길이 값을 진행바에 표현하는 애니메이션입니다. GSAP를 이용하면 아주 간단하게 작업할 수 있습니다. 너무 빨리 끝난다고 아쉬어 하지 마세요^^ 😁 1. 기본 구조 만들기 1-1. 준비하기 GSAP를 배우는 시간이기 때문에 HTML/CSS 코딩은 생략하겠습니다. 기본 코딩은 복사해서 사용하겠습니다. 우선 웹폰트를 설정하고 GSAP에서 필요한 파일을 미리 셋팅해 놓겠습니다. GSAP는 자주 업데이트가 .. 2023. 6. 19. 07. GSAP Parallax Effect : 배경색 효과 Tutorial/webd GSAP 패럴랙스 이펙트 : 배경색 효과 by @webs 2023. 06. 01. 07 GSAP Parallax Effect : 배경색 효과 난이도 중간 소스 다운로드 완성 화면 소스 보기 유튜브 소개 안녕하세요! 웹스토리보이입니다. 이번시간에는 배경색을 자연스럽게 변경하는 애니메이션을 만들어보겠습니다. 방법은 두가지로 설정할 수 있습니다. 자연스럽게 전체 배경에 색을 넣는 과정과, 해당 섹션의 data값을 이용해 섹션마다 변경하는 방법입니다. 어떤 방법이든 자연스럽게 배경색을 변경할 수 있습니다. 그럼 시작해볼까요? 😘 1. 기본 구조 만들기 1-1. 준비하기 GSAP를 배우는 시간이기 때문에 HTML/CSS 코딩은 생략하겠습니다. 기본 코딩은 복사해서 사용하겠습니다. 우선 웹.. 2023. 6. 19. 06. GSAP Parallax Effect : 텍스트 효과 Tutorial/webd GSAP 패럴랙스 이펙트 : 텍스트 효과 by @webs 2023. 06. 01. 06 GSAP Parallax Effect : 텍스트 효과 난이도 중간 소스 다운로드 완성 화면 소스 보기 유튜브 소개 안녕하세요! 웹스토리보이입니다. 텍스트 애니메이션을 작업해보겠습니다. 스크롤을 내리면 한 줄씩 또는 한 글자씩 나오는 효과입니다. GSAP에서도 텍스트 효과를 사용할 수 있지만 유로 플러그인을 사용해야 합니다. 그래서 텍스트를 분리하는 작업은 자바스크립트로 작업하거나 글씨만 분리해주는 플러그인을 사용할 것입니다. 글씨를 하나씩 분리한 상태에서 GSAP를 작업하게 됩니다. 조금 복잡할 수도 있고, 쉬울 수도 있습니다. 그럼 같이 한번 해볼까요? 1. 기본 구조 만들기 1-1. 준비하.. 2023. 6. 19. 05. GSAP Parallax Effect : 나타나기 효과 Tutorial/webd GSAP 패럴랙스 이펙트 : 나타나기 효과 by @webs 2023. 06. 01. 05 GSAP Parallax Effect : 나타나기 효과 난이도 쉬움 소스 다운로드 완성 화면 소스 보기 유튜브 소개 안녕하세요! 웹스토리보이입니다. 이번에는 스크롤을 내리면 하나씩 나타나는 효과를 만들어 보겠습니다. 나타나기 효과는 이미지에 줄 수도 있고, 텍스트에 줄 수도 있습니다. 해당 요소에 이름에 각각 스크립트를 설정하면 조금 번거롭기 때문에 클래스 이름으로 설정할 수도 있습니다. 내가 원하는 효과의 이름을 작성하면, 그거에 맞추어 스크립트를 작성하면 됩니다. 기존과는 약간 다를 수 있지만 기본 원리는 동일하기 때문에 어렵지는 않습니다. 그럼 시작해 볼까요? 😇 1. 기본 구조 만들기.. 2023. 6. 19. 04. GSAP Parallax Effect : 이질감 효과 주기 Tutorial/webd GSAP 패럴랙스 이펙트 : 이질감 효과 주기 by @webs 2023. 06. 01. 04 GSAP Parallax Effect : 이질감 효과 주기 난이도 쉬움 소스 다운로드 완성 화면 소스 보기 유튜브 소개 안녕하세요! 웹스토리보이입니다. 패럴랙스 이펙트의 가장 대표적인 효과라고 할 수 있는 이질감 효과를 주겠습니다. 이질감은 요소가 겹쳤을 때 확인할 수 있습니다. 스크롤 내리거나 올릴 때마다 위치 이동을 시켜줘서, 보통의 요소보다 빠르게 또는 느리게 해주는 효과입니다. 여기에 스무스 효과를 같이 주면 퀄리티 있는 사이트를 만들 수 있습니다. 1. 기본 구조 만들기 1-1. 준비하기 GSAP를 배우는 시간이기 때문에 HTML/CSS 코딩은 생략하겠습니다. 기본 코딩은 복사해.. 2023. 6. 19. 03. GSAP Parallax Effect : 배경 고정하기 Tutorial/webd GSAP 패럴랙스 이펙트 : 배경 고정하기 by @webs 2023. 06. 01. 03 GSAP Parallax Effect : 배경 고정하기 난이도 쉬움 소스 다운로드 완성 화면 소스 보기 유튜브 소개 안녕하세요! 웹스토리보이입니다. pin 속성을 이용하여 배경을 고정하는 효과를 배워보겠습니다. 스크롤을 내리면 배경이 고정되어 있고, 다음 섹션이 올라오는 형태의 애니메이션입니다. 1. 기본 구조 만들기 1-1. 준비하기 GSAP를 배우는 시간이기 때문에 HTML/CSS 코딩은 생략하겠습니다. 기본 코딩은 복사해서 사용하겠습니다. 우선 웹폰트를 설정하고 GSAP에서 필요한 파일을 미리 셋팅해 놓겠습니다. GSAP는 자주 업데이트가 되기 때문에 제일 최선 버전을 사용하는게 좋습니.. 2023. 6. 19. 02. GSAP Parallax Effect : Pin 애니메이션 Tutorial/webd GSAP 패럴랙스 이펙트 by @webs 2023. 06. 01. 02 GSAP Parallax Effect : Pin 애니메이션 난이도 쉬움 소스 다운로드 완성 화면 소스 보기 유튜브 소개 안녕하세요! 웹스토리보이입니다. GSAP Parallax Effect Pin 애니메이션에 대해서 배워보겠습니다. scrollTrigger 속성 중에 pin 애니메이션 기억하시죠? 무엇인가를 고정시킬 때 사용하는 Pin 속성을 이용해서 다양한 애니메이션 작업할 수 있습니다. 그럼 시작해보겠습니다. 렛츠기릿 🥳 1. 기본 구조 만들기 1-1. 준비하기 GSAP를 배우는 시간이기 때문에 HTML/CSS 코딩은 생략하겠습니다. 기본 코딩은 복사해서 사용하겠습니다. 우선 웹폰트를 설정하고 GSAP에서.. 2023. 6. 19. 01. GSAP Parallax Effect : 기본 애니메이션 Tutorial/webd GSAP 패럴랙스 이펙트 by @webs 2023. 06. 01. 01 GSAP Parallax Effect : 기본 애니메이션 난이도 쉬움 소스 다운로드 완성 화면 소스 보기 유튜브 소개 안녕하세요! 웹스토리보이입니다. 이번에는 포트폴리오 스킬을 올릴 수 있는 방법에 대해서 공부해보겠습니다. 현재 오픈되어 있는 사이트들은 패럴랙스 형태의 사이트가 많습니다. 즉 스크롤을 내리면 무엇인가 움직이는 효과들이 많습니다. 이런 효과를 패럴랙스 효과라고 합니다. 패럴랙스 파트는 자바스크립트 파트와 GSAP 파트로 나눌 수 있습니다. 기본적인 사항은 자바스크립트를 통해 익히고, 퀄리티 있는 효과들을 GSAP를 통해서 작업할 것입니다. GSAP의 scrollTrigger를 이용하면, 퀄리티 .. 2023. 6. 19. 2023년 웹디자인 기능사 실전 사이트 연습5 - E유형 Tutorial/webd 2023년 웹디자인 기능사 실전 사이트 : E유형 by @webs 2023. 05. 01. 39 웹디자인 기능사 실전 사이트 : E유형 난이도 중급 소스 다운로드 완성 화면 완성 코드 미리보기 소스 다운로드 영상보기 디자인 보기 소개 안녕하세요! 웹스토리보이입니다. 이번에는 웹디자인 기능사에서 가장 어려운 부분인 E유형입니다. 반응형도 신경써야 하고 스크립트까지 접목시켜야 완성할 수 있습니다. 그럼 마지막까지 화이팅해봅시다. 인덱스 1. 구조 잡기 1-1. 준비하기 1-2. 전체 레이아웃 잡기 1-3. 각 섹션 작업하기 2. 각 섹션 작업하기 2-1. 헤더 작업하기 2-2. 슬라이드 작업하기 2-3. 게시판 작업하기 2-4. 갤러리 작업하기 2-5. 배너 작업하기 2-6. 푸터 .. 2023. 5. 15. 2023년 웹디자인 기능사 실전 사이트 연습4 - D유형 Tutorial/webd 2023년 웹디자인 기능사 실전 사이트 : D유형 by @webs 2023. 05. 01. 38 웹디자인 기능사 실전 사이트 : D유형 난이도 중급 소스 다운로드 완성 화면 완성 코드 미리보기 소스 다운로드 영상보기 디자인 보기 소개 안녕하세요! 웹스토리보이입니다. 이번에는 웹디자인 기능사 D-2 유형을 해보겠습니다. 천천히 잘 따라오세요! 인덱스 1. 구조 잡기 1-1. 준비하기 1-2. 전체 레이아웃 잡기 1-3. 각 섹션 작업하기 2. 각 섹션 작업하기 2-1. 헤더 작업하기 2-2. 슬라이드 작업하기 2-3. 게시판 작업하기 2-4. 갤러리 작업하기 2-5. 배너 작업하기 2-6. 푸터 작업하기 2-7. 팝업 작업하기 1. 구조 잡기 1-1. 준비하기 우선 폴더를 먼저 셋.. 2023. 5. 15. 2023년 웹디자인 기능사 실전 사이트 연습3 - C유형 Tutorial/webd 2023년 웹디자인 기능사 실전 사이트 : C유형 by @webs 2023. 05. 01. 37 웹디자인 기능사 실전 사이트 : C유형 난이도 중급 소스 다운로드 완성 화면 완성 코드 미리보기 소스 다운로드 영상보기 디자인 보기 소개 안녕하세요! 웹스토리보이입니다. 이번에는 C유형 연습니다. 샘플은 C-4 유형을 참고하시면 됩니다. 이번 레이아웃은 약간 옛날 스타일 레이아웃입니다. 이런 레이아웃을 아직까지 쓰고 잇는 회사가 있을까 싶은데.. 그래도 시험이니까 한번 만들어보죠! 고고 😫 인덱스 1. 구조 잡기 1-1. 준비하기 1-2. 전체 레이아웃 잡기 1-3. 각 섹션 작업하기 2. 각 섹션 작업하기 2-1. 헤더 작업하기 2-2. 슬라이드 작업하기 2-3. 게시판 작업하기 2.. 2023. 5. 15. 2023년 웹디자인 기능사 실전 사이트 연습2 - B유형 Tutorial/webd 2023년 웹디자인 기능사 실전 사이트 : B유형 by @webs 2023. 05. 01. 36 웹디자인 기능사 실전 사이트 : B유형 난이도 중급 소스 다운로드 완성 화면 완성 코드 미리보기 소스 다운로드 영상보기 디자인 보기 소개 안녕하세요! 웹스토리보이입니다. 이번에는 B유형에서 하나 해보겠습니다. B유형도 업데이트 되기 전이랑 같은 유형이지만 전체 메뉴가 생긴것이 다릅니다. 그부분만 신경쓰면 다른 부분은 동일합니다. 너무 어렵지 않으니 포기하지 말고 끝까지 완수하길 바랍니다. 😵💫 인덱스 1. 구조 잡기 1-1. 준비하기 1-2. 전체 레이아웃 잡기 1-3. 각 섹션 작업하기 2. 각 섹션 작업하기 2-1. 헤더 작업하기 2-2. 슬라이드 작업하기 2-3. 게시판 작업하.. 2023. 5. 15. 2023년 웹디자인 기능사 실전 사이트 연습1 - A유형 Tutorial/webd 2023년 웹디자인 기능사 실전 사이트 : A유형 by @webs 2023. 05. 01. 35 웹디자인 기능사 실전 사이트 : A유형 난이도 중급 소스 다운로드 완성 화면 완성 코드 미리보기 소스 다운로드 영상보기 디자인 보기 소개 안녕하세요! 웹스토리보이입니다. 지금까지는 연습을 하였고, 이제부터는 실전 사이트를 만들어보겠습니다. 실제 시험인 것처럼 작업을 하겠습니다. 각 유형에서 한가지를 골라서 작업해보겠습니다. A유형에서는 강원천문대 A-3유형을 작업해보겠습니다. 그럼 시작해볼까요? 🫤 1. 구조 잡기 1-1. 레이아웃 작업 우선 레이아웃을 작업해보겠습니다. 기본 레이아웃을 잡고, 스크립트를 작업할 것입니다. 시험지를 받으면, 전체적인 디자인과 구조를 확인하고, 받은 이미.. 2023. 5. 15. 2023년 웹디자인 기능사 팝업 : P-1 Tutorial/webd 2023년 웹디자인 기능사 팝업 : P-1 by @webs 2023. 05. 01. 34 웹디자인 기능사 팝업 유형 : P-1 난이도 초급 소스 다운로드 완성 화면 완성 코드 미리보기 소스 다운로드 영상보기 디자인 보기 소개 안녕하세요! 웹스토리보이입니다. 스크립트에서 가장 쉬운 스크립트입니다. 버튼을 클릭하면 숨긴 내용 보여주고, 다시 클릭하면 안보여주고, 시작해보겠습니다. 1. 구조 잡기 이번에는 A-2 유형의 레이아웃을 사용하였습니다. 소스는 그대로 복사하셔서 사용하셔도 상관없습니다. * { margin: 0; padding: 0; } a { text-decoration: none; color: #000; } #wrap { width: 1200px; margin: 0 aut.. 2023. 5. 11. 2023년 웹디자인 기능사 탭 메뉴 : T-1 Tutorial/webd 2023년 웹디자인 기능사 탭메뉴 : T-1 by @webs 2023. 05. 01. 33 웹디자인 기능사 탭메뉴 유형 : T-1 난이도 중급 소스 다운로드 완성 화면 완성 코드 미리보기 소스 다운로드 영상보기 디자인 보기 소개 안녕하세요! 웹스토리보이입니다. 탭메뉴 스크립트를 작업해보겠습니다. 그렇게 어렵지 않으니 하나씩 따라오세요! 그럼 바로 시작해보겠습니다. 1. 구조 잡기 이번에는 A-2 유형의 레이아웃을 사용하였습니다. 소스는 그대로 복사하셔서 사용하셔도 상관없습니다. * { margin: 0; padding: 0; } a { text-decoration: none; color: #000; } #wrap { width: 1200px; margin: 0 auto; } #h.. 2023. 5. 11. 2023년 웹디자인 기능사 메뉴 : S-6 Tutorial/webd 2023년 웹디자인 기능사 슬라이드 : S-6 by @webs 2023. 05. 01. 32 웹디자인 기능사 슬라이드 유형 : S-6 난이도 중급 소스 다운로드 완성 화면 완성 코드 미리보기 소스 다운로드 영상보기 디자인 보기 소개 안녕하세요! 웹스토리보이입니다. 이미지 슬라이드도 마지막 유형입니다. 거의 끝이 보이기 시작했네요! 여러분들도 여기까지 잘 따라오셨는지 궁금하네요! 잘 하고 있으면 댓글 부탁드립니다. 마지막 유형은 조금 까다롭습니다. 아마 웹디기에서 제일 어려운 부분이 아닐까 싶습니다. 위아래 움직이기 위해서는 높이값이 잡혀야 하는데 height값을 퍼센트로 표현하는 건 힘듭니다. 브라우저는 내리면 계속 내려가기 때문에 height: 100%값이 존재하지 않습니다. .. 2023. 5. 11. 2023년 웹디자인 기능사 메뉴 : S-5 Tutorial/webd 2023년 웹디자인 기능사 슬라이드 : S-5 by @webs 2023. 05. 01. 31 웹디자인 기능사 슬라이드 유형 : S-5 난이도 중급 소스 다운로드 완성 화면 완성 코드 미리보기 소스 다운로드 영상보기 디자인 보기 소개 안녕하세요! 웹스토리보이입니다. 반응형 이미지 슬라이드 S-5 유형입니다. 이번 유형은 S-2 유형과 유사하지만, 반응형으로 작업하기 위해서는 가로 값을 퍼센트로 설정해야 하고, 이미지는 백그라운드로 처리하는 것이 포인트입니다. 그래서 S-2 유형을 어느 정도 이해했다면 이번 유형도 쉽게 할 수 있을겁니다. 그럼 시작해보겠습니다. 1. 구조 잡기 이번에도 E-1 유형의 레이아웃을 사용하였습니다. 소스는 그대로 복사하셔서 사용하셔도 상관없습니다. * {.. 2023. 5. 11. 2023년 웹디자인 기능사 메뉴 : S-4 Tutorial/webd 2023년 웹디자인 기능사 슬라이드 : S-4 by @webs 2023. 05. 01. 30 웹디자인 기능사 슬라이드 유형 : S-4 난이도 중급 소스 다운로드 완성 화면 완성 코드 미리보기 소스 다운로드 영상보기 디자인 보기 소개 안녕하세요! 웹스토리보이입니다. 웹디자인기능사의 하이라이트 이미지슬라이드 반응형 S-4 유형입니다. 이번에 반응형 레이아웃이 새롭게 생기면서 이미지 슬라이드도 반응형에 맞추어서 작업을 해야 합니다. 하지만 시험지에는 반응형으로 이미지 슬라이드를 구현하시오! 라는 내용이 없습니다. 그래서 이미지를 적절하게 포토샵에서 자른 후 반응형이 아닌 대충 크기를 맞추어도 상관이 없을 듯합니다. 이 부분은 저도 자세히 모르니 여러분이 시험을 보시고 옳은 정보를 알려.. 2023. 5. 11. 2023년 웹디자인 기능사 메뉴 : S-3 Tutorial/webd 2023년 웹디자인 기능사 슬라이드 : S-3 by @webs 2023. 05. 01. 29 웹디자인 기능사 슬라이드 유형 : S-3 난이도 중급 소스 다운로드 완성 화면 완성 코드 미리보기 소스 다운로드 영상보기 디자인 보기 소개 안녕하세요! 웹스토리보이입니다. 마지막 이미지 슬라이드입니다. 이번 유형은 두번째 유형과 똑같습니다. 이미지가 좌에서 위로 움직이는 것 빼고는 똑같습니다. 이 부분은 몇 가지만 바꾸면 구현이 되기 때문에 두번째 유형을 완벽하게 이해했다면, 응용해서 작업할 수 있는 유형입니다. 저랑 같이 하기 전에 먼저 해보시는 것을 추천합니다. 그럼 시작해볼까요? 🫢 1. 구조 잡기 이번에는 A-2 유형의 레이아웃을 사용하겠습니다. 레이아웃을 그대로 복사하셔서 사용하.. 2023. 5. 10. 2023년 웹디자인 기능사 메뉴 : S-2 Tutorial/webd 2023년 웹디자인 기능사 슬라이드 : S-2 by @webs 2023. 05. 01. 28 웹디자인 기능사 슬라이드 유형 : S-2 난이도 중급 소스 다운로드 완성 화면 완성 코드 미리보기 소스 다운로드 영상보기 디자인 보기 소개 안녕하세요! 웹스토리보이입니다. 이번에는 좌우로 움직이는 이미지 슬라이더를 구현해보겠습니다. 좌로 움직이는 이미지 슬라이더는 두가지 유형으로 구분할 수 있습니다. 1 2 3 이미지고 보이고 다시 1로 이동 후 보여주는 방식과 1 2 3 1 2 3 무한으로 연속적으로 자연스럽게 보여주는 방식이 있습니다. 첫 번째 방법이 더 간단하고, 소스도 짧겠지만, 시험에서는 두번째 방식을 원하는 것 같습니다. 그래서 두번째 방법으로 작업을 시작해보겠습니다. 그럼 시.. 2023. 5. 10. 2023년 웹디자인 기능사 메뉴 : S-1 Tutorial/webd 2023년 웹디자인 기능사 슬라이드 : S-1 by @webs 2023. 05. 01. 27 웹디자인 기능사 슬라이드 유형 : S-1 난이도 중급 소스 다운로드 완성 화면 완성 코드 미리보기 소스 다운로드 영상보기 디자인 보기 소개 안녕하세요! 웹스토리보이입니다. 웹디자인기능사의 하이라이트! 제일 어려운! 제일 재밌는! 이미지 슬라이드입니다. 이 영역은 시험장에서 구현을 못하면 바로 떨어집니다. 무조건 암기하고 또 암기하고, 이해해야, 구현이 가능해야 합니다. 이미지 슬라이드의 유형은 크게 3가지로 나누어 집니다. 페이드 효과, 좌우 슬라이드 효과, 위아래 슬라이드 효과입니다. 페이드 효과는 이미지가 제자리에서 천천히 없어지고 천천히 나타나는 유형이고, 좌우 슬라이드 효과는 이미.. 2023. 5. 10. 2023년 웹디자인 기능사 메뉴 : M-6 Tutorial/webd 2023년 웹디자인 기능사 메뉴 : M-6 by @webs 2023. 05. 01. 26 웹디자인 기능사 메뉴 유형 : M-6 난이도 중급 소스 다운로드 완성 화면 완성 코드 미리보기 소스 다운로드 영상보기 디자인 보기 소개 안녕하세요! 웹스토리보이입니다. 드뎌 메뉴 유형도 마지막입니다. 마지막 유형은 백그라운드가 들어간 메뉴 유형입니다. M-3 유형에서 작업을 했습니다. 이번엔 전체 배경이 가로로 들어간 형태이기 때문에 기존 유형과 약간 다르기 합니다. 그래도 원리는 동일하니까! 바로 한번 시작해보겠습니다. 1. 구조 잡기 이번에도 D-1 유형 레이아웃에 메뉴 유형을 작업을 해보겠습니다. 기본적인 코드는 그대로 복사하셔서 사용하셔도 됩니다. * { margin: 0; paddi.. 2023. 5. 9. 2023년 웹디자인 기능사 메뉴 : M-5 Tutorial/webd 2023년 웹디자인 기능사 메뉴 : M-5 by @webs 2023. 05. 01. 25 웹디자인 기능사 메뉴 유형 : M-5 난이도 중급 소스 다운로드 완성 화면 보기 완성 코드 보기 미리보기 소스 다운로드 영상보기 디자인 보기 소개 안녕하세요! 웹스토리보이입니다. 메뉴 유형 5번째 시간입니다. 이 유형은 M-4 유형과 동일합니다. 단지 서브메뉴의 위치만 다르기 때문에 이것은 CSS로 컨트롤 해주면 됩니다. 스크립트 부분은 동일하게 때문에 먼저 해보시고, 따라하시면 더 도움이 될 것 같습니다. 그럼 시작해보겠습니다. 😇 1. 구조 잡기 이번에도 D-1 유형 레이아웃에 메뉴 유형을 작업을 해보겠습니다. 기본적인 코드는 그대로 복사하셔서 사용하셔도 됩니다. * { margin: 0.. 2023. 5. 9. 2023년 웹디자인 기능사 메뉴 : M-4 Tutorial/webd 2023년 웹디자인 기능사 메뉴 : M-4 by @webs 2023. 05. 01. 24 웹디자인 기능사 메뉴 유형 : M-4 난이도 중급 소스 다운로드 완성 화면 완성 코드 미리보기 소스 다운로드 영상보기 디자인 보기 소개 안녕하세요! 웹스토리보이입니다. 이번에는 네번째 메뉴 유형을 작업하겠습니다. 이번 메뉴는 세로 유형이며, 사이드 메뉴가 있는 레이아웃에서 사용되는 메뉴 스타일입니다. PDF를 확인해보면 반응형 레이아웃 및 정적인 레이아웃에서 다 사용이 되지만 반응형에서 메뉴 유형이 조금 더 어려울 것 같아서 이번에는 반응형 레이아웃에서 작업을 해보겠습니다. 가로형 1,2,3과 세로형 1,2,3는 같은 원리이지만, 가로 세로에 따라 약간의 차이가 있습니다. 기존에 1,2,3번.. 2023. 5. 9. 이전 1 2 3 4 5 6 다음
