<img> 태그

<img>Tag is a tag that includes images on a webpage.<img>태그는 웹페이지에 이미지를 포함 시키는 태그 입니다.https://pixabay.com/ (Pixapay) is a site that provides images that are freely available without any copyright.https://pixabay.com/ (픽사페이) 라는 사이트는 저작권의 구애 받지 않고 자유롭게 사용할수 있는 이미지를 제공하는 사이트 입니다.Visit Pixabay and download any image.픽사페이에 방문해서 아무 이미지나 하나 다운 받습니다.https://pixabay.com/ko/photos/%EA%B0%9C%EC%9A%94-archidaily-4124262/I downloaded the image here.저는 여기서 이미지를 다운 받았습니다.If you look on.......

<table> 태그

A table tag is a tag that inserts a table into a webpage.<table> 태그는 웹페이지에 표를 삽입 하는 태그 입니다.So if you do this and you print it out on the screen, it's printed like this.이렇게 해서 화면에 출력해보면 이렇게 출력 됩니다.Because the web browser ignores blanking and line changing, it is printed like this.공백이랑 줄바꿈은 웹브라우저가 무시하기 때문에 당연히 이렇게 출력 됩니다.When you make a table, like the li tag in the ul tag, you must also tie the item with the td tag.ul 태그의 li 태그 처럼 테이블을 만들때도 td라는 태그로 항목을 묶어 주어야 합니다.td tag stand.......

<table> 태그 2

Let's look at how you can differentiate tables semantically.테이블를 의미론적으로 구분할 수 있는 방법을 살펴 볼것입니다.There's no function, but semantically the first line means the title.어떠한 기능은 없지만, 의미론적으로 첫 행은 제목을 의미하고,The second and third rows don't have a function, but they mean the content.두번째, 세번쨰 행도 기능은 없지만 내용을 의미 합니다.We need to put that meaning in the source code through tags.이런 의미를 우리는 태그를 통해서 소스 코드에 담아 줘야 합니다.Tie the corresponding parts of the title with the head tag.thead 태그로 제목에.......

<table> 태그3

This time, we will learn how to merge the table.이번엔 표를 병합 하는 방법을 알아 볼 것 입니다.Use rowspan as the property of the td tag.td 태그의 속성으로 rowspan을 사용 합니다.Give two value for rowspan.rowspan의 값을 2를 줍니다.The td will then merge the two rows.그러면 해당 td는 2개의 row를 병합 하게 됩니다.And the td that is merged must be erased.그리고 병합 되는 td는 지워줘야 합니다.Now let's try to merge the total parts.이제 합계 부분을 병합 해보기로 하겠습니다.Use colspan as the property of the td tag.td 태그의 속성으로 colspan을 사용 합니다.Col stands for column.col은 colum.......

<form> 태그

You've used the tag 'form' a lot.form 이라는 태그는 여러분들이 많이 사용해 보셨습니다.form tag is when you log in, write a notice, or buy somethingsform 태그는 로그인을 하거나 글을 작성하거나 물건을 구매할 때It sends the information that you enter to the server.여러분이 입력 한 정보를 서버로 전송 하는 역할을 합니다.To send the information you enter to the server,사용자가 입력한 정보를 서버에 전송 하기 위해서는You need to be able to enter information from the user.사용자로부터 정보를 입력 받을 수 있는 것이 필요 합니다.Then you can use the input tag.그때 input 태그를 사용 할.......

정보를 HTML로 표현 하기

1. Screens to Create1. 만들어 볼 화면We're going to make this screen by html.우리는 html로 이 화면을 만들어 볼 것 입니다.However, html represents information.그런데, html은 정보를 나타냅니다.So I'm going to just make this information of screen by html. 따라서 이 화면에 정보만을 html로 만들어 보겠습니다.2. H1 tag indicating title2. 제목을 나타내는 h1 태그Usually, information that indicates a title is wrapped in h1 tags.보통 제목을 나타내는 정보는 h1 태그로 감싸줍니다.The h1 tag increases the font size.h1 태그는 폰트의 크기가 커집니다.In addition to h1 tags, there are h2, h.......

Semantic TAG

1. Semantic TagWe can give meaning to each information on the tag.It doesn't function at all.우리는 태그에 기능은 없지만, 각각의 정보에 의미를 줄 수 있습니다.Also, you can distinguish each tag by giving meaning.또한, 의미를 부여 하므로써 각각의 태그를 구분 할 수 있습니다.2. 기존의 만든 화면We created the screen above in HTML.우리는 '정보를 HTML로 표현하기' 에서 위 화면을 만들었습니다.3. <header> TagThe fruit of h1 tag exists at the top of the screen, so it can mean 'header'.<h1> 태그로 만들어준 fruit은 화면에서 최상단에 존재 하므로 'header&.......

왜 웹은 발전 하게 되었을까?

1. Why did the Web develop?1. 왜 웹은 발전 하게 되었을까?This page is the one we wrote last time.이 페이지는 우리가 저번에 작성했던 페이지 입니다.I will attach a link to this page like the actual homepage.실제 홈페이지 처럼 이 페이지에 링크를 달아 보겠습니다.Create a page_apple.html file.page_apple.html 파일을 만듭니다.Create a page_orange.html file.page_orange.html 파일을 만듭니다.Create a page_banana.html file.page_banana.html 파일을 만듭니다.Create a page_pineapple.html file.page_pineapple.html 파일을 만듭니다.The title <h1>Orange</h1 추가 adds a link.제목이 되는 <h1>Oran.......

기본 CSS 사용법

1. CSS in charge of style1. 스타일을 담당하는 CSSCss stands for Cascading Style Sheet.Css는 Cascading Style Sheet의 약자 입니다.You don't have to try to understand Cascading yet.아직은 Cascading을 이해하려고 하지 않아도 좋다.The focus here is on Style.여기서 주목해야 할 부분은 Style 이다.CSS is in charge of style and design.CSS는 Style이나 Design을 담당 하고 있다.html delivers information and css provide style.html은 정보를 전달하고, css는 스타일을 제공 합니다.You can see that the basic design is applied to the 'h' tags.h 태그들에는 기본 디자인이 적용되어 있는것을 확인.......

box 모델

The id in the li tag can confirm that selected is added.li 태그에 id는 selected가 추가된것을 확인 할 수 있습니다.By adding 'selected' in the css and putting '#' in the front,css안에서 'selected'를 추가 해주고 앞에 '#'을 붙여줌 으로써,You can modify the style on a tag with id selected.id 값이 selected인 태그에 style을 수정 해 줄수 있습니다.By giving a 'padding: 30px', you can see that the space between the box and the letter is 30px apart.padding: 30px을 줌으로써, 박스와 글자 사이에 간격이 30px 떨어지는 것을 확인 할수 있습니다.The reason t.......

CSS float

1. What should I do if I have a blank space?1. 여백이 생기면 어떻게 해야 할까?The letters next to the img tag have as much space as the image.img 태그 옆에 글자들이 이미지 만큼의 여백이 생겼습니다. In this case, there is a way to make the text rise as high as the margin.이 경우 텍스트가 여백 만큼 위로 올라오게 하는 방법이 있습니다.2. float : leftBy giving 'float: left', you can see that the text is raised next to the image in the right margin.float: left 를 줌으로써 오른쪽 여백 부분에 텍스트가 이미지 옆으로 올라오는 것을 확인 할 수 있습니다.3. float : rightImg Tag was g.......

html 레이아웃에 css 입히기 기초

1. Let's put css on a homepage made of early html.1. 초창기 html로 만든 홈페이지에 css를 입혀 봅시다.We're going to put css on the left html and make it look like the right.우리는 왼쪽 html에 css를 입혀서 오른쪽 처럼 만들 것 입니다.2. Modifying the Header2. header 수정First, let's modify the content called Fruit.먼저, Fruit라는 content를 수정해 봅시다.The Fruit is wrapped in a header tag.Fruit은 header 태그로 감싸져 있고,1. The bottom border has been added.1. 하단 테두리가 추가 되었 습니다.2. It has been added as a suitable margin.2. 적절한 여백으로 추가 되었 습니다.......

CSS 스타일 삽입 방법

Let's apply the css we've done so far to other pages.지금까지 했던 css를 다른 페이지에도 적용해 보겠습니다.Open the page_apple.html page.page_apple.html 페이지를 열고,Copy and paste the above written css.위에 작성한 css를 복사 한 후 붙여 넣기 합니다.Open the page_orange.html page.page_orange.html 페이지를 열고,Copy and paste the above written css.위에 작성한 css를 복사 한 후 붙여 넣기 합니다.Likewise마찬가지로, Copy and paste page_banana.html, page_pineapple.html as well.page_banana.html, page_pineapple.html 도 css를 복사 붙여 넣기 합니다.1. We've been asked to increas.......

<p> 태그

1. Paragraph abbreviation p tag1. Paragraph의 줄임말 p 태그p tag is short for paragraph.p 태그는 paragraph의 줄임말 입니다.Paragraph means paragraph .paragraph은 문단 이라는 뜻 입니다.A red square means a paragraph.빨간 네모칸이 단락을 의미 합니다.Separate the paragraphs above the html,html 상에서 위처럼 단락을 구분해 넣고,If you check it out in your Internet browser,인터넷 브라우저에서 확인 해보면Paragraphs are not distinguished in the browser.브라우저 상에서는 단락이 구분 되지 않습니다.Because html ignores line break (dedication).왜냐하면 html은 줄바꿈(들여쓰기)를 무시합니다.Line c.......

<br> 태그

<br> tag is short for 'A Forced Line-break.''br' 태그는 'A forced line-break'의 줄임 말 입니다.<br>Tag is called 'void element' because it is called a 'tag without content'.<br> 태그는 '내용이 없는 태그'라고 해서 void element 라고 한다.Therefore, <br>tags do not have closed tags.따라서 <br>태그는 닫히는 태그가 존재 하지 않는다.You can see that the <br> tag has only changed one line.<br>태그는 한줄만 줄바꿈을 한것을 볼 수 있습니다.If you want more line, add the <br> tag as many line.......

4강

* 만들어 볼 레이아웃https://webstoryboy.github.io/webd/webd03.html* index.html* style.css

7강

* 만들어 볼 레이아웃* 세로 메뉴 유형1https://webstoryboy.github.io/webd/webd05.html* index.html* style.css

8강

* 만들어 볼 레이아웃https://webstoryboy.github.io/webd/webd06.html* index.html* style.css

9강 탭 메뉴 레이아웃

* 오늘 만들어 볼 레이아웃https://webstoryboy.github.io/webd/webd07.html* index.html* style.css

10강 롯데월드 홈페이지 만들기

* 롯데월드 홈페이지 만들기

포토샵, 일러스트, 드림위버 설치

1. 기존 Adobe 파일 모두 삭제- C:\Program Files (x86)\Adobe- C:\Program Files (x86)\(Adobe로 시작 되는 모든 파일)- C:\Program Files\Adobe- C:\Program Files\(Adobe로 시작 되는 모든 파일)Adobe 포함, 위 경로에 해당하는 모든 폴더 삭제 먼저 해주실게요.2. 인터넷 연결을 모두 꺼주세요.3. Adobe 파일 설치아래 사진 처럼 (이 경로는 컴퓨터 마다 다름)\Adobe CS6 Master Collection_LS16\MasterCollection_CS6_LS16\Adobe CS6이 경로에 있는 Set-up 파일을 설치 해주세요.설치 시에 [옵션] 화면에서 설치하고 싶은 파일(일러스트, 포토샵, 드림위버 등)을 선택 한 후 설치 버튼 클릭!4. amtlib.dll 파일 덮어쓰기1. 설치가.......

HTML / CSS Basic

What we learn in class is HTML and CSS.우리가 수업 시간에 배울 내용은 HTML 이라는 것과 CSS 라는 것 입니다.It's important what you can make with HTML and CSS.HTML 과 CSS로 무엇을 만들 수 있는지가 중요하겠죠.Create a homepage like Google,Google과 같은 홈페이지를 만들거나,You can create a homepage like Youtube.Youtube와 같은 홈페이지를 만들 수 있습니다.You can't just make all these things with Html and css.Html과 css만 가지고 이런 것들을 모두 만들 수는 없습니다.With just Html and css, we can only create information from our visible text and images and styles that make this informati.......

github으로 hosting 하기

1. github으로 Publishing 하고 싶은 Repository 만들기github으로 repository를 만들고 그 안의 hosting 하고싶은 홈페이지를 만들어 주세요.2. Settings - GitHub Pages 변경Settings - GitHub Pages - Source 라는 곳이 None 으로 되어 있을 겁니다. 그걸 master branch 로 수정 하면 "Your site is ready to be published at 'https://(깃헙계정).github.io/(repository이름)' " 에 있는 주소가 생성 된것을 확인 할수 있습니다.그러면 해당 주소의 시작페이지인 'https://(깃헙계정).github.io/(repository이름)/index.html' 이 주소로 이동 하시면 자신의 홈페이지가 hosting 된것을 확인 할수 있.......

HTML <a> Tag

Screen to make만들어 볼 화면Today, We're going to make a screen.우리는 오늘 이와 같은 화면을 만들어 볼 것 입니다.The most important goal of HTML is the role of hypertext.HTML(Hyper Text Markup Language)의 가장 중요한 목표는 하이퍼텍스트의 역할 이다.Hypertext means that documents are linked to documents.하이퍼텍스트는 문서와 문서가 연결됨을 의미 한다.We will learn about a tag that acts as a hypertext.하이퍼텍스트 역할을 하는 a 태그의 대해서 알아 볼것 입니다.You will learn that documents are connected through a tag.a태그를 통해서 문서들 끼리 연결 되어있음을 배울 것 입니다. Stru.......

HTML list TAG

Screen to make만들어 볼 화면This time, we will learn how to express the list in html.이번 시간에는 html에서 list를 어떻게 표현 할 수 있는지에 대해서 공부해 보겠습니다.When expressing list, it is typical.list를 표현 할때는 대표적으로 Like this,이것 처럼,1. yellow 2. green 3. blue List with order and순서가 있는 list 와• cat• dog• lionlist without order순서가 없는 listI can express it in two ways.두가지로 표현을 할 수 있어요.And check the top of your browser.그리고 브라우저에 가장 상단을 확인 해보세요.We can check the title.제목을 확인 할 수 있어요.Let's learn how to change the titl.......

HTML <!DOCTYPE html> TAG

1. The creator of HTML is Tim Berners-lee.1. HTML의 창시자는 팀버너스리 입니다. (Tim Berners-Lee)2. W3CW3C International Organization is an organization that systematically manages HTML.- W3C 국제 기구는 HTML을 체계적으로 관리하는 기관 입니다.The W3C International Organization is an organization that sets the standard for HTML.- W3C 국제 기구는 HTML의 표준을 정하는 기관 입니다.Timbernery is the president of the W3C International Organization.- 팀버너스리는 W3C 국제 기구의 의장 입니다. 3. <!DOCTYPE html> TAGIf you look at the top of the <html> tag, you can see the <!DOC.......

시각장애인은 어떻게 웹을 탐색 할까?

1. How do blind people navigate the Web?1. 시각장애인은 어떻게 웹을 탐색 할까?There are users around us who explore the web and mobile in a slightly different way than normal computer use.우리 주변에는 일반적인 컴퓨터 사용과는 조금 다른 방식으로 웹과 모바일을 탐색하는 사용자들이 있습니다. How do blind people navigate the web and get information among those diverse users?그 다양한 사용자 중에서 시각장애인들은 어떻게 웹을 탐색하고 정보를 파악할까요?- In general, blind people use screen readers (screen readers) and keyboards to navigate information.- 일반적으로 시각장애인은 화면 읽기 프로.......

float속성, clear속성, after속성

* clear 속성float 속성으로 태그를 부유시킨 이후 문서의 흐름을 제어 하기 위해 쓰입니다.방향에 따라 3가지 속성을 사용할 수 있습니다.left : 좌측 부유 제거right : 우측 부유 제거both : 양쪽 모두 제거* float 특징float 속성을 적용한 태그는 붕 뜨며 정상적인 요소로 처리가 안되기 때문에아래에 나타나야 하는 내용이 부유된 태그의 중간에 나타나는 문제 및 상위 태그의 높이가 없어지는 문제 등이 발생하게 됩니다.* 예제* 출력 결과 * 예제* 출력 결과* 가상선택자 after, clear 속성위 예제에서 처럼 float 다음에 clear:both 속성을 따로 삽입해야 하는 불편함이 있습니다.따라서 가상 선택자 'after'를 사용하.......

display 속성

* display 속성display 속성은 요소를 어떻게 보여줄지를 결정 합니다.* 4가지 속성- none : 보이지 않음- block : 블록 박스, width, height, margin, padding이 적용 됨.- inline : 인라인 박스, content 만큼만 공간을 차지 한다. width, height, margin, padding이 적용되지 않는다.- inline-block : block과 inline의 중간 형태, inline 처럼 content만큼의 공간을 차지 하지만, width, height, margin, padding이 적용 가능 하다.* none 속성요소를 렌더링하지 않도록 설정 합니다. visibility 속성을 hidden으로 설정한 것과 달리,영역도 차지하지 않습니다.* 예제* 출력 결과* block 속성div, p, h, li 태그 등이 이에 해당 합니.......

position 속성

- relative : 원래 있던 위치를 기준으로 좌표를 지정 합니다. 자신의 원래 위치는 자리를 차지하고 있어, 다른 태그가 침범 할수 없습니다. absolute 와 달리 block으로 가로를 다 차지 합니다.- absolute : 절대 좌표와 함께 위치를 지정해 줄 수 있습니다. 자신의 위치는 자리를 차지 하지 않아, 다른 태그를 침범 할수 있습니다. inline으로 content 만큼 자리를 차지 합니다.- static : 기본값, 다른 태그와의 관계에 의해 자동으로 배치 되며, 위치를 임의로 설정해 줄 수 없습니다.- fixed : 스크롤과 상관 없이 항상 문서 최 좌측 상단을 기준으로 좌표를 고정 합니다.- inherit : 부모 태그의 속성값을 상속 받습니다.좌표를 지정 해.......

px, em, rem 단위 종류

* 예제* 출력 결과body 태그에 em 값을 이용해 폰트 사이즈를 지정하면,body 태그에 자식 요소들은 body 폰트 사이즈에 영향을 받습니다.따라서, body의 14px과 div의 1.2em이 곱해져 14px * 1.2 = 16.8px 이 되었습니다.그런데, 여기서 em으로 정의한 폰트 사이즈를 각각의 자식에 선언하면 어떤 일이 생길까요?같은 css를 적용한 동일한 코드를 추가해 보았습니다.각각의 div는 각 부모의 폰트 사이즈를 상속 받아 점점 더 커지게 됩니다.* 예제* 출력 결과이것은 어떤 경우엔 바람직하겠지만, 대부분의 경우, 단순하게 단일 사이즈로 표현 하기도 하지요.이런 경우 바로 rem 단위를 사용 하면 됩니다.rem의 'r'은 바로.......

그래프 자료구조

무방향 그래프방향 그래프가중치 그래프* 그래프의 표현1. 인접 행렬2. 인접 리스트* 방향 그래프의 표현* 가중치 그래프의 표현- 가중치 그래프의 인접행렬 표현

BFS (Breadth First Search) 너비우선탐색

* 탐색 그래프의 모든 노드들을 방문하는 일* 대표적인 두 가지 방법1. BFS : Breadth First Search, 너비 우선 탐색2. DFS : Depth First Search, 깊이 우선 탐색* BFS동심원 형태로 인접한 노드들을 차례대로 탐색 하는 방법 입니다.너비를 중심으로 탐색 하는 방법 입니다. BFS Example1 BFS Example21. L0 = { S }, S는 출발 노드2. L1 = L0 의 모든 이웃 노드들3. L2 = L1의 이웃들 중 L0에 속하지 않는 노드들.............4. Li = Li-1의 이웃들 중 Li-2에 속하지 않는 노드들* 큐를 이용한 BFS 구현1. check the start node;2. insert the start node into the queue;3. while the queue is not empty.......

DFS (깊이 우선 탐색)

* 탐색그래프의 모든 노드들을 방문하는 일* 대표적인 두 가지 방법1. BFS : Breadth First Search, 너비 우선 탐색2. DFS : Depth First Search, 깊이 우선 탐색* DFS맹목적 탐색 방법의 하나로 출발 노드로 부터 다음 레벨의 자식 노드를 탐색하고 또 그 다음 자식 노드를 탐색 하는 방법 입니다. 깊이를 우선으로 탐색 하는 방법 입니다. Example1 Example21. 출발 노드에서 시작 합니다.2. 현재 노드를 visited로 mark 하고 인접한 노드들 중 unvisited 노드가 존재하면 그 노드로 갑니다.3. 2번을 계속 반복 합니다.* DFS 동작 순서위와 같은 그래프가 있을때 DFS로 탐색 한다면 아래 순서대로 노드를 방문 합니다.① 출발노드 1을.......

HTML CSS Quickly Basic

1. Components of Web documents1. 웹문서의 구성요소These portal sites and web documents are made up of html and css.위와 같은 포털 사이트나 웹문서들은 html 과 css 로 이루어져 있어요.Hyper Text Markup Language (Html) creates a framework for Web documents.html (Hyper Text Markup Language)은 웹문서의 뼈대 구조를 만들고It is made by dressing the style of css.css (Cascading Style Sheet) 라는 스타일을 입혀 만들어 집니다.The left side of the picture below is a stylized document, and the right side can only identify the left side of the html frame structure.아래 사진 중 왼쪽은 스타일을 입힌 문서.......

2강

* floatfloat : left로 설정 하면 해당 요소의 height 값이 0으로 되어 버린다.https://www.instagram.com/p/BwvO2_7haJi/* index.html* style.css* 최종 결과 화면

3강

이번시간에 만들어 볼 레이아웃 입니다.* index.thml* style.css

포토샵 displace 기능

이 타월 위에 텍스트를 넣을려고 한다.하지만 타월에 주름 텍스쳐를 표현하기 쉽지 않다.텍스쳐를 표현하기 위해서는 흑백의 배경 이미지가 필요하다.흑백으로 만드려면 ctrl + shift + u => deSaturation(기능)이렇게 흑백 배경 이미지를 만들고~흑백 배경이미지에 가우시안 블러를 넣어 주고 저장해 둡니다.그리고 기존 흑백 배경 이미지가 아닌 텍스처를 처리하고 싶은 원본 소스로 가서Filter - Distort - Displace 선택!Ok를 선택하고 아까 저장 해둔 흑백 배경 이미지를 불러 옵니다!그러면 텍스쳐 처리 완성! 거기에 blend - screen 을 활용하면 더욱 실제 제품과 같은 텍스쳐를 만들어 내실수 있습니다!

포토샵 단축키 등록

프리미어 설정

1초당 15장 이상이면 자연스럽게 보임영화에서는 1초당 60장(프레임)우리나라 규격 29.97frames/seconds요즘엔 Square Pixels 1대1 비율로 찍음필드는 Progressive 방식으로 설정 우리나라 규격방송용에 경유 Drop-Frame Timecode 를 사용하지만그외 유튜브 등등 에 경우에는 non-drop-frame-timecode 로 해야함.단축키( + ) 줌 ( - ) 줌 아웃

프리미어(premiere) 단축키

• 프로젝트 패널에서 더블 클릭해서 영상 불러오기• 편집기준선에 맞춰 영상 자르기 Ctrl + K• Shift + delete (Ripple delete/잔물결 삭제 단축키)• 키보드 + (플러스) 누르면 타임라인 패널 화면 확대• 키보드 + (마이너스) 누르면 타임라인 패널 화면 축소<소스수정하기>• 영상을 더블 클릭하면 영상소스 패널모니터에 보여짐• Mark in 단축키 I• Mark out 단축키 O• Insert ,(콤마)• 소스영상 재생 단축키 L• 소스영상 재생정지 K• 소스영상 역재생 단축키 J (두번 누르면 2배…)• Ctrl + Shift + I (in점 지우기)• Ctrl + Shift + O (out점 지우기)수정한 소스를 타임라인에 드래그 해서 옮긴다

에프터 이펙트 (after effect) 단축키

1) 1 프레임씩 움직이기 : Ctrl + 좌/우 방향키2) 10프레임씩 움직이기 : Shift + Ctrl + 좌/우 방향키3) 영상 제일 앞/뒤로 가기 : Fn + 위/아래 방향키4) 영상자르기 shift + Ctrl + D5) 재생바 앞쪽 자르기 Alt + [6) 재생바 뒤쪽 자르기 Alt + ]7) 애니메이션 버튼보기 U8) 다음 키프레임으로 이동 K9) 이전 키프레임으로 이동 J10) 포지션 단축키 : p11) 앵커포인트 : a12) 스케일 : s13) 로테이션 : r14) 오파시티 : t15) shift + ctrl + 방향키(->) : 10 프레임 이동16) ctrl + alt + f : 이미지를 영상 composition에 일치==> 1920영상을 1280영상에 적용 해야 할때만 씀, 아니면 찌그러짐17) alt + [ : 앞자르기.......

에펙으로 영상 이어 붙이기

에펙 영상 자르기(Split) 단축키 정리

에프터 이팩트 텐션 그래프

모션 그래픽은 텐션감이 핵심이다!다음과 같이 키프레임을 선택해서!F9 번을 눌러 키프레임을 Easy Easy로 만들어 줍니다.아래 2그래프 차트를 클릭해 줍니다.그리고 나오는 그래프를 위 그림 처럼 S자 모양으로 쫀득하게 만들어 줍니다.

에프터 이펙트 넘버링(numbering)

Effects & Presets에서 numbers 검색!numbers를 해당 object에 드래그 엔 드랍!폰트체 설정 하고 정렬 해주고!Value / Offset / Randor 스탑워치를 이용해서 애니메이션을 줄 수 있습니다!

에프터 이펙트 타일 기능(CC RepeTile)

Effects & Presets 에 tile (타일) 검색!타일 기능을 추가 하고 싶은 objects에 넣어주기!Expand Right / Left / Down / Up 의 있는 값을 수정!변신!

에프터 이펙트 트랙커(Traker)

영상을 보면서 트랙커(Tracker)를 삽입 할 영상 클릭!트랙 모션(Track Motion) 클릭!Track Point 가 생기고 첫번째 사각형으로 트랙킹 할 위치를 잡아주고!두번째 사각형으로 더 넉넉히 잡아 줍니다!그리고 플레이 버튼을 누르면서 Track Point가 벗어나면 잡아주고, 벗어 나면 잡아 주고를 반복 합니다.영상의 질에 따라서 트랙 포인트가 잘 잡히기도 하고 못 잡기도 합니다. Track Point가 도망가지 않도록 다 잡았다면, New -> Null Object 를 만들어 줍니다.Null Object에 Track Motion을 넣어 줄 겁니다.Apply 누르면 트랙킹 적용 완료!!이런식으로 Null Object에 p를 눌러 position이 적용 된것을 볼수 있습니다!https://youtu.be/0tw.......

텍스트 몰핑 (Morping)

alt + shift 를 누르고 도형으 그려야 path 가 생긴다

텍스트 그림으로 취급하기 에펙 (After Effect)

먼저 글자를 써줍니다 LIGHT그리고 텍스트에 오른쪽 버튼을 클릭해서 Create Masks from Text를 클릭 합니다.텍스트 레이어 위로 '텍스트 Outlines' 라는 레이어가 하나 생깁니다.그리고 그 레이어를 속성으로 들어가 보면 Masks에 글자 하나 하나에 해당하는 마스크가 생겼습니다.