전체 글 2592

프리미어 프로 : 비디오 전환 효과 - 나선형 상자

저번에 조리개 적용해봤는데 그 나물에 그 밥이라 지우기로 넘어갑니다. 오늘은 나선형 상자를 적용해볼게요. 이름으로 봐서는 블록이 나선형으로 돌돌 돌아가면서 다음 클립으로 전환될 것 같습니다. 근데 글을 쓰다보니 이미 해봤으면서 모른척하네요. 안 그럴게요. ㅡㅡ; ▲ 비디오 전환 효과 - 지우기 - 나선형 상자를 선택합니다. 참고로 효과 옆에 두 개의 아이콘이 있는데 저건 그래픽 카드의 종류에 따라 가속화를 쓸 수 있다는 뜻입니다. 맞나 ㅡㅡ? 몰라... ▲ 효과를 잡아서 드래그 드롭으로 놓으면 됩니다. 기본은 정중앙에 놓아집니다. 이건 원하는데로 앞 클립의 끝이나 뒤 클립의 처음에 놓을 수 있고 효과 컨트롤 패널에서 자유롭게 놓을 수 있습니다. ▲ 이번 효과도 크게 디테일하게 조절할 수 있는 부분이 없네..

CSS 외곽선 outline

외곽선은 컨텐츠를 강조하고 싶을 때 쓴다. outline은 기본 borber와 쓰는 방법이 거의 동일하다. 그러니 border에 관한 글을 참고하자. 2019/10/28 - [웹코딩 어려워/· CSS] - CSS 테두리 border CSS 테두리 border css 테두리 태그를 알아보자. html에서 몇 번 해봐서 쉽다. 테두리 모양 border-style - outline 속성 outline-style : 선의 종류 outline-color : 선 색상 outline-width : 선 두께 outline-offset : 컨텐츠와 외곽선 사이에 공간을 주기. outline : 속성 한 번에 쓰기. 기본 스타일/색/두께를 써야 한다. 외곽선과 테두리의 다른 점 : 외곽선은 다른 내용과 겹칠 수 있다. 외..

프리미어 프로 : 비디오 전환 효과 - 조리개 다이아몬드 형

요즘 프리미어 프로 공부를 거의 안 하고 있어요. 웹코딩 배우고 싶어서 공부하고 있습니다. html 태그부터 하고 있는데 어렵네요. 어렵다는 건 지루함도 있죠. 잠시 벗어나 프리미어 프로 공부 좀 하다 넘어가야겠어요. 계속해서 비디오 전환 효과를 익혀보겠습니다. 오늘은 조리개 다이아몬드 형입니다. 제목에서 이미 예상됩니다. ▲ 효과 패널에서 쓰고자 하는 효과를 드래그, 드롭해서 클립과 클립 사이에 놓으면 적용됩니다. ▲ 이렇게 적용하고 효과를 선택해서 효과 컨트롤 패널을 봅시다. ▲ 효과 컨트롤 패널은 효과를 조금 더 디테일하게 조절할 수 있는 창입니다. 시작점과 끝 점은 말 그대로 어디서부터 시작할지 어디서 끝낼지를 설정합니다. 시작점을 옮기면 조리개가 열리는 애니메이션이 처음부터가 아닌 조금 열린 상..

CSS 요소 구조

상자는 컨텐츠, 내부여백, 테두리, 외부여백으로 구성 된다. 컨텐츠 - 텍스트, 이미지, 비디오, 오디오 등의 내용을 담는다. padding - 컨텐츠 내부에 여백을 넣는다. 패딩은 색상 값을 가지지 않는 투명이다. border - 컨텐츠와 내부 여백을 감싸는 테두리 margin - 외부 여백. 여백은 투명이다. 폭300px 높이150px / 배경색 토마토 / 내부여백 20px / 테두리 5px / 외부여백 15px 폭300px 높이150px / 배경색 토마토 / 내부여백 20px / 테두리 5px / 외부여백 15px 기본이 가장 익히기 어렵고 기본이 가장 많이 쓰인다.

CSS 높이 / 폭

아는 과목 나왔다. 짜쓰! height: px, %; - 높이 width: px, 5; - 폭 auto; - 기본 값. 브라우저나 지정한 요소의 크기를 자동으로 계산. initial - 지정된 값을 취소하고 기본으로 설정. inherit - 상위(부모) 값을 받는다. max-width: px, %; - 최대 폭을 설정. / max-height min-width: px, %; - 최소 폭을 설정. / max-height max / min 값은 반응형을 만들 때 많이 쓰고 애드센스 광고 크기를 조절할 때 쓴다. 폭 300px 높이 200px 세상엔 미친*들이 많다. 아뮈터블~ 후.............................. 폭 50% 높이 30%

CSS 내부 여백 padding

내부 여백 padding은 margin과 사용 방법이 거의 99% 동일하다. 그러니 다음 글을 참고하면 된다. 2019/11/22 - [웹코딩 어려워/· CSS] - CSS 외부여백 margin 불러오는 중입니다... padding에도 각각 값을 정할 수 있다. padding-top padding-right padding-left padding-bottom margin과 똑같이 한번에 쓰자. padding: 0 0 0 0; / 상-우-하-좌 / 단위는 px나 %를 많이 쓴다. !!중요!! 컨텐츠 너비와 패딩 값은 합쳐진다. 예를 들어 .div {width: 200px; padding:20px;} 라면... 컨텐츠의 최종 크기는 220px이 된다. 컨텐츠 기본 지정 값을 유지하려면 .div {width: ..

CSS 외부여백 margin

티스토리 스킨 편집하면서 지겹도록 봤던 태그다. m.a.r.g.i.n... 토 나온다. =-= 그러니 복습 삼아 정리만 하고 가자. margin은 컨텐츠의 외부 여백을 설정한다. margin은 상-우-하-좌 각각 값을 줄 수 있다. 보통 px; 단위를 사용하고 % 도 많이 사용한다. margin-top / 상 margin-right / 우 margin-left / 좌 margin-bottom / 하 margin은 위의 상-우-좌-하로 쓰지 않고 한번에 쓴다. margin: 0 0 0 0; / 상-우-하-좌 margin: 0 0 0; / 상-우좌-하 margin: 0 0; / 상하-우좌 margin: 0; / 상우하좌 margin: auto; / 가로 중앙 margin: inherit / 상위 속성을 받는..

CSS 배경

css 배경 이미지에 대해서 알아보자. 배경색은 기본이라 넘어간다. {background-color: 색;}으로 쓰면 배경색은 지정이 끝난다. 배경 이미지는 조금 알고 넘어가야 할 부분이 있어 정리해보자. .body { background-image: url("1234.png"); } 이미지 지정 방법은 기본 이렇다. 요소의 넓이 보다 이미지가 작으면 기본 반복으로 표현된다. 이미지 반복 설정 .body { background-image: url("1234.png"); background-repeat: repeat-x; } 이미지 가로 반복 설정. .body { background-image: url("1234.png"); background-repeat: repeat-y; } 이미지 세로 반복 설정. ..

CSS 색

css에서 색은 html 색과 99% 동일하다. 잠깐 살펴보고 넘어가면 될 것 같다. 닐기의 티스토리입니다. 배우고 싶은 공부를 주로 포스팅합니다. 영양가 없어서 죄송합니다만? 저한텐 중요한 자료들입니다. 닐기의 티스토리입니다. 배우고 싶은 공부를 주로 포스팅합니다. 영양가 없어서 죄송합니다만? 저한텐 중요한 자료들입니다. 색상에 대한 건 다음 글을 참고하자. 2019/10/12 - [웹코딩 어려워/· HTML] - HTML 색상 HTML 색상 html 색상은 색이름, rgb, hex, hsl, rgba, hsla 값을 사용한다. 파란배경 흰 글씨 nilgi.tistory.com

*