Skills 썸네일형 리스트형 [Node.js] Node.js 작업환경 설정 로컬 작업환경 설정 Node.js 를 사용하기 위해서 Node.js(https://nodejs.org/en/download/) 주소로 접속하여 런타임을 설치하여 줍니다. 더보기 [Node.js] Node.js 란? 01 Node.js 란?2009년에 Ryan Dahl에 의해 개발되었으며 구글의 자바스크립트 엔진(V8 Enging)을 기반으로 만들어진 이벤트 처리 I/O 프레임워크입니다. 웹 서버와 같이 확장성 있는 네트워크 프로그램 제작을 위해 고안되었습니다. Node.js 공식 사이트에서 제공되는 정보는 아래와 같습니다. Node.js®는 Chrome V8 JavaScript 엔진으로 빌드된 JavaScript 런타임입니다. Node.js는 이벤트 기반, 논 블로킹 I/O 모델을 사용해 가볍고 효율적입니다. Node.js의 패키지 생태계인 npm은 세계에서 가장 큰 오픈 소스 라이브러리이기도 합니다. (출처: https://nodejs.org/ko/) 흔히들 Node.js 를 웹 서버로 오해 하기도 합니다. Node... 더보기 [Sample] 퍼블리싱&디자인 소스 (HTML + CSS) 위 이미지는 디자인 소스입니다. 아래 첨부파일로 HTML 파일 및 CSS, 이미지 파일 공개합니다. 아래 이미지는 HTML&CSS로 작업 완료한 상태입니다. 넓이는 모두 1200px이며, 아래는 크롬 브라우저 기준입니다. 더보기 PHOTOSHOP 컨텐츠 제작 - 마질감 배경 Photoshop CS6 / MAX OS800x800 Pixels / 72 Pixels Inch / RGB Color 8 bit 1, Edit -> Fill 에서 Custom Pattern 을 클릭 하면 창이 열리는데. 설정 버튼을 클릭하고 나서 Color Paper 를 선택해줍니다. 그 다음 Buff Textured 패턴을 선택하여 적용해줍니다. 2. 노이즈와 불러, 바람 효과를 차례대로 넣어줍니다. Filter -> Noise -> Add Noise : Amount 100%, UniformFilter -> Blur -> Motion Blur : Angle 0, Distance 40 PixelsFilter -> stylize -> wind : wind, From the Right 3. 백그라운드 레이어.. 더보기 Photoshop 컨텐츠 제작 - 튜브(Red Tube) Photoshop CS6 / MAX OS567x567 Pixels / 72 Pixels Inch / RGB Color 8 bit 1. 캔버스를 생성한 다음 레이어를 추가하고 위와 같은 이미지를 완성합니다. 제작 방법은 다양하게 있으므로 편하신 방식을 사용하시면 됩니다. 2. Filter -> Distort -> Polar Coordinates.. 를 클릭하여 효과를 적용하여 줍니다. 3. 자유변형툴(Marquee Tool) 중 원형을 선택하여 적당한 크기만큼 오려줍니다. 이 부분은 튜브에 외곽과 내부를 나눌 때 사용하려고 합니다. 4. 그런 다음 레이어를 추가하고 오린 부분을 붙여넣기 해줍니다. 그리고 가운데에 다시 한번 자유 변형 툴로 가운데를 오려주어 위와 같은 튜브 모양으로 만들어줍니다. 5. 튜브.. 더보기 Photoshop 컨텐츠 제작 - 보케 효과 Photoshop CS6 / MAX OS567x567 Pixels / 72 Pixels Inch / RGB Color 8 bit 1. 레이어를 추가해 준 후 배경색(#66ccff)을 칠 해줍니다. 위 이미지는 아래와 같이 그라데이션을 선택하여 효과를 적용하였습니다. 1-1. 2. 툴 박스에서 브러쉬를 선택하고 패널을 열어서 옵션들을 설정 해줍니다. Shape Dynamics : Size Jitter 70%Scattering : Scatter 500% Transfer : Opacity Jitter 100% 3. 레이어를 추가해 준 후 브러쉬에 사용할 색을 선택 해줍니다. 그리고 캔버스에 마우스 클릭 또는 드래그 앤 드롭으로 그려줍니다. 더보기 Photoshop 컨텐츠 제작 - 3D 상자(3D Box) Adobe Photoshop CS6 / MAX OS 1. 적당한 크기에 캔버스를 생성 해줍니다. 그리고 그리드 표시(Ctrl + ' 단축키)를 활성화 해줍니다. (View -> Show -> Grid)에서도 활성화가 가능합니다. 2. 레이어를 추가해준 후 Rectangular Marquee Tool(M)를 사용하여 적당한 크기에 박스 모양을 그려주고 색(#ffcc33)을 칠(Ctrl + Del) 해줍니다. 3. Ctrl + t 단축키를 사용하거나 하여서 자유변형(Free Transform)을 켜줍니다. 그리고 Ctrl 키를 누르고 왼쪽 가운데 지점을 마우스로 아래와 같은 모양으로 드래그 앤 드롭 해줍니다. 4. 박스에 옆면으로 사용할 부분 입니다. 남은 박스에 부분도 이 처럼 만들어 나갈 것 입니다. 5.. 더보기 Photoshop 하트(heart) 및 태극무늬 만들기 OS : Maxprogram : Photoshop CS 6 / En 하트 무늬 그리기 1. 툴박스(ToolBox)에서 Elllipse Tool(u)를 선택 한 후 정원(Shift+)를 그려줍니다. 2. 툴박스(ToolBox)에서 Convert Point Tool를 선택 한 후 원 아래부분을 떠블 클릭해줍니다. 3. Paths 탭에서 Ctrl 키를 누르고 Work Path에 이미지를 클릭 하면 위와 같이 선택됩니다. 4. 원하시는 색(#cc0000)을 칠해주시고 위에서 아래로 반을 잘라줍니다. 5. Elliptical Marquee Tool(M) 을 사용하여 반에 반 부분에 원을 그려주고 색을 칠 해줍니다. 반대 편에도 원을 그리고 색을 칠 해줍니다. 태극무늬 그리기 1. Fill -> New 에서 새로운.. 더보기 Phtoshop 효과 - 불타는 글자(Burning Text) OS : Maxprogram : Photoshop CS 6 / En 1. Fill -> New 를 클릭하여 위와 같은 사이즈에 캔버스를 만들어줍니다. 캔버스에 사이즈(Witdh, Height) 및 해상도(Resolution)는 아무렇게나 설정하셔도 상관없습니다. 2. 포그라운드 칼라를 검은색(#000000)으로 지정한 다음 레이어1을 모두 검정색으로 바꿔줍니다. 단축키 Alt+Del 를 이용 해줍시다. 3.다시 포그라운드 칼라를 흰색(#ffffff)으로 지정한 후 텍스트 박스를 사용하여 원하는 문구를 입력합니다. 글자 크기 및 색상은 자유롭게 설정 하셔도 무관합니다. 4. 그 다음 텍스트를 90% 회전(Image -> Image Rotation) 시켜준 후 Filter -> stylize -> Wind .. 더보기 반응형 웹사이트 만들기 (부트스크랩 프레임 워크 2 - CSS) 부트스크랩에는 폼이나 버튼, 이미지, 표 등 웹 문서 안에서 사용하는 여러 요소들에 이용할 수 있는 스타일이 미리 만들어져 있어서 스타일을 만들고 수정하는 번거로움 없이 그대로 가져다 사용할 수 있습니다. 회원 가입 양식이나 게시판 양식 등 사용자가 입력할 부분에 사용하는 폼 요소들은 화면에 보기 좋게 나열하기 위해 css를 이용해야 합니다. 물론 한 번에 끝나지 않고 여러 번 화면으로 확인해 가며 수정해야 하는데요, 부트스크랩을 이용하면 폼 요소들도 간단히 만들 수 있습니다. 그래서 사이트를 만들 때 다른 툴을 이용하더라도 폼 부분만큼은 부트스트랩의 css를 가져다 로그인 폼이나 회원 가입 폼을 만들기도 합니다. .form-inline 클래스 사용자명비밀번호 기억하기 .sr-only 클래스 사용자명비밀.. 더보기 이전 1 2 3 4 ··· 8 다음
