워크식스 티스토리

퍼블리싱팁

• [워크식스] CSS만으로 마우스 애니메이션 만들기

  퍼블리싱팁 2018. 12. 6. 05:45

  CSS 만을 이용하여 마우스 애니메이션을 만드는 방법 입니다. 유튜브 제목을 클릭하여 큰 화면으로 볼 수 있어요. 따라 해보세요. 2018/11/08 - [HTML&CSS] - CSS만 이용해서 움직이는 화살표 버튼 만들기 2018/10/14 - [HTML&CSS] - CSS만 이용해서 로딩 애니메이션 만들기 [워크식스 문의하기] copyright ⓒ 2018. 워크식스

  Read More

• [워크식스] CSS만 이용해서 움직이는 화살표 버튼 만들기

  퍼블리싱팁 2018. 11. 8. 04:45

  CSS 만을 이용하여 화살표를 애니메이션을 만드는 방법 입니다. 처음엔 단순한 선이었다가 마우스를 올리면 화살표로 변합니다. 유튜브 제목을 클릭하여 큰 화면으로 볼 수 있어요. 따라 해보세요. 2018/10/14 - [HTML&CSS] - CSS만 이용해서 로딩 애니메이션 만들기 2018/12/08 - [HTML&CSS] - CSS만으로 마우스 애니메이션 만들기 [워크식스 문의하기] copyright ⓒ 2018. 워크식스

  Read More

• [워크식스] CSS만 이용해서 로딩 애니메이션 만들기

  퍼블리싱팁 2018. 10. 14. 21:06

  CSS 만을 이용하여 로딩 애니메이션을 만드는 방법 입니다. 이미지 혹은 gif 파일 보다 리소스도 적게 사용되고, 나중에 수정하기도 편하죠. 유튜브 제목을 클릭하여 큰 화면으로 볼 수 있어요. 따라 해보세요. 2018/12/08 - [HTML&CSS] - CSS만으로 마우스 애니메이션 만들기 2018/11/08 - [HTML&CSS] - CSS만 이용해서 움직이는 화살표 버튼 만들기 [워크식스 문의하기] copyright ⓒ 2018. 워크식스

  Read More

• [워크식스] jquery iphone click 안될 때 해결법

  퍼블리싱팁 2018. 10. 8. 03:09

  아이폰의 사파리에서는 클릭이 동작하지 않을 때가 종종 있습니다. 버그인 것 같습니다. 이를 해결하기 위한 여러 가지 방법이 있지만 가장 쉬운 방법은 스타일에 cursor:pointer 를 지정해주면 됩니다. cursor:pointer; [문의하기] copyright ⓒ 2018. 워크식스

  Read More

• [워크식스] 크로스브라우징 팁 1탄

  퍼블리싱팁 2018. 4. 20. 09:43

  1. 폰트 높이, 여백, 공백 등이 브라우저 마다 다른 경우 추가 html { font-family: sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; } 2. 요소 박스 크기가 다르거나 border 픽셀이 영향을 미칠 경우 추가 * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } *:before,*:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } [문의하기] copyright ⓒ 2018. 워크식스

  Read More

• [워크식스] 웹디자인기능사 실기 (모달편)

  퍼블리싱팁 2017. 8. 28. 02:29

  '모달은 어떻게 만드나요?' 라는 질문이 있어서 이번 글과 영상을 제작하게 되었습니다. 이전에는 자바스크립트의 alert 함수를 이용하여 알림 메시지를 보여주거나 또는 window.open 함수를 이용하여 새로운 서브 페이지를 보여주고는 했었습니다.그러나 브라우저 보안을 이유로 또는 디자인이 이쁘지 않다는 이유로 모달 창 또는 레이어팝업 메시지가 지금은 많이 사용됩니다. 아래 영상은 모달 제작 과정을 녹화한 영상 입니다. (유튜브에서 더욱 큰 화면으로 보실 수 있습니다.) 샘플코드 관련글 2017/08/28 - [IT] - [워크식스] 웹디자인기능사 실기 (모달편) 2017/08/24 - [IT] - [워크식스] 웹디자인기능사 실기 (좌우 슬라이드편) 2017/08/24 - [IT] - [워크식스] 웹디..

  Read More

• [워크식스] 웹디자인기능사 실기 (좌우 슬라이드편)

  퍼블리싱팁 2017. 8. 24. 11:31

  '한번은 좌로 한번을 우로 흘러가는 슬라이드를 어떻게 만들어야 하나요?' 라는 질문이 있어서 이번 글과 영상을 제작하게 되었습니다. jquery를 이용한 슬라이드를 제작할때 우선 원리를 생각해봐야 합니다. 동작하는 방식에 따라 제작 방법이 모두 다르기 때문 입니다. jquery 슬라이드 제작에는 논리적인 사고가 필요 합니다. 우선 생각의 정리가 필요 합니다. container 안에 div를 겹치고 횟수에 따라서 한번은 왼쪽으로 한번을 오른쪽으로 향하게 할것 입니다. jquery 동작을 생각해보시게 앞서 div에 z-index 값을 각각 다르게 줘서 첫번째 div 가장 앞으로 오게 해줍니다. 이제 어떻게 동작 시킬지 생각해 봅시다. 1. 횟수를 체크할 수 있는 변수를 둬서 왼쪽으로 가게 할지 오른쪽으로 가..

  Read More

• [워크식스] 웹디자인기능사 실기 (드롭다운 메뉴)

  퍼블리싱팁 2017. 8. 24. 10:34

  드롭다운 메뉴는 많이 사용되는 기법중에 하나임으로 시험에서도 충분히 나올수 있는 문제 입니다. css 스타일을 통해서도 드롭다운을 만들수 있지만, 블라인드가 열리고 닫히듯이 부드럽게 열리고 동작하게 할수도 있습니다. 이번 글에서는 부드럽게 열리고 닫히는 드롭다운 메뉴 기법을 다루겠습니다. jquery에서는 고맙게도 slidDown과 slideUp이라는 함수를 제공하여 쉽게 만들수 있습니다. 아래 영상은 위 내용을 바탕으로 실제 드롭다운 메뉴를 제작하는 과정을 녹화하였습니다. (유튜브에서 더욱 큰 화면으로 보실 수 있습니다.) 샘플코드 관련글 2017/08/28 - [IT] - [워크식스] 웹디자인기능사 실기 (모달편) 2017/08/24 - [IT] - [워크식스] 웹디자인기능사 실기 (좌우 슬라이드편)..

  Read More