이전 글에서도 언급했지만 트위터 부트스트랩으로 디자인을 하면 모두 같은 디자인이 나오기 때문에 되도록이면 다르게 나타나도록 디자인을 수정하는 것이 좋습니다. 메뉴가 선택됐을 때 inset으로 인해서 내부 그림자 효과가 나타나죠. 이것을 다르게 나타나도록 변경해보겠습니다. 이번 글에서 작업할 내용은 위와 같습니다. 선택되지 않은 메뉴는 우측 상단에 세모 도형이 나오고 선택된 메뉴는 세모 도형이 접히는 효과와 함께 그림자도 나타납니다. 또한 메뉴 사이에 부트스트랩의 vertical-divider가 나타나도록 했습니다. 이것은 익스프레스 엔진으로 하여금 반복되도록 출력할 수가 없어서 CSS를 이용해서 각 li 태그에 나타나도록 했습니다. 부트스트랩의 스타일시트를 제거하려면 해당 요소를 선택하고 요소검사를 해서..

이전 글에서 익스프레스 엔진의 메뉴 구조를 2단의 서브 메뉴로 만들고 여기에 트위터 부트스트랩의 메뉴를 설치했습니다. 부트스트랩의 메뉴바는 서브 메뉴가 있는 메뉴를 클릭하면 해당 메뉴가 있는 페이지가 열리는 것이 아니라 서브 메뉴가 열립니다. 그렇다면 익스프레스 엔진으로 메뉴를 만들 때 서브 메뉴가 있는 메뉴는 페이지를 링크할 것이 아니라 비어있는 링크를 연결해야 합니다. 대부분의 경우 어떤 메뉴를 클릭하거나 마우스를 올렸을 때 서브 메뉴가 나타난다면 서브 메뉴의 아이템으로 이동해서 클릭하게 되죠. 이번 글에서는 이러한 부트스트랩 메뉴바를 사용하는 방법을 알아보겠습니다. 익스프레스 엔진 메뉴 수정하기 익스프레스 엔진이 1.7 버전으로 업그레이드 되면서 메뉴 설정이 아주 간편해졌습니다. 전체적인 UI가 이..

이전 글에서 익스프레스 엔진의 메뉴를 2단 서브 메뉴로 만들고 부트스트랩 라이브러리 파일들을 추가했습니다. 이번 글에서는 내비게이션 메뉴바를 만들어보겠습니다. 이전 글에서 알아봤듯이 익스프레스 엔진의 메뉴 구조는 여러가지 변수와 조건문에 의해 만들어지고 있어서 부트스트랩의 메뉴 선택자를 적절하게 나타나도록 조건문을 이용하면 됩니다. 메뉴바 만들기 이전 글에서 부트스트랩의 기본 메뉴 구조에 대해 알아봤는데 반응형 메뉴바는 몇가지 태그와 선택자가 추가됩니다. Project name 반응형 메뉴바는 화면 폭이 축소됐을 때 좌우로 정렬돼 있는 메뉴들이 상하로 배열되면서 감춰지고 버튼이 나타나며 버튼을 클릭하면 감춰진 메뉴들이 나타나는 구조입니다. 이러한 버튼 역할을 하는 것이 class="btn btn-navb..

어느 CMS나 마찬가지겠지만 부트스트랩을 해당 CMS에 적용할 경우 가장 복잡하고 어려운 부분이 내비게이션 메뉴입니다. 메뉴바라고도 하죠. 트위터 부트스트랩의 내비게이션 메뉴바는 각 요소에 정해진 클래스 선택자를 추가하면 메뉴를 클릭했을 때 서브 메뉴가 나타나는 구조입니다. 워드프레스의 경우도 마찬가지라서 내비게이션 메뉴가 함수에 의해 만들어지고 있기 때문에 부트스트랩의 선택자를 삽입하기 어려워서 Walker Nav이라는 별도의 프로그램을 만들어서 함수 파일에 추가하면 쉽게 부트스트랩의 메뉴 구조를 사용할 수 있습니다. 부트스트랩 관련 프로젝트의 자바스크립트를 추가하면 클릭하지 않고 마우스 오버 상태에서도 서브 메뉴가 나타나도록 할 수 있습니다. 우선 부트스트랩 기본 구조에 맞춰서 익스프레스 엔진의 메뉴..

이 글에서 WAMP를 사용했는데 설치시 문제점이 있으니 아래 링크에서 오토셋을 설치하고 XE를 설치하세요. http://martian36.tistory.com/1256 익스프레스 엔진(XE)는 대표적인 한국형 블로그 프로그램중에 하나입니다. 전신인 제로보드를 네이버 NHN에서 인수하면서 익스프레스 엔진으로 바뀌었습니다. 요즘은 외국 블로그 프로그램과 경쟁하면서 해외에 진출하기 위해 설치시에 외국어를 선택할 수 있도록 버전업되었습니다. 이 프로그램도 다양한 모듈을 설치해서 단순한 블로그가 아닌 기업형 웹사이트를 제작할 수 있습니다. 이전 글 에서 이러한 블로그 프로그램을 내 컴퓨터에 설치하여 웹호스팅에 업로드하기전에 디자인 제작을 하기 위해 시험가동하는 방법에 대해서 알아보았습니다. 워드프레스를 WAMP ..