전체 글 (568) 썸네일형 리스트형 반응형웹 플러그인 - 부트스트랩과 제이쿼리 PC와 스마트폰 등 다양한 화면크기에서 쉽게 반응하는 웹사이트를 만들어 주는 기술인 반응형웹은 하이브리드앱을 구현할 수 있는 가장 쉬운 표현방법이다. UI디자인에서 세부 레이아웃 및 그래픽 요소들을 다양한 자바스크립트와 CSS스타일로 구현하는 부트스트랩과 제이쿼리를 소개하는 시간을 가져본다. Bootstrap(부트스트랩)은 자체 구성된 하나의 CSS로 휴대폰, 태블릿, 데스크탑까지 다양한 기기에서 작동하면서, 반응형 모바일 웹 사이트를 개발하기위한 가장 인기있는 HTML, CSS 자바 스크립트 프레임 워크인 부트 스트랩입니다. 부트스트랩은 다양한 기능을 제공하여 사용자가 쉽게 웹사이트를 제작, 유지, 보수할 수 있도록 도와준다. 현재 최신 버전은 5이지만, 버전 4가 일반적으로 많이 사용되고 있다. Bo.. 웹사이트 제작 4편 - 오픈그래프으로 사이트 알리기 그누보드5 추가한 반응형웹 테마적용시 직접 모바일환경에서 스마트폰으로 테스트를 해야 한다. 만약 기본 그누보드5의 모바일웹으로 뜨는 경우 추가된 반응형웹 테마에서는 기본 기능인 PC와 모바일 2개환경에 맞게 설정된 config.php파일을 리모트사이트(서버)에서 다운받아서(설치시 DB정보등이 기록되있어서 꼭!!!!!! 다운받아서 해야함) 136번 줄의 아래 내용처럼 수정 후 업로드 하면 해결된다. define('G5_USE_MOBILE', false); // 모바일 홈페이지를 사용하지 않을 경우 false 로 설정, 그누보드는 PC와 모바일 공통사용을 기본으로 해서 반응형의 경우는 true를 false로 설정해야 반응형이 바로 동작한다. 웹사이트를 오픈그래프(Open Graph)으로 카카오톡 등 SNS를.. 웹사이트 제작 3편 - 네비 및 내용구성 메뉴를 구성하고 내용을 표현하는 부분들을 구현해봅니다. 테마는 에티 비지느스 무료테마 에서 받은 것을 기반으로 페이지를 구성하겠습니다. https://sir.kr/g5_theme/6648 에티 비즈니스 무료테마 v1.5 > SIR 안녕하세요~ 에티테마 입니다. 지난번에 v1.2 를 배포했었는데 너무 시간이 많이 가서 이제야 업로드합니다. 최대한 빨리 올려드린다고 말씀드린 sir.kr 에디테마 배포파일에는 theme외에 page라는 디렉토리(폴더)를 제공하는데에는 내용들을 수록할 수 있다. 루트인 /html 내에 /pages 폴더 업로드합니다. 링크주소를 기입하는 URL 주소에 대해 우선 절대주소와 상대주소를 알고 가야한다. 절대주소(경로) : 브라우저로 프로토콜을 포함한 URL을 말한다. http://k.. 웹사이트 제작 2편 - 테마변경 설치된 그누보드5의 테마(Theme)는 웹사이트의 레이아웃과 디자인을 담은 템플릿이다. 그누보드5의 테마 공유 게시판에 가보면 다양한 테마들이 있는데... 설치한 버전에 맞는 반응형웹 테마를 통해서 레이아웃과 디자인이 응축되어 포함된 jQuery, Bootstrap등의 외부 플러그인이 연결된 종합된 팩키지로 외관과 기능을 기본 테마를 새로운 테마로 변경해서 전혀 다른 사이트로 변화를 줘보자. 테마(Theme) 추가하기 소개하는 내용을 위 유튜브 채널에 영상으로 강좌를 올렸으니 참고하고 따라한다. 아래 그누보드 공식사이트의 배너나 URL 링크로 들어가서 테마라는 메뉴를 클릭해서 "반응형웹"테마를 받아서 설치해보자! https://sir.kr/g5_theme 그누보드5 테마 > SIR 그누보드, 영카트 개발.. DIV(디비전)태그 총정리 / 슬라이드 외부소스 HTML 구성은 HTML 구조내 네모난 박스형태의 Body(본문)내에 특정한 정보를 소개하기 위한 제목, 단락, 목록 등과 같은 텍스트들과 이미지, 혹은 영상들을 가져와서 본문을 꾸미고, 필요한경우 URL 링크등을 통해 유기적인 구조적 문서를 만들 수 있는 방법을 제공한다. Head에는 CSS, 자바스크립트 등을 포함하거나 Link를 통해 불러 올 수 있는데, 기본이자 전체 구조를 표현하는 DIV(디비전)과 관련 내부 구성요소들의 태그를 총정리해보겠습니다. p 태그에 아래 Lorem ipsum~을 복사해서 사용하세요. Img는 Pixabay의 이미지들을 활용했습니다. > Pixabay Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam .. On Event 전체메뉴(사이트맵) 보기 자바스크립트의 On Event는 크게 onclick, onmouseover, onmouseout 등이 적용된다. onclick onmouseover onmouseout onload 마우스클릭외 마우스를 올리거나, 범위내를 벗어나는 상황에 맞는 전체메뉴 열기원리를 소개한다. CSS 스타일 규정 #navbox{background:#00f;color:#fff;height:90px;} #navbox .logo{margin:0;float:left;padding:0 100px;} #navbox .fLT{float:right;margin-top:30px;} .btn{cursor:pointer;} #subnav{position:relative;left:0;bottom:-90px;height:400px;backgroun.. div 태그 레이아웃 div 태그 레이아웃을 결정짓는 Box model 세로로 펼쳐지는 글씨와 이미지 요소들을 분리된 박스영역내에 표현하는 레이아웃의 기본요소이다. DIV가 레이아웃으로 역할을 할때 주로 사용하는 CSS에는 바깥여백 margin / 안쪽여백 padding / 선 border / 배경 backgrond / 좌우 배치 float / 새로운 시작 clear:both / 보여주는 방식 display: none block inline inline-block 외 다양한 스타일 속성이 존재한다. 디비전 태그 | 디스플레이 속성 | 플롯의 속성 | 플롯의 사용예시 | 클리어 속성 아래 원본파일을 참고하세요.(이미지는 포함되지 않았습니다.) Splash(Intro) 페이지에 사용할 수 있는 Positon 속성1편-절대위치 P.. 원격수업을 위한 비디오 회의 전용솔루션-줌/원격제어 애니데스크 코로나19의 2.5단계가 되면 진행하는. 원격수업을 위한 비디오 회의 전용솔루션-줌/원격제어 애니데스크 사용법을 알려드립니다. ID: 996 116 1120 Pw : 311 01. Zoom 회원이 되다. 처음 줌을 이용하는 경우에는 '줌'이라 검색 후 줌 공식사이트 zoom.us에 크롬으로 접속하고 구글로그인 상태에서 로그인 클릭. 구글계정으로 간단히 로그인하여 회원계정을 만든다. zoom.us/ 비디오 회의, 웹 회의, 웨비나, 화면 공유 Zoom은 모바일, 데스크톱 및 회의실 시스템에서 비디오 및 오디오 회의, 채팅 및 웨비나를 안전하고 편리하게 진행할 수 있는 클라우드 플랫폼을 제공하여 첨단 엔터프라이즈 비디오 통신을 선도 zoom.us 02. Zoom 하다! PC버전 설치 줌을 통해 PC화면을 공.. Web 05. 이미지 스타일(Background:color,url('url') 로고 SVG파일 불러오기 www.w3schools.com/cssref/css3_pr_background.asp CSS background property CSS background Property Example Set different background properties in one declaration: body { background: lightblue url("img_tree.gif") no-repeat fixed center; } Try it Yourself » Definition and Usage The background property is a shorthand property f www.w3schools.com 색상정보를 쉽게 알수 있는 Color Picker www.w3schools... 파워포인트 2016 다운로드 한 파일 <복구 오류> 해결법 파워포인트 2016 다운로드 한 파일 해결법 파워포인트에서 파일메뉴 누르고 제일 아래의 옵션을 클릭합니다. 옵션을 클릭하면 - 보안센터-제한된 보기-인터넷에서 가져온 파일에 대해 제한된 보기 사용을 체크 꺼주세요. 일러스트레이터 Stroke을 이용한 약도 그리기 일러스트레이터 Stroke 옵션을 이용하며 간단한 지도인 약도 쉽게 그릴 수 있습니다. www.youtube.com/watch?v=rQ-F-Mvy8kE 페르소나 만들기-비트맵이미지 벡터화 페르소나 만들기-비트맵이미지 벡터화 www.youtube.com/watch?v=8q6Q_vSQ4LI PSD, JPG시퀀스 불러오기 포토샵 PSD파일을 프리미어 프로에서 Import하는 다양한 방법 Import As를 Sequence로 불러온 후 기본 애니메이션인 계단식 배열의 Frame By Frame 기법으로 영상화하는 과정을 소개합니다. 또한 Timeline에서 Add Track, Delete Track 기능, Program Monitor Pannel의 Setting에서 Play Loop하는 기능도 배울 수 있습니다. youtu.be/_xJFrUlR7nY 3D그래픽의 결과물을 이미지 시퀀스파일을 영상편집하는 방법 시네마4D 등 3D그래픽작업의 결과물을 동영상파일로 내보내기에 많은 시간을 렌더링에 소요하고, 렌더링중 에러가 나는 경우는 난관에 부딪히는 경우가 많은데, 각 프레임을 JPG와 같은 이미지 파일로 렌더링한 경우 아래 그.. 3단 리플렛(포폴활용) 보호되어 있는 글입니다. 프레젠테이션 디자인(포폴활용) 보호되어 있는 글입니다. 일러스트레이터 CC - 회색박스 안보이게 설정하기 일러스트레이터 CC버전부터 이동 및 크기조절시 스마트가이드 역할로 마우스 밑에 회색박스가 보이는 경우 발생한다. 도움을 주는 것이 아니라 방해가 된다. 회색박스를 안보이게 설정하기는 방법이다. 편집-설정 단축키로 접근 ....... Edit-Preferences (C+K) 왼쪽 카테고리 중 Smart Guides 클릭하고 - Measurement Labels Check Out 체크해제한다. OK를 누르면 정상으로 안보인다. 19. 주제별 포트폴리오 정리 보호되어 있는 글입니다. 18. 옥외광고 크리에이티브(02.09/ 재02.15) 보호되어 있는 글입니다. 브랜드 프로모션 광고디자인(썸네일,상세소개) 보호되어 있는 글입니다. 17-디자인 자료화 보호되어 있는 글입니다. 포트폴리오. 뭘 준비해야하나? (소책자 인쇄 / E-Book ) 디자이너로서 취업을 준비하려면 꼭 필요한 것이 포트폴리오(Portfolio)이다. 디자이너 취준생의 이력서, 자기소개서는 형식적이다. 인사담당자는 디자이너를 채용시 포트폴리오를 필수로 보고자 한다. 개인 뿐만 아니라 기업도 영업 및 사업의 실적을 포트폴리오라고 알리는 데 사용하고 있다. 상업적으로 사용가능한 무료서체를 이용해서 작업해야 합니다. 다른 디자이너의 포폴을 참고하자! 막연히 어떻게 만들까? 고민하고 있다면, 선배의 작품을 보라! 다른 디자이너들의 포폴은 좋은 예시가 된다. 다른 디자이너들의 다양한 포폴보기 그린포폴 - 7번 PDF방 - 윤아, 지수 / 소책자형식 / 노트폴리오 종합 - 철순, 지현 , 나현 , 슬기 , 연지 / 핀터레스트 포폴 / 블로그 포폴 포트폴리오는 편집디자인에 유리한 인.. 16. 최종디자인 : 광고디자인 보호되어 있는 글입니다. 15. 시안디자인 개발심화 : 카탈로그 제작완료 보호되어 있는 글입니다. 무료벡터소스-한국문양 무료벡터소스로 제가 펜툴로 그려 보았던 한국 전통문양(무늬, 문, 패턴)을 공유합니다. 상업적인 목적으로 사용해도 됩니다. 14. 시안디자인 개발응용 : 카탈로그 북커버디자인 보호되어 있는 글입니다. 2021년, 디자이너 직군 JOB분석과 포트폴리오 준비 디자이너로서 여러분이 원하는 분야에 취업을 원한다면 잡포털사이트들에서 요즘 채용하는 디자인 분야를 찾아보고, 그 구인업체에서 원하는 디자이너들의 요건을 미리 파악하는 것은 중요하다. Designer Jobs | 구인업체에서 원하는 디자이너 경력직을 많이 채용하는 편이지만, 1년이상 경력이 있는 디자이너들은 철새와 같이 경력을 쌓고 이직을 하거나 몸값이 커져서 연봉이 쎄서 구인과정에서 신입 디자이너들을 채용하는 경우도 있으니 실망하지 말았으면 한다. 이때 자신의 실력을 보여줄 수 있는 포트폴리오를 미리 미리 준비해 놓은 것이 제일 중요하다. ■ 잡코리아 | 대기업계열의 디자이너 구인이 많다. www.jobkorea.co.kr/Search/?stext=%EB%94%94%EC%9E%90%EC%9D%B4%EB%.. 13. 시안디자인 개발기초 : 민속박물관 카탈로그(~10p) 보호되어 있는 글입니다. 캐릭터 디자인 응용형(스케치~그래픽 작업) 대부분의 디자인작업이 마찬가지 이겠지만, 카피하는 것이 아닌 새로운 캐릭터 디자인은 세상에 하나 뿐인 형상을 만드는 것이죠. 아이디에서케치에서 일러스트레이터를 주로 사용하는 그래픽 작업까지 디자인 응용형 만들기를 소개 해드립니다. 연필로 스케치를 하는 느낌을 포토샵의 브러시로 보여 드렸습니다. 밥로스 아저씨처럼은 아니지만, 미력하지만 참고하시면 스케치에 익숙하실 것 같습니다. 스케치 하는 방법을 간략하게 소개합니다. 12. 비주얼아이데이션 적용(교재/평가/혼합형2) 보호되어 있는 글입니다. 캐릭터를 활용한 크리스마스 SNS카드(Free download) 위 곰캐릭터의 Layer는 영상에서는 Frame이 됩니다. Ai 파일 다운로드하여 확인하세요.(상업적인 사용금함) 위 Ai 작업 후 File-Export As...로 내보낸 PSD파일은 아래 첨부했습니다. PSD파일을 다시 포토샵에서 작업한 결과는 아래 그림을 참고하세요. 관련 영상을 보고 따라하실 수 있습니다. 이모티콘 캐릭터 GIF 만들기(포토샵,일러스트레이터) Free GIF; Emoticon Character X-mas Card 이전 1 ··· 14 15 16 17 18 19 다음
