영감을 얻고 공부하고 만들기!

전체 글 (2761)

구글 블로그에서 드롭다운 메뉴를 구현하고 디자인 변경하기

  • 디지털콘텐츠크리에이터
  • blog
  • 2019.07.22

구글 블로그에서 드롭다운 메뉴를 구현하고 디자인 변경하기이전 포스트에서 html/javascript가젯을 추가하여 기본 메뉴를 구현하였다. https://learnandcreate.tistory.com/105?category=855877 해당 포스트는 여기에 추가로 마우스 롤오버시 메뉴가 펼쳐지는 드롭다운을 구현하고 디자인을 변경하는 방법이다. 1)좌측의 테마 항목을 선택하고 맞춤설정을 클릭한다.2)테마 디자이너에서 고급의 css 추가를 클릭하면 css를 추가할수있는 코드 입력란을 확인할수있다. 3)여기에 아래 첨부한 샘플 코드를 복사하여 붙여넣기한다. 이 코드는 메뉴에 드롭다운을 추가하고 메뉴의 레이아웃 및 디자인을 변경한다. #test_html { text-align: left; display: in..

더 읽기

구글 블로그(blogger)에서 html를 이용하여 메뉴 구현하기

  • 디지털콘텐츠크리에이터
  • blog
  • 2019.07.21

구글 블로그(blogger)에서 html를 이용하여 메뉴 구현하기아래는 html/javascript 가젯을 활용하여 간단한 메뉴를 구현하는 과정이다.1)레이아웃 항목에서 html/javascript 가젯을 추가한다. 2)html/javascript 구성에서 내용란에 아래의 샘플 코드를 작성하고 저장한다. 3)위에서 작성한 코드는 html을 이용하여 심플한 상단 메뉴를 작성하는 코드로 예제로 자주사용된다.빨간색 영역에서 id를 test_html로 정의한다.초록색 영역에서 클릭하면 해당 주소로 링크되는 메뉴를 정의한다(home, menu0, menu3)파란색 영역에서 각각 서브 메뉴가 3개인 메뉴 menu1, menu2를 정의한다.4)위에서 저장한 가젯을 원하는 위치에 배치한다(클릭,드래그) 아래 예에서는 ..

더 읽기

구글 블로그에서 상단 메뉴만들기(페이지 가젯)

  • 디지털콘텐츠크리에이터
  • blog
  • 2019.07.20

구글 블로그에서 상단 메뉴만들기(페이지 가젯)1)좌측에서 레이아웃 항목을 선택하고 페이지 가젯을 추가한다.2)추가한 가젯 수정에서 표시할 페이지를 확인한다. 예에서 제목을 'home' 이라고 작성한 페이지는 가젯을 추가하면 기본적으로 구성하는 최소1개의 페이지이다. 3)위 이미지에서 현재 체크 해제하여 목록에서 제외한 'page_added' 페이지는 블로그 좌측의 페이지 항목에서 사용자가 이전에 작성한 페이지이다. 4)외부 링크추가를 클릭한다. 5)페이지 제목을 작성하고 링크할 웹주소를 입력하고 저장한다. 블로그에서 외부링크로 추가한 페이지를 클릭하면 해당 url로 이동한다.6)목록 순서에서 블로그에 표시할 페이지들을 확인할수있다(클릭,드래그해서 위치 변경) 현재 페이지 설정을 저장한다.7)배치 저장을 ..

더 읽기

EZGIF 웹사이트에서 gif 이미지 편집하기

EZGIF 웹사이트에서 gif 이미지 편집하기EZGIF 웹사이트에서 gif 이미지를 편집할수있는 상당히 유용한 툴을 제공한다. 웹사이트에 gif를 업로드하고 해당 도구들로 편집 및 수정하여 결과물을 저장할수있다. 제공하는 툴은 아래와 같다.crop - 프레임을 재설정하여 이미지 자르기resize - 이미지의 해상도 재설정하기rotate - 이미지 상하 좌우반전 또는 회전시키기optimize - 퀄리티 손실을 최소화하면서 압축하여 파일 크기 줄이기effect - 이미지의 색상, 밝기, 대조 보정 및 몇가지 필터제공speed - 애니메이션 재생 속도를 높이거나 낮추기overlay - gif 이미지 위에 레이어추가하여 합성하기(워터마크 삽입)기타(write, split, frames) https://ezgif..

더 읽기

구글 블로그 - 테마 다운로드 및 변경하기

  • 디지털콘텐츠크리에이터
  • blog
  • 2019.07.15

구글 블로그 - 구글 블로그 테마 다운로드 및 변경하기1)구글에서 blogger template 키워드로 검색하면 블로거 테마 템플릿을 제공하는 수많은 웹사이트들을 확인할수있다. 2)웹사이트에서 원하는 블로거 테마를 선택하고 다운로드한다.3)테마 탬플릿은 .xml파일로 구성되어있다. 4)블로거 테마메뉴에서 우측 상단의 백업/복원을 클릭한다. 5)파일 선택에서 다운로드한 .xml파일을 선택한다.6)업로드를 클릭하면 해당 테마 탬플릿 파일을 업로드하고 내 블로그에 적용한다.

더 읽기

텍스트를 목소리로 변환시키기(text to speech)

텍스트를 목소리로 변환시키기(text to speech)구글에서 text to speech 키워드로 검색하면 텍스트를 스피치(speech, voice)로 변환시켜주는 웹서비스들을 찾아볼수있습니다. 한글을 지원하는 사이트는 찾아보기어렵지만 공용어인 영어의 경우 변환한 결과가 아주 자연스럽습니다.사이트들은 변환 옵션에서 길이 제한없는 장문, 다양한 음색, 변환한 음원등을 다운로드를 지원하고있는데 대부분 프리미엄 회원에 가입해야 이용할수있습니다.아래 사이트는 텍스트를 스피치로 변환하고 음원을 무료로 다운로드할수있습니다. 현재 지원하는 언어는 영어와 영국식 영어를 포함하여 독일어, 프랑스어, 러시아어, 스페인어, 포르투갈어입니다. 결과물은 포스트 하단에 있습니다.http://www.fromtexttospeech..

더 읽기

MOVAVI에서 동영상에 타이틀 추가하기

MOVAVI에서 동영상에 타이틀 추가하기동영상 시작과 끝에 삽입하는 타이틀 또는 크레딧 등의 텍스트 오브젝트를 추가하는방법이다. MOVAVI에서는 기본적으로 몇가지 디자인의 프리셋을 제공하고있으며 이외에 더 많은 디자인을 사용하고싶다면 store에서 무료 또는 유료 구입가능하다.1)동영상에 타이틀을 추가하고싶다면 좌측의 타이틀메뉴를 클릭하고 원하는 타입을 하단의 타이틀 트랙으로 드래그, 드롭한다. 2)타이틀 트랙에 추가한 오브젝트를 수정하려면 오브젝트를 우클릭하고 edit를 선택한다(또는 오브젝트 더블클릭) 3)duration은 타이틀이 영상에 나타나고 사라지는데 걸리는 총 시간이다. 애니메이션 스피드는 타이틀이 나타나고 사라질때의 속도이다. 이밖에도 오브젝트의 색상 그리고 텍스트의 디자인을 변경할수있다..

더 읽기

MOVAVI에서 동영상 불러오기, 자르기, 내보내기

MOVAVI에서 동영상 불러오기, 자르기, 내보내기(길이편집)MOVAVI는 사용방법이 아주 단순한 동영상 편집 프로그램이다. 메뉴가 간단하게 구성되어있고 자주 사용하는 몇가지 주된 편집 기능을 포함하고있어서 초보자들이 사용하기 좋은 툴이다.https://www.movavi.com 동영상불러오기1)상단의 file메뉴에서 add media files를 선택하면 비디오 트랙에 동영상을 추가한다.. 또는 파일을 선택해서 직접 트랙 위로 드래그,드롭할수도있다. 동영상자르기2)트랙의 영상을 선택한후에 조절자로 커팅할 위치를 설정하고 아래 표시한 split아이콘을 클릭하면된다. 3)영상을 세밀하게 편집하고자한다면 하단의 scale조절자로 타임 라인의 스케일을 늘이거나 줄일수있다. 커팅한후에 필요없는 영상은 delet..

더 읽기

KODI(코디) SYBU 어플로 원격 리모트 컨트롤하기

KODI(코디) SYBU 어플로 원격 리모트 컨트롤하기 코디를 리모트컨트롤할수있는 수많은 무료 어플들이 존재한다. 해당글에서는 아이폰에서 sybu 무료 어플을 사용하였고 코디 v17이상에 대해서 설정방법을 작성하였다. 1)데스크탑의 코디를 실행하고 휴대폰에서 다운로드한 SYBU를 실행하고 우측상단의 셋업 아이콘을 탭한다. 2)현재 연결된 코디가 없음으로 호스트가 비어있다. (setup instructions 항목에서 코디 버전에 따른 설정방법 및 어플 사용법을 확인할수있다) 3)모바일에서 근거리 네트워크에있는 사용 가능한 코디에 접속하려면 몇가지 설정을 해주어야한다. 데스크탑의 코디 시스템 메뉴에서 services를 선택한다. 4)좌측 control메뉴에서 allow remote control via H..

더 읽기

KODI(코디) 언어 및 자막 한글 설정방법

KODI(코디) 언어 및 자막 한글 설정방법1)기본적으로 동영상에서 자막을 표시하려면 동영상파일과 자막파일이 동일한 폴더내에 있어야하고 두 파일의 이름이 일치해야한다.이 조건을 만족한다면 코디에서 영화 재생시 영어 자막은 기본적으로 문제없이 표시되지만 2)한글 자막의 경우 제대로 표시되지않는다. 한글자막을 표시하려면 코디에서 몇가지 설정을 해주어야한다. 3)먼저 player메뉴를 선택한다. 4)Language의 preferred subtitle language에서 한글(korean)을 선택한다. 5)interface 메뉴를 선택한다. 6)skin의 fonts에서 arial based를 선택한다. 이 설정은 코디의 언어 글꼴(폰트) 타입을 변경한다. 한글과 호환되는 폰트로 변경하는 과정이다. 7)regio..

더 읽기

KODI(코디)에서 영화, 음악 추가하기

KODI(코디)에서 영화, 음악 추가하기1)코디 메인화면에서 좌측의 VIDEOS 메뉴를 클릭합니다. 2)Files 메뉴를 클릭합니다.3)add videos를 클릭합니다.4)browse를 클릭하여 영화 파일들이 위치한 폴더의 디렉토리를 설정합니다.5)set content는 추가한 비디오 콘텐츠의 타입을 설정해주는 부분입니다. this directory contains를 클릭합니다. 6)추가한 비디오의 타입을 선택합니다.7)content scanning options에서는 코디가 데이터를 스캐닝할때 옵션 몇가지를 설정합니다. 예에서는 기본으로 설정하고 확인하였습니다.8)위 과정을 마치면 기본적으로 코디에 영화를 추가한것입니다. 메인 메뉴의 Movies 카테고리에서 디렉토리에 위치한 영화들의 타이틀 이미지를 ..

더 읽기

이미지파일에서 사진촬영한 장소의 위치 정보 (GPS) 확인하기

이미지파일에서 사진촬영한 장소의 위치 정보 (GPS) 확인하고 구글지도에서 확인하기1)일반적으로 휴대폰 촬영한 이미지의 속성에서 사진의 메타데이터를 확인할수있다. 만약 파일 속성의 자세히 탭에서 아래와 같이 GPS 항목을 찾아볼수없다면 휴대폰에서 위치서비스를 활성화하지않았기때문이다. 2)아이폰 6s의 경우 설정>개인정보보호>위치서비스에서 활성화시킬수있다. 위치서비스를 활성화한후 사진을 촬영하면 위와같이 GPS항목을 표시하게된다. 3)구글에서 exif website라고 검색하면 웹에서 사진의 메타데이터를 확인할수있는 사이트들을 찾아볼수있다. 예에서는 아래 웹사이트를 활용하였다.http://exif.regex.info/exif.cgi 4)위 웹사이트에서 정보를 확인하고자하는 사진을 업로드한다. 카메라모델, ..

더 읽기

Copyright © 영감을 얻고 공부하고 만들기! All Rights Reserved

Designed by JB FACTORY

티스토리툴바