워드프레스에서 웹폰트를 사용하려면 header.php 파일에 link 태그를 이용해서 아래와 같이 웹폰트 사이트의 링크를 걸어주고 스타일시트에 font-family라는 속성을 사용해주면 됩니다. 이에 관해서는 이곳( http://martian36.tistory.com/766 )의 글을 참고하면 됩니다. 그런데 워드프레스 관리자 화면의 폰트는 어떻게 바꿀 수 있을까요. 관리자화면은 header.php 라는 파일을 사용하지 않기 때문에 link 태그를 사용할 수도 없습니다. 관리자화면의 글자를 요소검사하면 스타일시트가 나타나지 않고 load-styles.php 파일에서 함수에 의해 정의되고 있습니다. 이 스타일시트(wp-admin/css/wp-admin.css)는 워드프레스 코어파일에 속해있기 때문에 이 스..

웹디자인에서 아이콘의 사용은 시각적인 효과로 더욱 멋진 웹사이트로 표현할 수 있는 수단입니다. 대부분의 경우 아이콘은 배경이 투명한 png 파일을 사용하지만 요즘 들어서 폰트를 이용한 아이콘의 사용이 늘고 있습니다. 이것은 CSS3의 @font-face 룰을 이용해서 서버에 폰트를 저장해두고 이 폰트를 가져와 원하는 곳에 배치하도록 합니다. 폰트는 알다시피 크기 조정도 자유롭고 색상 변경도 가능합니다. 이미지를 사용한다면 포토샵 같은 이미지 편집툴로 색상을 변경해서 파일을 만들어야 하지만 폰트는 CSS로 얼마든지 조정이 가능한 것이죠. 그러니 아이콘을 폰트로 사용한다는 것은 그만큼 웹디자인의 자유로움을 가져다주는 것입니다. 아래의 링크를 클릭하면 파일을 내려받을 수 있는 사이트로 이동합니다. http:/..

이전 글에서 404 템플릿 파일의 수정을 해서 검색박스를 추가하고 검색 결과 나타나는 부분을 수정했습니다. 이번 글은 푸터에 있는 테마 제작사의 로고를 제거하고 이곳의 양쪽에 내 사이트의 이름과 제작자의 이름을 배치하는 방법을 알아보겠습니다. 푸터의 로고를 요소검사하면 이미지가 있습니다. 이 이미지는 credit이라는 아이디 선택자의 div 태그가 감싸고 있고 다시 afterfooter 라는 아이디 선택자로 감싸고 있습니다. 요소검사를 해서 어떤 파일의 어떤 부분을 수정하려면 이러한 선택자들을 알아둬야 합니다. 편집기 화면에서 푸터 파일을 선택하고 스크롤해서 내리면 afterfooter 라는 선택자는 보이는데 credit이라는 선택자는 보이지 않습니다. 다만 함수에 의해 다른 곳에서 가져오고 있습니다. ..

제이쿼리는 자바스크립트 라이브러리입니다. 라이브러리란 이미 만들어진 많은 기능이 있는 함수들이 모인 도서관(Library)을 말합니다. 자바스크립트는 배우기가 어려워서 일반인들은 접근하기가 힘들지만 제이쿼리는 누구든지 배울 수 있도록 쉽게 돼있습니다. 어려운 자바스크립트를 이용해서 어떤 기능을 하는 플러그인을 만들자면 수많은 코드가 필요하지만 일반적으로 많이 사용하는 기능을 미리 정의해 놓고 라이브러리에 저장해서 불러오기만 하면 되는 것이 제이쿼리입니다. 이러한 자바스크립트 라이브러리는 제이쿼리만 있는 것이 아니라 Prototype, script.aculo.us, Ext Core, jsPHP, MooTools, jQuery, Ext JS, DHTMLX, Dojo Toolkit 등 종류가 많습니다. 그중에..

웹페이지를 만들면 주로 CSS로 레이아웃을 하기 때문에 포토샵으로 만든 이미지는 잘 사용하지 않습니다. 그래도 특수한 경우 작은 이미지를 사용해서 상하로 반복될 수 있는 이미지를 삽입하면 원하는 효과를 얻을 수 있습니다. 이번 글에서는 제 블로그의 방문자님이 궁금해 하는 내용으로 오랫만에 HTML/CSS에 관한 글을 올려봅니다. 우선 이 글의 제목을 보면 금방 이해가 힘들므로 그림을 보면서 무슨 의미인지 알아보겠습니다. 간단한 구조의 웹사이트 레이아웃입니다. 현재 상황을 보면 컨텐트와 사이드바 사이에 선이 그려져 있습니다. 두 곳의 배경 색상도 다르죠. 대부분의 경우 위와같은 레이아웃을 만들려면 두 개의 요소의 높이가 같아야합니다. 하지만 두개의 요소의 내용이 항상 같을 수는 없죠. 컨텐트 영역의 내용이..

이전 글에서 테마수정을 시작해서 계속 이어집니다. 예전에 테마옵션 설정하던 중 글이 없거나 페이지가 없는 URL을 클릭해서 워드프레스 블로그에 연결된 경우 아래 그림처럼 페이지를 찾을 수 없다는 메시지를 입력했습니다. 글자의 크기나 높이를 수정해줘야하는 상황이죠. 그리고 이런 페이지를 방문자가 접했을 때 막연하게 안내문구만 나오게 하는 것 보다는 다른 글로 가거나 검색해서 원하는 글을 찾을 수 있도록 배려하는 것이 좋습니다. 이런 상황이 벌어지는 이유는 글의 고유주소가 변경됐다거나 글이 제거돼서 URL을 찾을 수 없는 경우에 발생합니다. 그러니 해당 글을 찾을 수 있도록 도와주는 것이 좋겠죠.위에서 검색박스를 이용해서 검색하라고 했는데 검색박스가 없죠. 그래서 404 페이지 템플릿을 설정할 때는 사이드바..

이전 글부터 테마 수정을 시작해서 헤더와 글박스 부분을 수정했습니다. 이번 글에서는 이미지의 모서리를 둥글게 하고 테두리를 넣는 방법과 검색 박스의 검색 버튼을 수정해보겠습니다. 1. 이미지의 수정 현재의 테마에는 이미지에 대해서 모서리를 둥글게 한다거나 테두리를 만들어 놓고 있지 않습니다. 좌측 상단의 아이콘은 약간 둥글게 돼있지만 이미 처음부터 포토샵으로 둥글게 만들어서 그런 것이죠. 이미지 테두리를 둥글게 만들려며 img 태그에 대해서 스타일을 정해주면 되는데 어떤 부분을 대상으로 하느냐가 문제입니다. 무작정 img 태그에 대해서만 명령을 내리면 테마 내의 모든 이미지가 둥글게 처리됩니다. 그래서 글 내용 중에 있는 이미지만 하려고 할 경우 해당 요소를 검사해서 선택자를 알아냅니다.위처럼 요소검사를..

이전 글에서 자식테마를 만들고 한글 웹폰트를 사용하는 방법을 알아봤습니다. 이번 글에서는 블로그의 상단부터 시작해서 푸터까지 수정해야할 부분을 모두 수정해보겠습니다. 이전 글에서 한글 폰트를 먼저 설정했는데 왜그러냐하면 기본폰트를 먼저 설정해야 모든 부분에서 레이아웃을 통일적으로 적용할 수 있기 때문이죠. 폰트는 기본 사이즈인 12px이라하더라도 종류에 따라서 웹페이지에 나타나는 크기가 모두 다릅니다. 어떤 폰트를 기준으로 수정을 했는데 다른 폰트로 바꾸면 작은 부분에서 크기가 달라지기 때문에 높낮이를 다시 수정해야하는 상황이 발생하죠. 1. 헤더의 수정 예를들어 메뉴부분을 보면 현재 각 메뉴의 좌우 폭이 넓어서 우측 두개의 메뉴가 하단으로 내려와 있습니다. 이것을 한줄로 만들어야하는데 현재의 폰트를 기..

웹디자인에서 요소의 위치를 변경하고자 할 때 HTML의 요소를 이동하면 되지만 부모 요소의 범위 안에서만 변경이 가능합니다. 부모 요소의 제약을 받지 않고 벗어나서 배치할 수 있게 하려면 CSS의 포지션을 사용합니다. 어제 방문자님이 고정위치 포지션으로 배치된 것을 수정하고자 방명록에 글을 올렸는데 이를 변경하는 방법을 알아보겠습니다. 제 글의 CSS 기초부분을 보면 포지션에 관해 이해를 돕기 위해 상세히 나오지만 좀 장황하죠. 이번 글은 방문자님의 블로그를 예로 들어 설명해 보겠습니다. http://generalog.tistory.com/ 위 블로그로 가서 보면 뷰온 버튼이 글 박스의 우측에 떨어져서 배치돼 있습니다. 수정을 하고나면 변경이 되겠죠. 이 요소가 어떤 식으로 배치가 됐는지 알아보려면 개발..

워드프레스의 텍스트 편집기는 오픈소스 소프트웨어를 사용합니다. TinyMCE는 Tiny Moxiecode Content Editor의 약자로 Moxiecode 시스템에서 만들었고 계속 업그레이드되고 있습니다. 워드프레스에서 사용하는 것은 원래 버전을 소규모로 만든 것으로 두줄 밖에 없지만 원래 버전은 아래에서 보듯이 네줄이나 됩니다. 이런 모든 기능을 사용할 수 있도록 플러그인으로 만든 것이 TinyMCE Advanced입니다. 글 편집이 많은 분들에게는 아주 유용합니다. 워드프로세서 수준이죠. 플러그인 추가하기 화면에서 TinyMCE Advanced로 검색해서 설치, 활성화하고 설정-TinyMCE Advanced를 클릭하면 아래와 같은 화면이 나옵니다. 사용법은 아래 줄에서 아이콘을 끌어다 윗줄에 배치..

워드프레스를 설치할 때 루트 디렉토리에 설치한 경우 사용하다가 서브 디렉토리로 변경하고자 할 때는 3가지를 변경해줘야합니다. 여기서는 WAMP 서버에 설치된 워드프레스를 서브 디렉토리를 만들고 이전하는 방법을 알아봅니다. 워드프레스 완벽입문 책에서는 116페이지에 나오는 내용입니다. 다중 사이트를 이용하고 있는 경우에는 적용할 수 없으나 워드프레스 3.5 버전에서는 가능하게 됩니다. 1. 관리자 화면의 설정에서 워드프레스 주소와 사이트 주소 변경2. 폴더 파일의 이동3. 데이터베이스의 URL 변경 1. 관리자 화면의 설정에서 워드프레스 주소와 사이트 주소 변경 워드프레스의 모든 파일을 서브 폴더로 이동하더라도 홈페이지에 접속하면 도메인만 나타나도록 해야합니다. 설정-->일반에서 워드프레스 주소에 서브 폴..

1. WP.me 짧은 링크 워드프레스 젯팩(Jetpack) 플러그인의 WP.me 짧은 링크는 사용하기 간단합니다. 이미 만들어진 글이나 페이지의 편집 화면에서 짧은 링크 얻기 버튼을 클릭하면 위와 같은 창이 나타납니다. 긴 URL이라도 위처럼 도메인이 wp.me로 된 짧은 URL이 만들어지며 복사해서 다른 곳에 붙여넣으면 됩니다. 2. 사용자 정의 CSS 워드프레스 젯팩 플러그인의 사용자 정의 CSS는 테마의 수정을 보다 쉽게 하기 위한 플러그인입니다. 테마를 전반적으로 수정하려면 자식테마를 사용해야하지만 간단한 수정은 이러한 플러그인을 사용하는 것이 좋습니다. 왜냐하면 원래의 테마를 수정하기 위해 테마의 스타일시트를 수정한 경우 테마가 업데이트 되면 수정한 스타일시트도 업데이트 돼서 수정한 것이 지워지..

HTML로 코딩 하면서 가장 어렵고 까다로운 부분이 form 태그 부분입니다. form안에는 input 태그와 label 태그를 이용해서 양식에 들어갈 입력란을 만들고 양식의 내용이 어떤 것이냐에 따라서 text, checkbox, radio, textarea, button, 등 여러가지 형태로 만들어집니다. 만들어 놓고 이를 레이아웃하여 정렬하는 것도 어렵죠. 그래서 전통적인 테이블 레이아웃을 많이 사용합니다. 테이블 레이아웃이란 table 태그를 이용해서 tr, td로 셀을 만들고 셀 안에 들어갈 것을 배치합니다. 이렇게 만들어진 레이아웃은 수정을 하려면 아주 어렵습니다. 일정한 폭이 정해져 있어서 반응형 디자인에서는 사용할 수도 없습니다. 그래서 웹표준에서는 테이블 레이아웃을 사용하지 말것을 권장하..

안녕하세요. 베누시안입니다. 지난 6개월 동안 워드프레스 책을 만드느라고 글을 제대로 올리지 못했습니다. 이제 마무리 단계에 접어들어 최종 교정작업을 마치고 책 표지까지 디자인돼 나왔으며 인쇄과정에 들어갔습니다. 10월말이면 서점에 출시될 것으로 예상됩니다. 책의 내용은 두 개 부분으로 나눠져서 전반부는 워드프레스의 전반적인 사용법이고 후반부는 워드프레스 테마 만들기와 트위터 부트스트랩을 이용한 테마 수정 방법입니다. 책의 전체적인 내용은 목차를 보시면 짐작이 되리라 생각되므로 링크를 걸어둡니다. 이곳은 책을 소개한 워드프레스 사이트입니다. 워드프레스 책의 분량이 664 페이지나 되는데 테마 만들기 부분이 많습니다. 많은 내용을 넣지 못해서 워드프레스 플러그인 부분을 블로그에 싣기로 했습니다. 지금 진행..

웹 언어의 사용환경은 W3C의 표준 승격보다는 웹브라우저가 얼마나 빠르게 진화하는가에 크게 좌우됩니다. 현재 HTML5의 표준화단계는 5단계중 첫번째인 Working Draft단계로 초안에 불과합니다. 5대 웹브라우저중 인터넷 익스플로러를 제외하고는 적용이 활발히 진행되고 있습니다. 가장 문제가 IE인데요. 앞으로 나올 IE10버전도 문제가 됩니다. 왜냐하면 사용환경이 윈도우 8에서만 작동되기 때문이죠. 우리나라 국민 웹브라우저인 IE가 이런 식이라면 웹디자이너들은 계속 고생하는 수 밖에 없습니다. 윈도우환경을 많이 사용하고 있는 국민 대다수가 새로운 OS가 나오고 웹브라우저가 나온다한들 인터넷 접속환경은 그리 달라지지는 않을것 같습니다. 다행히 IE의 점유율이 계속, 그것도 대폭 떨어지고 있습니다. 단..

HTML5는 30여개의 새로운 태그가 추가 되었고 CSS로 가능하거나() 문제가 되는 태그()는 지원하지 않게 되었습니다. 지원이 안된다는 것은 완전히 폐기 되어 기존에 이 태그를 사용한 웹페이지가 엉망이 된다는 것은 아니고 웹브라우저는 지원을 하게 됩니다. 이전부터 사용하지말것을 권장한 것은 CSS로 할 수 있거나 문제가 있는 것으로 반대(Deprecated)의견을 제시한 것이 있고 완전히 폐기(Obsolete)된 것도 있지만 웹브라우저는 계속 지원하는 경향이 있습니다. 표준이 아닌 것으로 됐어도 사용이 가능하다는 것이죠. 태그는 흔히 요소(element)로 사용됩니다. 같은 용어로 사용되기도 하지만 정확히 말하자면 태그안에는 요소가 있고 속성이 있습니다. 태그에서 h1은 요소입니다. 속성은 요소를 새..