반응형 (adsbygoogle = window.adsbygoogle || []).push({}); 이 글에서 부트스트랩 5에서 폼이 어떻게 되는지 적으려 한다. 부트스트랩으로 스킨을 만드는 것이 아니라면 댓글, 방명록 등이 입력에서 폼을 많이 사용한다. 3에서 그 외에는 사용한 적이 없는 것 같다. 예 Email address Example textarea 위와 같은 소스를 입력하니 결과는 아래 그림과 같았다. mb는 이명박이 아니고 부트스트랩에서 공백을 나타낸다. 은 margin이고 b는 bottom이니 mb는 CSS의 margin-bottom이 된다. placeholder로 입력하는 방식을 설명한다. 부트스트랩에 익숙해지면 나도 모르게 부트스트랩에 사용하던 요소, 속성 등을 CSS 및 HTML에 사용하게 된다. 사이징 아래 그림처럼 클래스에 form-control-lg 와 form-control-sm를 사용해 높이를 설..

반응형 (adsbygoogle = window.adsbygoogle || []).push({}); 이 글에서 콘텐츠 확보에 대해 적어보려 한다. 검색 결과 무료 사이트를 이용해도 질 좋은 이미지를 구하여 블로그에 글을 쓰는데 아무런 문제가 없다. 나도 무료 사이트에서 원하는 이미지를 구하여 글을 쓴다. 그런데 무료 사이트에서 검색하면 결과에 나오지 않는 경우가 많다. 그리고 결과에 항상 그 무료 사이트를 후원하는 유료 사이트에 대한 결과도 나온다. 그런데 유료 사이트 결과를 보면 원하는 이미지가 나온다. 다시 적으면 무료 사이트에서 검색하면 그 사이트를 후원하는 콘텐츠 유료 사이트의 검색 결과도 나온다. 그리고 항상 원하는 이미지가 나온다. 무료와 유료 사이트 콘텐츠 양 이것은 부정적으로 생각하면 유료 ..

반응형 (adsbygoogle = window.adsbygoogle || []).push({}); 이 글에서 아래 애니메이션처럼 영상 축소와 확대를 더불어 줌 인 줌 아웃에 대해서 적으려고 한다. 결과 들어가기 전에 샷컷에서 영상 축소와 확대하는 것은 필터에서 크기와 위치 및 회전을 사용한다. 영상을 확대하거나 축소할 수 있어야 영상에 줌 인(zoom in)과 줌 아웃(zoom out) 효과를 만들 수 있다. 그러면 아래에서 줌인과 줌아웃은 무엇인지 알아보려고 한다. 줌 인(Zoom In)과 줌 아웃(Zoom Out) 구글에서 검색한 줌 인(zoom in)과 줌 아웃(zoom out)의 정의를 참조하여 적으면 다음과 같다. 줌 인은 영화·텔레비전에서 카메라의 위치는 고정한 채 줌 렌즈에 의해 접근하는 것처럼 보이도록 촬영하는 기법이다. 반대로 줌 아웃은 영화에서,..

반응형 (adsbygoogle = window.adsbygoogle || []).push({}); 이 글에서 부트스트랩 5 이미지를 어떻게 나타내는지 적고자 한다. 들어가기 전에 나는 이 블로그를 부트스트랩3로 만들었는데 부트스트랩 이미지 정의를 굉장히 많이 사용했다. 이 글에 버전 3에 대한 언급이 많아서 3에 대한 내용이 아니라는 점을 알았으면 한다. 3은 버전 5를 보충 설명하기 위한 수단일 뿐이다. 반응형 이미지 만들기 기기에서 최적화 되는 반응형 이미지를 만들기 위해서 클래스에 img-fluid를 추가한다. 이것은 이미지에 max-width: 100%과 height: auto를 준 것과 같다. 만약 브라우저나 기기를 줄이거나 늘리면 최적화된 이미지를 보여준다. 반응형 이미지 이미지 썸네일 만들기 이미지 썸네일을 만는는 것은 이미지를 작..

반응형 (adsbygoogle = window.adsbygoogle || []).push({}); 이 글에서 VPN 서비스에 대해 적으려고 한다. VPN이란? VPN에 대해 적으려고 하니 먼저 VPN이 무엇인지 알아야 될 것이다. 위키백과에 따르면 가상사설망 또는 VPN(영어: virtual private network)은 공중 네트워크를 통해 한 회사나 몇몇 단체가 내용을 바깥사람에게 드러내지 않고 통신할 목적으로 쓰이는 사설 통신망이라 정의한다. 개인 정보 보호 측면이 강하다. 개인 정보 보호 나에게 VPN이란? 나 같은 경우 유료가 아닌 무료 VPN을 사용하므로 VPN의 개인 정보 보호 한다는 것에 대한 신뢰가 없다. 왜냐하면 유료가 아닌 무료 VPN에서 IP 주소 등 개인 정보를 보호에 대한 VPN에 대한 생각은 없다. 나에게 VPN은 검열로 사이트를 차단한 사이트를 접속..

반응형 (adsbygoogle = window.adsbygoogle || []).push({}); 이 글에서 샷컷으로 서서히 나타나고 사라지는 영상 만드는 것을 적으려 한다. 이 글에서 적을 내용을 자세히 전에 샷컷에서 영상이 서서히 나타나고 사라지는 페이드 인과 페이드 아웃을 설명했다. 그때는 영상이 아닌 텍스트로 하는 방법을 설명했다. 영상으로 하는 방법도 하나 간단히 적었는데 아래 첫 번째와 같이 검은색 배경에서 페이드 인과 페이드 아웃이었다. 검은색 배경 외에 흰색 등 다른 색으로 페이드 인과 페이드 아웃하는 방법에 대해 적지 않았다. 그런데 이 글에서는 두 번째와 같이 검정이 아닌 흰색으로 페이드 인과 페이드 아웃하는 방법에 대해 적으려고 한다. 페이드 인과 페이드 아웃 영상 페이드인/페이드아웃..

반응형 (adsbygoogle = window.adsbygoogle || []).push({}); 이 글에서 글자색을 특정 위치 텍스처로 하는 방법은 3가지에 대해 적으려고 한다. 들어가기 전에 혹시 글자에 텍스처를 입히는 것이니 채우기 도구라 생각할 수 있다. 채우기 도구를 사용하지 않고 특정 위치 텍스처를 채울 것이다.않을 것이다. 나는 실력 없어 할 수 있는지 모르나 채우기 도구를 사용해서 특정 위치 텍스처를 채우는 방법을 모른다. 첫 번째 방법 1. 배경을 될 이미지를 연 후 레이어에서 이름을 배경이라 한다. 참고로 나는 아래 그림을 보면 레이어에서 이미지 이름을 배경이라 변경하지 않았다. 2. 전경색이 글자색이 되는데 글자색은 상관없으니 글자를 입력한 후 마우스 오른쪽 버튼을 클릭한다. 그리고알파를 선..

반응형 (adsbygoogle = window.adsbygoogle || []).push({}); 이 글에서 이 스킨에서 유튜브를 자동으로 반응형 만드는 것을 해결한 것에 대해서 적으려 한다. 티스토리에서 동영상 삽입 티스토리 새 에디터를 사용하면 유튜브를 삽입할 때 기본모드에서 단지 공유에서 복사한 후 글에 넣고 엔터를 치면 다음 줄로 넘어가 동영상이 나온다. 그리고 필요하다면 동영상 링크를 지운다. 아래 동영상을 그렇게 삽입했다. 유튜브에서 공유 > 퍼가기로 소스를 복사한 후 에디터를 기본모드에서 HTML로 변환 후 소스를 삽입하는 것도 가능다. 이런 방식은 네이버 블로그 에디터에서 가장 유사하다. 네이버 블로그 에디터와 거의 과정이 같은데 다른 것이 엔터과정만 없는 것이다. 네이버 블로그에서는 복사한 ..