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

    ‘홈페이지 첫 화면에 이미지 슬라이더 만들기’에서 만든 첫 화면 슬라이드는 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’이라는 슬라이더로 […]

  • BC TOWN™ 커버에디터로 첫 화면에 이미지 베너 배치하기

    BC TOWN™의 커버에디터를 이용해 홈페이지 첫 화면에 이미지배너를 삽입하고 링크를 걸도록 하겠습니다. 1. 베너 이미지 준비 make BCT 데모사이트의 테마 BCT0009의 첫 화면에 가로로 세개의 이미지베너를 삽입하겠습니다. BCT0009 테마의 가로 3단으로 나누어진 상자의 가로 크기는 339px입니다. 하지만 반응형을 감안하면 모바일 화면에서 보여지는 가로크기는 550px정도가 됩니다. 339*100px 사이즈의 베너를 만들려고 했으나, 모바일에서도 잘 보이도록 하기위해 같은 비율의 큰 이미지 500*148px의 이미지로 만들었습니다. 2. 커버에디터에 이미지 삽입하기 [관리자] > [BCT Covers]에서 현재 만들어져 있는 커버세트의 편집 화면에 접속합니다. ‘Containers’에서 ‘3단’ 상자를 삽입합니다. 만들어진 ‘3단 상자’에 [이미지] 위젯을 드레그하여 끌어다 놓습니다. ‘이미지’ 위젯의 [이미지를 선택하세요]를 클릭하면 ‘미디어 라이브러리’가 열립니다. 새로운 이미지를 업로드하거나 기존에 업로드 해 놓은 이미지를 세팅할 수 있습니다. 이미지 베너의 링크를 거는 등의 옵션을 설정하고 저장합니다. (옵션은 그대로 두어도 됩니다.) 다른 두 개의 이미지도 같은 방법으로 세팅하고 저장합니다. 홈페이지에 나가보면 가로로 세 개의 베너 […]

  • 표(table) 만들기 2

    ’표(table) 만들기 1’에서 소개한 글에 이어 이번에는 좀 더 복작한 표를 만들어 보겠습니다. 표(table) 만들기 1 글 보기 : http://makebct.net/1635?cat=148 1. 표 삽입하기 ’표(table) 만들기 1’에서와 같은 방법으로 다음과 같은 표를 만들었습니다. 셀을 합치기 위해 해당 셀들을 선택 후, 에디터의 [표] > [셀] > [셀 병합]을 클릭하여 셀을 합쳐줍니다. 구분을 위해 에디터의 [표] > [셀] > [열 속성]을 이용하여 다음 그림과 같이 표를 만들었습니다. 2. 표를 정교하게 설정 위에서 만들어진 표에서 각 열의 가로폭을 지정하여 너비를 조정해 보겠습니다. 첫 번째 열 ’header 1’을 선택한 후, 에디터의 [표] > [셀] > [열 속성] 에서 폭을 15%로 지정합니다. 반응형에서 보여지는 걸 고려하여 가로폭은 %로 작성합니다. 위와 같은 방법으로 header 2를 제외한 header 1~5까지 각각의 너비를 %로 입력하였습니다. 이렇게하면 표 전체 너비 100%에서 나머지 Header 1, 3, 4, 5에 지정된 너비를 뺀 만큼 header 2에 해당하는 열 […]

  • 표(table) 만들기 1

    워드프레스에서 페이지나 글에 표를 삽입하려면 생각보다 어렵지요? 어떻게 설정해야 하는건지, 셀 크기부터 횡과 열 설정도 맘대로 안되고 여간 까다로운게 아닙니다. 이는 한글이나 워드 프로그램에서 표 작성이 습관화되어 더 어렵게 느껴지는 탓도 있을 겁니다. 이번 글에서는 간단한 표를 만들고 스타일을 적용해 보겠습니다. 에디터의 표 삽입 기능은 워드프레스 에디터 TinyMCE Advanced 플러그인에서 지원하는 표 기능입니다. 1. 표 삽입하기 ’글 작성화면’의 에디터에서 [표] 버튼을 클릭하여 일단 표를 삽입하겠습니다. 5X5 의 표를 삽입하였으나 아래 그림과 같이 표가 삽입되었습니다. 테두리 오른쪽 상자를 드레그하여 오른쪽으로 700px까지 늘립니다. 표 전체를 블록한 상태에서 에디터의 [표] > [표 속성]을 선택합니다. 반응형 테마에서 출력되므로 각 해상도에서 잘 보이도록 가로폭을 %로 설정하기위해 표의 가로를 100%, 세로를 auto로 입력합니다. 표의 첫 번째 줄에 Header 1 ~ 5까지 적어주고 이 부분을 block으로 감싼 후, 다시 에디터의 [표] > [열 속성]을 클릭합니다. 속성 설정에서 [고급]탭을 클릭하여 […]

  • 홈페이지 하단(footer) 영역 꾸미기

    홈페이지 하단 영역에 정보, 링크, 베너 아이콘을 배치하여 다양한 정보를 제공할 수 있도록 만들어 보겠습니다. [관리자] > [외모] > [BCT footer text]에 접속합니다. 하단 정보를 작성할 수 있는 텍스트 상자가 보입니다. 1. 사이트 정보 작성하기 작성할 내용을 다음과 같이 텍스트로 입력합니다. 홈페이지에서 확인해 보면, 아무런 태그를 지정하지 않아 그냥 주~욱 글자들이 이어져 출력됩니다. 2. 태그 활용하여 스타일 적용하기 작성해 놓은 텍스트에 <br/>, <a> 태그등을 활용하여 줄바꿈을 해주고, 텍스트에 링크를 걸어줍니다. 태그가 적용된 상태로 홈페이지에 출력됩니다. 태그를 더해주는 것만으로 BC TOWN™ 테마에 미리 지정되어 있는 스타일이 적용되어 보기 좋게 출력됩니다. 3. 이미지를 삽입하고 링크 걸기 텍스트 아래쪽으로 이미지를 배치하고 링크를 걸어 보도록 하겠습니다. 미리 준비한 아래의 그림과 같은 이미지를 워드프레스 [미디어]에 업로드 합니다. 업로드한 이미지를 클릭하여 상세보기 화면에 접속합니다. 오른쪽 파일 정보에서 ’URL’에 적혀있는 주소를 복사합니다. 이미지가 위치한 […]

  • blockquote를 콘텐츠 상자로 변형하기

    글 작성 중 특정 문단을 테두리 상자 또는 배경색이 있는 상자로 쌓여있는 문단으로 작성해야 할 때, 에디터의 ’blockquote’ 기능을 이용하여 간편하게 적용할 수 있습니다. 1. 기본 blockquote 스타일 워드프레스나 BC TOWN™ 테마에는 blockquote 스타일이 지정되어 있습니다. 글 작성중 원하는 문구를 드레그하여 블록으로 지정 후, 에디터의 blockquote 버튼을 클릭하기만 하면 적용됩니다. 현재 보고계시는 make BCT의 기본 blockquote 스타일은 아래와 같습니다. blockquote 예문입니다. The attacking trio were behind 60% of Real Madrid’s goals this year. The front line made up of Cristiano Ronaldo, Benzema and Bale enjoyed a spectacular 2014, during which the three players managed to score 108 goals in all competitions. The Real Madrid attacking trio were unstoppable in front of goal and were a key ingredient for the team closing out the year with plenty of titles. 2. blockquote 스타일 변경하기 인용구로 쓰이는 이 기능을 이용하여 손쉽게 문단 상자를 […]

  • 하이퍼링크를 다양한 버튼 스타일로 만들기

    페이지를 꾸미다 보면 이미지로 버튼을 만들어 넣을때가 있습니다. 이미지버튼 대신 하이퍼링크의 스타일을 작성하여 버튼 형태의 하이퍼링크를 만들어 보겠습니다. 워드프레스에서 링크를 넣으면 밑줄이 쳐져있는 기본 링크 스타일이 적용되는데요, 몇 가지의 스타일을 미리 만들어 놓으면 쉽게 하이퍼링크를 버튼으로 사용할 수 있습니다. 1. 버튼 스타일 만들기 [관리자] > [외모] > [Custom CSS]에 접속합니다. 링크에 버튼 스타일을 적용하기 위해 다음과 간단히 디자인된 이미지를 CSS로 작성합니다. ’buttom01’이란 이름으로 작성하였습니다. 디자인 과정은 생략하겠습니다.

    마우스 오버시 보여질 스타일을 다음과 같이 작성하고 [저장]합니다.

    2. 버튼 적용하기 [글 작성화면]의 [텍스트] 편집모드에서 버튼스타일을 적용할 텍스트에 다음과 같이 ’class’를 적용해 줍니다. 홈페이지에서 보면 아래의 그림처럼 버튼스타일로 출력됩니다. 위와 같은 방법으로 ’button02’, ’button03’을 만들어 여러개의 하이퍼링크 스타일을 만들어놓고 사용할 수 있습니다. zman 블로그코디 디자인 팀장입니다. http://www.blogcodi.com

  • easy columns 플러그인으로 본문 내용을 가로로 나누어 배치하기

    easy columns 플러그인을 이용해 본문 내용을 가로로 나누어 배치해 보겠습니다. [관리자] 또는 툴바의 [새로 추가]를 클릭하여 [새 글 쓰기] 또는 [새 페이지 추가하기]에 접속합니다. 1. easy columns에서 Column 코드 삽입하기 ’글 작성 화면’에서 easy columns 버튼을 클릭합니다. (워드프레스의 에디터 설정에 따라 easy columns 버튼이 다른 위치에 있을 수도 있습니다.) easy columns으로 삽입할 수 있는 Column 폼들이 보입니다. 페이지를 반반으로 나누기 위해 ’1/2, 1/2’ 로 나우어진 column을 삽입해 보겠습니다. 본문에 column 코드가 삽입되었습니다. ezcol_1half ~ /ezcol_1half라는 코드로 쌓여져있는 위치에 내용을 채우면 됩니다. 2. 내용 채우기 위에서 삽입된 코드들에 내용을 채우기 쉽게 하기위해 다음과 같이 줄을 나누었습니다. 코드로 쌓여진 위치에 ’Half Column’이라는 글자를 지우고 다음과 같이 내용을 채웠습니다. 위와 같은 방법으로 다른 비율의 column 폼도 삽입하여 다음과 같이 배치해 보았습니다. 홈페이지에 나가보면 column이 나누어진 본문 내용을 확인할 수 있습니다. 예제보기 : http://makebct.cafe24.com/?p=118 […]

  • META SLIDER로 홈페이지 첫 화면에 이미지 슬라이더 만들기

    META SLIDER 플러그인을 이용하여 첫 화면에 이미지 슬라이더를 배치해 보겠습니다. BC TOWN™ 테마에서는 이미지 슬라이더를 웹브라우저의 가로폭에 꽉 차게 하거나 홈페이지 가로폭에 맞도록 배치할 수 있습니다. 참조: 메인 커버에 슬라이드 추가하는 방법 http://makebct.net/467?cat=2 1. META SLIDER에 이미지 등록하기 [워드프레스 관리자] > [Meta Slider]에 접속합니다. 아직 아무것도 설정하지 않아 비어있는 상태로 보여집니다. ’Create your firsr slideshow’라는 문구의 왼쪽의 [+] 버튼을 클릭하여 새로운 슬라이드를 생성합니다. 가로사이즈가 1920px인 이미지를 미리 만들어 두었습니다. 슬라이드의 이름을 이미지의 가로사이즈 1920px를 뜻하는 ’1920’으로 지정했습니다. 미리 준비해 놓은 세 개의 이미지를 등록합니다. 슬라이드에 쓰일 이미지 사이즈는 일반적으로 많이 쓰이는 24~27인치 모니터의 해상도 1920*1080px을 기준으로 웹브라우저를 전체화면으로 띄울 경우 슬라이드 이미지가 가로에 꽉 차게 보여지고 상하 길이가 어울리도록 배치하기 위해 1920*650px 사이즈의 이미지로 만들었습니다. 절대적인 사이즈가 아니기 때문에 여러분이 원하는 다른 사이즈로 이미지를 제작하셔도 무방합니다. 슬라이더가 제대로 출력되도록 다음 그림과 같이 슬라이드 설정을 하고 [저장] […]

  • 모바일 홈 바로가기 등록 방법

    모바일 홈 바로가기 버튼 등록이란 모바일 기기에서 일종의 아이콘 형태로 웹사이트를 표시할 수 있도록 바로가기 이미지를 등록하는 것을 의미합니다. 모바일 홈 바로가기 등록 단계는 다음과 같습니다. 1. 이미지 파일 준비 129×129 사이즈의 png 파일을 준비합니다. 파일명은 임의로 apple-touch-icon.png 로 합니다. 2. 이미지 업로드 미디어 업로드 디렉토리(~/wp-content/uploads/) 또는 테마 이미지 디렉토리(~/wp-content/themes/bct000N/images/) 에 준비한 이미지를 업로드 합니다. 이 글에서는 1번에서 준비한 이미지를 미디어 업로드 디렉토리에 업로드하는 것을 가정하고 설명합니다. 3. link 요소 추가 header.php 파일에 link 요소를 추가합니다. link 요소 추가 방식은 iOS와 Android에 따라 다릅니다. ① iOS 경우 ② Android 경우 실제 iOS 경우 header.php 파일에 추가된 코드는 다음과 같습니다. 4. 모바일 홈 버튼 확인 실제 아이폰에서 모바일 바로가기 아이콘이 추가된 화면은 다음과 같습니다. 위 그림에서 자연치유 아이콘을 […]

위로이동