• 반응형 홈페이지에 맞추어 출력되는 동영상 삽입하기

    Advanced Responsive Video Embedder 라는 플러그인은 유튜브나 Vimeo 동영상 삽입을 위한 플러그인입니다. 예제 보기 : http://makebct.cafe24.com/?p=188 1. 유튜브 공유-소스코드로 동영상 삽입하기 기존 유튜브의 ‘공유’ 기능을 통해 아래와 같은 코드를 본문에 작성하여 동영상을 삽입해 왔습니다.

    2. Advanced Responsive Video Embedder 플러그인으로 동영상 삽입하기 [새 글 쓰기]를 클릭하여 글 작성창에 보면 아래와 같이 ‘Advanced Responsive Video Embedder’ 플러그인의 [Embed Video]라는 버튼이 보입니다. 동영상을 삽입할 위치에 커서를 위치시킨 후, [Embed Video] 버튼을 클릭하면 다음과 같은 동영상 삽입 창이 보여지고, 다음 그림에 보이는 것과 같이 원하시는 동영상의 주소를 입력하고 나머지 항목을 입력합니다. 동영상이 있는 페이지의 웹주소창의 주소를 입력해도 되고, 공유에서 지원하는 짧은 주소를 입력해도 됩니다. 3. 동영상 출력 위의 두 가지 방법으로 동영상을 본문에 삽입하였을 경우 아래의 그림과 같이 별 차이가 없어 보입니다. 하지만 모바일 환경에서 보면 다릅니다. 유튜브의 ‘공유’ 코드를 이용해 삽입된 동영상의 경우 세로 […]

  • 구글 검색엔진최적화를 위한 워드프레스 홈페이지의 최소한의 체크 리스트

    구글 검색엔진 알고리즘은 5,000명 이상의 엔진니어에 의해 1년에 500회 이상 업데이트 된다고 합니다. 500회라면 하루에 1회 또는 1.5회 알고리즘이 변경된다는 것을 의미합니다. 즉, 빠르게 변하는 구글 검색엔진을 매번 반영하여 자신의 홈페이지를 최적화 하는 것은 대단히 어려운 일입니다. 하지만 구글에서 진행하는 세미나에 참석해서 내용을 들어보니 다음에 소개하는 정도만이라도 제대로 반영하면 구글 검색 노출에 큰 도움이 되는것을 알 수 있었습니다. 1. 구글 검색엔진최적화를 위한 robots.txt 설정 robots.txt 파일은 사이트의 루트에 위치하며 사이트에서 검색엔진 크롤러가 액세스하지 않기를 바라는 부분을 표시합니다. 파일에서는 로봇 배제 표준 프로토콜의 명령을 사용하여 섹션별, 웹 크롤러 종류별(모바일, 크롤러, 데스크톱 크롤러 등)로 사이트에 대한 액세스 권한을 표시합니다. 참고로 웹사이트에서 Google이 액세스할 수 있는 URL과 액세스할 수 없는 URL을 테스트하려면 robots.txt 테스터를 사용해 보시기를 바랍니다. 2. 사이트 전체 title 및 description 설정 누구나 알만한 유명 브랜드가 아닌 이상 브랜드 및 회사명(title)과 함께 […]

  • 반응형 해상도에 맞추어 이미지 슬라이더 출력시키기

    ‘홈페이지 첫 화면에 이미지 슬라이더 만들기’에서 만든 첫 화면 슬라이드는 PC 화면에 맞추어 만들었습니다. 홈페이지 첫 화면에 이미지 슬라이더 만들기 글 보기 : http://makebct.net/1618?cat=148 참조: 메인 커버에 슬라이드 추가하는 방법 http://makebct.net/467?cat=2 하지만, 테블릿이나 모바일에서 보면 아래의 그림처럼 너무 작게 보이게되어 있으나마나하게 됩니다. 모바일 환경에 어울리도록 비율이 다른 두 가지 버전의 슬라이드를 만들어 배치하도록 하겠습니다. 1. 새로운 슬라이드 세트 추가하기 테블릿에서 보여질 970*400px, 모바일에서 보여질 590*300px 사이즈의 슬라이더 세트 두 개를 추가로 만듭니다. [관리자] > [Meta Slider]에 접속합니다. 위에서 정한 사이즈의 슬라이더 세트 두 개를 ‘970’과 ‘590’이라는 이름으로 추가하고 설정합니다. Setting의 width와 height를 각 이미지 사이즈와 같게 입력하고, 다른 설정은 ‘홈페이지 첫 화면에 이미지 슬라이더 만들기’(글 보기)에서 만든 ‘1920’이라는 슬라이더의 설정과 같게 설정합니다. 2. 첫 화면에 배치하기 [관리자] > [외모] > [위젯]에 접속합니다. ‘Front Page Showcase’ 상자에 ‘Meta Slider’ 위젯을 세팅합니다. 아래의 그림처럼 각각 ‘970’과 ‘590’이라는 슬라이더로 […]

  • 모바일 웹테스트 서비스 – Troy

    다음(DAUM)에서 만든 기기별 모바일 웹테스트 서비스 트로이를 소개합니다. TROY Responsive Web test라는 제목으로 서비스되고 있으며, 국내에서 많이 쓰이는 모바일 기기를 위주로 다양한 모바일 기기에서 웹사이트가 어떻게 출력되는지 테스트해 볼 수 있습니다. http://troy.labs.daum.net zman블로그코디 디자인 팀장입니다. http://www.blogcodi.com

위로이동