전체 글 (468) 썸네일형 리스트형 CSS3 background 색상과 이미지의 배경처리(포터블-컬러픽커와 다크네이머) CSS3에는 배경을 처리하는 종합된 background와 가 있다. 이들을 이용해서 색상과 이미지의 배경처리하는 방법들을 소개한다. https://www.w3schools.com/css/css_background.asp CSS Backgrounds CSS Backgrounds The CSS background properties are used to add background effects for elements. In these chapters, you will learn about the following CSS background properties: background-color background-image background-repeat background-attachment backgr ww.. 그래픽작업용 액션(Action) - 포토샵,일러스트 그래픽작업용 액션(Action) - 포토샵,일러스트 샘플을 공개합니다. HTML+CSS 중급 - 하이퍼링크 기본과 이미지맵 쉽게 코딩하기 텍스트보도더 설득력 있는 시각적인 이미지가 삽입을 통해 전달력있는 웹문서를 만들 수 있습니다. 이미지 태그는 상대경로의 현재 웹문서와 연관된 폴더(디렉토리)를 통해 보여지거나, 프로토콜까지 포함된 외부 이미지의 파일경로를 포함함 절대경로로 연결된 이미지를 표현하는 것을 기본으로 합니다. https://youtu.be/QzI6FUC5UgQ?t=1326 세상을 연결하는 앵커태그 글,이미지,박스모델에 페이지 연결기능을 목적으로하는 하이퍼링크는 일명 앵커태그(anchor)라고 한다. 페이지 연결 외에도 현재 문서내 상하이동 기능(위키백과같은 원페이지), 다운로드기능, 전자우편-전화-문자(스마트폰),회원가입등 프로그램기능 수행한다. Visit W3Schools.com! 전화 및 문자와 메일보내기에도 적용된다. 전.. HTML+CSS 중급 - 표(table) 태그와 스타일 표는 과거 웹표준이전인 html4에서 레이아웃의 방법으로 표현하던 예인데, 기본이 테두리가 없어서 T자형 구조에 원하는 대상을 배치할때 주로 사용하였습니다. 현재 html5에서는 레이아웃이 아닌 '일정표'등 일반적인 표사용에 대해서 소개하겠습니다. HTML Tables를 종합해서 배울 수 있는 w3schools.com 표는 table tr td 3개를 기본으로하여,줄(가로 행,row), 칸(세로 열,column)으로 구분된다. 필요시 td대신에 맨위에 머릿글표현을 위해서 th를 사용하기도 한다. th는 상단외에 좌측에도 표현가능하다. HTML Tables HTML Tables HTML tables allow web developers to arrange data into rows and columns. .. After Effects 심플한 아이언맨 자비스 카운터 애프터이펙트의 Trim Path, Scale, Rotation, Dashed line, Layer Style 등을 이용해서 심플한 아이언맨 자비스 카운터를 제작하는 방법을 소개합니다. 또한 튜토리얼에 사용한 After Effects cc2020 Project File을 제공합니다. https://youtu.be/KeRuGZ9QBcs ▼Download Project File YouTube Cover Design W3C vs Fontawesome 특수기호와 폰트어썸 https://dev.w3.org/html5/html-author/charref Character Entity Reference Chart dev.w3.org 윈도우즈에서 특수문자 입력이 아닌 찾아보기 http://oknok70.woobi.co.kr/special/ 특수문자·심볼 리스트 oknok70.woobi.co.kr 유튜브영상 커버디자인 템플릿 공개 영상의 미리보기가 생명이다! 흥행을 꿈꾸는 개봉영화도 화보촬영에서 색상과 로고타이프(글씨)까지 한장의 포스터 디자인에서 스토리텔링을 한다! 제자로 부터 교수님은 영상표지를 눈에 띄게 왜 안만드세요?라는 질문을 받은 적이 있습니다. 편집할 시간도 없어 걍 올리던 차였는데... 뜨끔했습니다. 2002년부터 지면으로 표현하는 출판인쇄분야의 편집디자인을 해본 저로는 광고선전효과가 지면디자인에서 부터 시작된 다는 것도 알고 있었지만, 바쁘다는 핑계로 커버디자인 없이 올렸습니다. 그 계기로 다시 영상을 꾸며주는 디자인을 모아서 템플릿으로 공개하게 되었습니다. 유튜브영상의 포스터 - 미리보기 썸네일 디자인 템플릿 템플릿형태의 디자인으로 통일성과 일관된 디자인을 섹션잡지처럼 만들어 보기로 결심하고 아래와 같이 디자인을.. HTML+CSS 기초 - 글씨관련 태그들 Chapter 01. 웹브라우저와 편집기, 기본코딩 실제 스마트문화앱(모바일 웹 앱)을 제작하기 위한 기초 첫시간으로 웹분야1위 도서로 알려진 " HTML5+CSS3 웹표준의 정석" 을 줌을 통한 쌍방향 학습의 부교재로 선정하여 쌍방향학습하는 내용을 공개합니다. 코딩을 처음하는 분들에게 추천하며 교재를 참고하되, 교재없이 독학도 영상을 참고하면 가능합니다. Chapter 02. HTML기초와 Head문에 삽입되는 것들 HTML문서는 본문에 대부분 보여지는 내용을 Body태그내에 구성한다. HTML을 처음 배우는 분들은 Head문에는 title이 웹문서를 브라우저로 보는 타이틀만 보여지는 것으로 알 수 있는데, Head문에도 상당히 두뇌같은 복잡한 태그들이 들어가서 궁금해 하는 분들을 위해 정리해본다. 저.. 첨부자료10mb에 맞춰 PDF압축하기 기획서를 클라이언트에게 볼수 있게 PPT파일을 파워포인트에서 PDF로 내보내는 것이 일반적입니다. 메일이 아닌, 사내인트라넷 등의 게시판에 자료첨부시 10mb로 용량을 제한하면 자료가 첨부가 안나는 에러가 나는 경우가 있습니다. 이럴 때 아래링크는 첨부자료10mb에 맞춰 PDF압축하여 첨부할 수 있는 유용한 웹사이트 이니 작업시 활용바랍니다. https://www.ilovepdf.com/ko/compress_pdf 온라인으로 PDF 파일을 압축하세요. 같은 품질의 PDF지만 더 작은 크기의 파일 동일한 품질이지만 더 작은 파일 크기를 가진 PDF 파일을 위해 압축하세요. 온라인에서 쉽고 무료로 PDF 파일을 압축하고 최적화하세요. www.ilovepdf.com 위에서 소개한 용량을 줄이는 PDF압축외에 .. 픽사베이 아티스트 - 영상과 일러스트 픽사베이에 독특한 멀티미디어 소스를 공개한 작가들을 알아보는 시간을 가져본다. 첫 소개하는 작가는 padrinan은 멕시코의 아티스트이다. 예술적인 비디오 클립들이 주된 푸티지로 영상제작에 응용할 만한 소스를 상당히 많이 배포하고 있다. https://pixabay.com/ko/users/creozavr-2567670/ 아래 태극기는 블랜드모드로 활용가능한 영상소스를 제공하는데, 클릭하면 해당 URL로 이동합니다. https://pixabay.com/ko/users/padrinan-1694659/?tab=videos&pagi=6 https://pixabay.com/ko/users/padrinan-1694659/?tab=videos&pagi=5 크로마키로 김밥(초밥)이 떨어지는 영상소스도 제공합니다. Click Green Screen (Free Footage) 크로마키-클릭하는 효과영상을 커서, 손 2개 버전으로 공개하니 무료로 사용하셔도 됩니다. 클릭효과음은 아래 별도 afx_click.mp3파일을 활용하세요. Click Green Screen Footage ▼ Download Audio Effect - Click 지지직~ 글리치 효과 https://youtu.be/PQILJh8QrCQ 액션장렬 일러스트 - 아치와 씨팍(Aachi & Ssipak) 액션이 장렬하는 일러스트가 돋보이는 2006년 한국애니메이션 "아치와 씨팍(Aachi & Ssipak)"은 욕설과 액션이 장렬한다. 원작은 플래시 버전이 었는데, 영화화 하면서 극장에서 선보였다. 일본애니메이션에서도 볼 수 없는 독특한 액션은 해외에서도 평이 좋다. https://youtu.be/ZUJ0D5qFqzg 류승범, 임창정, 마왕 신해철이 더빙한 아치와 시팍의 나무위키 설명이다. https://namu.wiki/w/%EC%95%84%EC%B9%98%EC%99%80%20%EC%94%A8%ED%8C%8D 벡터모양만들기-열쇠(Key) 포토샵에서 벡터모양만들기-열쇠(Key) GTQ 포토샵 - 쉽게 Shape 열쇠 그리기 https://youtu.be/OaOZWuAZWk4?list=TLPQMDIwODIwMjE8X_GHvh74dQ 일러스트레이터로 다양한 벡터 쉽게 그리기 (포토샵,파워포인트,폰트어썸) https://youtu.be/fy5F4SWIux0 https://fontawesome.com/ Font Awesome The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options. fontawesome.com 넌리니어 에디팅, 가편집과 종합편집, 스토리텔링 프리미어 프로 등 디지털 영상편집 프로그램을 활용하여 비선형(Non-Linear)방식으로 편집하는 영상제작 및 편집과정은 크게 가편집과 종합편집(마스터편집)으로 구분한다. 가편집과 종합편집 가편집이란 제작 콘셉트 및 스토리보드에 기반으로 촬영하거나 수집(구매)한 영상들을 일련의 순서로 배열하고 기본적인 요소들을 추가하고 제작하는 것으로 종합편집(마스터편집) 전에 사전작업하는 영상편집과정이다. 마스터편집이란 감독(PD)의 연출 및 지시에 따라 최종편집, 효과 삽입, 자막 애니메이션 추가, 음향 추가 등 최종적인 종합편집하는 과정이다. Non-Linear Video Editing (NLE) 비선형(Non-Linear)편집이란 파일형태로된 디지털 비디오(이미지), 오디오를 활용하기 때문에 품질이 뛰어나고, 인.. 심볼로 활용 가능한 캐릭터의 표정 대표적인 벡터그래픽 프로그램인 일러스트레이터에서 오브젝트(Object, 개체, 물건으로 선택한 대상을 의미함)들 중에서 기본이 되는 도형,선 등 쉐이프(Shape)에서 필요에 의해서 묶어놓은 그룹(Group)이란 오브젝트의 신분과도 같은 레벨이 있는데... 얼굴표정과 같이 등록하고 교체하고 수정가능한 오브젝트는 일러스트레이터에서는 당연히 심볼을 사용해야 합니다. 심볼외에도 팔,다리 같은 몸의 동작에 활용가능한 아트브러시도 같은 역할을 하지만 아래 캐리터 표정에 활용할만한 소스가 충분히 활용되었으면 합니다. 아래는 다양한 인물의 표정이 담겨있는 자료이며, 저작권 위반사례이니 개인적인 활용만 하시길 바랍니다. 2D그래픽 자격증과 포트폴리오의 차이 자격증은 이력서 한줄,한줄 본인의 스팩을 채우는 하나의 강력한 아이템을 장착하는 것이다. 그래픽관련 자격증은 국내와 국제 자격증으로 구분되는데, 취업을 준비한다면 필히 자격증 취득을 해야한다. 2D그래픽 GTQ자격증을 취득하자. 지티큐 자격증을 취업전에 취득하자! 아래는 지티큐 그래픽 기술자격의 2개프로그램인 포토샵과 일러스트의 취득방법을 소개하는 별도의 게시물을 참고해서 자격증을 취득하고 이력서에 2줄의 스팩을 만들어 보자. 자격증시험은 정해진 출력형태 대로만 만들어라. 관련분야의 자격증을 취득하는 것은 시험준비를 통해 일반적이고 특정한 조건에 맞는 그래픽작업을 경험하여 폭넓게 그래픽프로그램을 다루는 능력을 키울 수 있다. 지티큐는 매월 마지막 토요일 자격시험이 있어서 필히 취득해야하는 자격증이다. h.. 반응형웹 플러그인 - 부트스트랩과 제이쿼리 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... Web 04. Layout을 위한 디비전태그<div> 일반적으로 여러분이 사용하는 글,그림 등의 요소들은 무조건적으로 아래로 내용이 펼쳐집니다. 어떤대상은 테두리(border)를 CSS 스타일로 제작하는 방법을 소개합니다. 그외 수평선, 제목1dls , 이미지에도 Border-radius를 적용하는 전체적인 방법을 동영상과 함께 아래 소스를 공유합니다. About me(Profile) Portfolio Contact HOME 파워포인트 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와 같은 이미지 파일로 렌더링한 경우 아래 그.. 이전 1 ··· 10 11 12 13 14 15 16 다음
