일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- 웹개발자
- 홈페이지구축
- 고도몰
- 웹에이전시
- 커스터마이징
- 웹퍼블리싱
- 쇼핑몰제작
- JQuery
- 웹디자인
- 튜닝
- 안드로이드
- work6.kr
- 홈페이지
- 쇼핑몰
- 플러그인
- 쇼핑몰구축
- 포트폴리오
- 3D프린터
- 웹디자이너
- 프로그래머
- PHP
- 개발자
- 웹퍼블리셔
- plugin
- 홈페이지제작
- 사이트제작
- 제이쿼리
- CSS
- 워크식스
- jQuery Plugin
- Today
- Total
목록웹디자이너 (24)
그냥 개발자 블로그
'모달은 어떻게 만드나요?' 라는 질문이 있어서 이번 글과 영상을 제작하게 되었습니다. 이전에는 자바스크립트의 alert 함수를 이용하여 알림 메시지를 보여주거나 또는 window.open 함수를 이용하여 새로운 서브 페이지를 보여주고는 했었습니다.그러나 브라우저 보안을 이유로 또는 디자인이 이쁘지 않다는 이유로 모달 창 또는 레이어팝업 메시지가 지금은 많이 사용됩니다. 아래 영상은 모달 제작 과정을 녹화한 영상 입니다. (유튜브에서 더욱 큰 화면으로 보실 수 있습니다.) 샘플코드 관련글 2017/08/28 - [IT] - [워크식스] 웹디자인기능사 실기 (모달편) 2017/08/24 - [IT] - [워크식스] 웹디자인기능사 실기 (좌우 슬라이드편) 2017/08/24 - [IT] - [워크식스] 웹디..
'한번은 좌로 한번을 우로 흘러가는 슬라이드를 어떻게 만들어야 하나요?' 라는 질문이 있어서 이번 글과 영상을 제작하게 되었습니다. jquery를 이용한 슬라이드를 제작할때 우선 원리를 생각해봐야 합니다. 동작하는 방식에 따라 제작 방법이 모두 다르기 때문 입니다. jquery 슬라이드 제작에는 논리적인 사고가 필요 합니다. 우선 생각의 정리가 필요 합니다. container 안에 div를 겹치고 횟수에 따라서 한번은 왼쪽으로 한번을 오른쪽으로 향하게 할것 입니다. jquery 동작을 생각해보시게 앞서 div에 z-index 값을 각각 다르게 줘서 첫번째 div 가장 앞으로 오게 해줍니다. 이제 어떻게 동작 시킬지 생각해 봅시다. 1. 횟수를 체크할 수 있는 변수를 둬서 왼쪽으로 가게 할지 오른쪽으로 가..
드롭다운 메뉴는 많이 사용되는 기법중에 하나임으로 시험에서도 충분히 나올수 있는 문제 입니다. css 스타일을 통해서도 드롭다운을 만들수 있지만, 블라인드가 열리고 닫히듯이 부드럽게 열리고 동작하게 할수도 있습니다. 이번 글에서는 부드럽게 열리고 닫히는 드롭다운 메뉴 기법을 다루겠습니다. jquery에서는 고맙게도 slidDown과 slideUp이라는 함수를 제공하여 쉽게 만들수 있습니다. 아래 영상은 위 내용을 바탕으로 실제 드롭다운 메뉴를 제작하는 과정을 녹화하였습니다. (유튜브에서 더욱 큰 화면으로 보실 수 있습니다.) 샘플코드 관련글 2017/08/28 - [IT] - [워크식스] 웹디자인기능사 실기 (모달편) 2017/08/24 - [IT] - [워크식스] 웹디자인기능사 실기 (좌우 슬라이드편)..
'좌에서 우로 흘러가는 슬라이드를 어떻게 만들어야 하나요?' 라는 질문이 있어서 이번 글과 영상을 제작하게 되었습니다. jquery를 이용한 슬라이드를 제작할때 우선 원리를 생각해봐야 합니다. 동작하는 방식에 따라 제작 방법이 모두 다르기 때문 입니다. jquery 슬라이드 제작에는 논리적인 사고가 필요 합니다. 우선 생각의 정리가 필요 합니다. 이번 경우는 container 안에 div를 float으로 일렬로 나열시켜서 동작을 시켜 볼겁니다. 1. 슬라이드가 시작되기 전에 3번째 div를 1번째 div 앞으로 가져와서 배너의 순서를 3,1,2 로 바꿔준다. 2. 슬라이드가 동작되면 3번째 div에 margin-left에 -(마이너스)값을 줘서 좌측으로 0.6초간 서서히 이동시킨다. (나머지 1,2는 자..
웹디자인기능사 실기를 준비중에 과연 내가 몇점으로 합격할까 궁금할것 입니다. 웹디자인기능사 실기에 합격과 불합격을 가르며 영향이 가장 큰 부분은 w3c 검사 입니다. 따라서 w3c 검사를 통해서 오류를 찾아내고 이를 수정할 수 있는 능력을 키운다면 날이 갈수록 실력이 증가하여 w3c 검사를 더 이상하지 않아도 될정도로 발전 할 수 있습니다. 이는 실무에도 도움이 됩니다. 오류를 찾아내고 수정하는 과정을 디버깅 한다고 합니다. 다음은 w3c 검사를 어떻게 하는지 검사한 결과를 가지고 어떻게 디버깅 해가는지를 보여드리기 위해서 제작한 유튜브 영상 입니다. (유튜브에서 더욱 큰 화면으로 보실 수 있습니다.) 웹디자인기능사 실기 디버깅 팁 1. w3c를 통해서 오류가 확인 되었다면 오류 내용중 가장 아래 내용 ..
웹디자인기능사 실기에서 무엇보다 중요한것은 퍼블리싱 입니다. 퍼블리싱 결과물에 따라서 합격과 불합격이 결정 되는데요. 실기 시험을 보시는 분들을 위해서 4시간의 동일한 조건으로 난이도 테스트를 진행하였습니다. 앞서 '[워크식스] 웹디자인기능사 실기 (디자인편)'에 이어서 진행했으며 퍼블리싱 + 자바스크립트 포함하여 약 60분의 시간이 걸렸습니다. 디자인 시간을 포함하면 1시간 50분이 걸린셈 입니다. 테스트 과정은 영상으로 남겨 유튜브에 업로드 하였습니다. 저는 테스트 과정중 아톰이라는 에디터 프로그램을 사용하였습니다. 다른 에디터들과 다른점이 크게 없습니다. '[워크식스] 웹디자인기능사 실기 (디버깅편)' 영상 제작을 위하여 html 소스를 일부러 틀리게 작성한 부분이 있으니 참고하여 보시기 바랍니다...
창업을 하면서 홈페이지는 필수 입니다. 홈페이지를 통해서 사업을 많은 사람들이 이용하는 인터넷에 알릴 수 있습니다. 그렇다면 홈페이지제작방법 및 순서는 어떻게 될까요? 벤치마킹홈페이지 제작을 결정 했다면 다른 홈페이지들을 둘러 보고 "어떤 홈페이지를 만들어야 겠다"고 마음 속으로 정해 놓는 것이 좋습니다. 벤치마킹할때는 창업하는 사업 분야와 비슷하거나 동일한 홈페이지를 검색해 보세요. 예를 들어 실내 인테리어 창업을 한다고하면 네이버에서 '인테리어'로 검색해서 다른 홈페이지들을 많이 보고 나에게 맞는 홈페이지로 하나씩 추려가면 됩니다. 화면구성(기획)벤치마킹한 홈페이지와 동일하게 만드는 것도 좋지만 내게 필요한 것들을 추가하고 빼서 나에게 맞는 홈페이지를 만드는 것이 좋습니다. 또한 홈페이지 사용자의 움..
4차 산업혁명이 다가오며, 우리 생활은 IT와 늘 함께 살아가고 있습니다. 인터넷으로 쇼핑하고 스마트폰으로 장을 보며 은행 업무도 인터넷을 이용하죠 앞으로도 이러한 흐름은 변함 없을 것 이며, 인터넷과 우리는 더욱 밀접해 질 것 입니다. 따라서 고 퀄리티 웹디자인의 중요성은 점점 커질 것 이며, 웹디자이너 일자리는 계속해서 필요할 것 입니다. 그렇다면 웹디자이너가 되기 위해서 무엇을 준비해야 할까요? 1. 웹디자이너도 다 같은 웹디자이너가 아니다. 일반적으로 웹디자이너는 크게 이미지 툴을 이용하는 웹디자이너와 에디터 툴을 이용하는 디자이너 두 부류로 나뉩니다. 이미지 툴을 이용하는 웹디자이너의 경우 어도비의 포토샵, 일러스트레이터 툴을 이용하여 사이트를 표현합니다. 반면, 에디터 툴을 이용하는 웹디자이너..