하이퍼링크(Hyperlinks)의 목록
메뉴는 단순한 링크 요소를 보기 좋게 나열한 차림표를 말합니다.
링크(Link, 고리)는 하이퍼링크(Hyperlink)의 줄임말로 하이퍼텍스트(Hypertext)문서 안에 모든 형식의 자료를 직접 가리킬 수 있는 참조 고리이며
웹페이지에 대한 지식이 없어도 방문자에게 쉽고 편리하게 "바로 가기"를 제공하는 특별한 텍스트를 말합니다.
인터넷(Internet)이 처음 세상에 나왔을 때 월드와이드웹(World Wide Web, WWW)의 웹은 거미줄을 뜻함에도 불구하고 웹세상은 "너무나 깊고 넓다"는 의미의 바다로 비유되곤 했지요. 그래서 그런지 초창기 만들어진 웹브라우저도 항해자(navigator)라는 뜻의 넷스케이프 네비게이터(netscape navigator)라고 불렸고,
배를 조정하는 키가 매우 인상적입니다. 요즘은 미지의 세계를 "탐험(explore)하다" 또는 바다보다 더 넓은 우주를 탐험한다는 뜻의 Explorer를 즐겨 사용하게 되었는데 이것은 과거 웹브라우저 전쟁에서 마이크로소프트사의 인터넷 익스플로러 웹브라우저가 승리하였기 때문입니다.
하지만 아직도 인터넷은 넓은 바다와 항해하는 배를 연상시키는 추억이 많이 남아있습니다.
같은 문서내 특정 위치나 혹은 다른 HTML 문서로 이동하기 위한 링크 요소는 배의 닻(Anchor, 앵커)이 바다 밑으로 긴 줄을 늘어뜨려 놓는 모습을 닮았다고
해서 지금까지 하이퍼링크를 대표하는 아이콘이 되었고, 마크업 언어로 작성 할 때는 <a href="URL">하이퍼링크 텍스트</a>형식으로 작성합니다.
따라서 href의 속성 값은 바다 깊은 곳, 네트워크 어딘가의 닻이 도달한 그곳의 자원을 가리키는 것입니다.
하이퍼링크를 보기 좋게 나열할 수 있는 마크업 언어로서는 목록을 만들기 편리한 ul, li 엘리먼트가 가장 일반적으로 사용되며 이렇게 묶은 그룹을 메뉴라고 부르기도 하고, 넓은 바다 위에서 없어서는 안될 위성항법장치를 닮았다고 해서 네비게이션(navigation)이라는 별명도 갖고 있습니다.
XE 코어도 이러한 메뉴 그룹의 구조, 디자인, 표준화 작업을 통해 위 그림과 같은 메뉴바를 각각 최상위 공통 네비게이션(Global Navigation Bar, GNB),
현재 서비스의 지역 네비게이션(Local Navigation Bar, LNB)이라고 부릅니다.
GNB = 전체적인 메뉴
LNB = 전체적인 메뉴를 통해 들어간 메뉴에 세부적인 메뉴
라고 생각하시면 편합니다.
GNB = 관리실 / 웃음톡톡 / 자료실 라는 전체적인 메뉴가 있고 만약 웃음톡톡으로 들어갔다고 치면 LNB부분은
LNB = 웃음톡톡 > 자유게시판 / 유머게시판 등의 게시판이 있는거지요.
메뉴의 깊이 (Depth)
XE코어는 링크의 목록을 배열 변수에 담아 두고 객체(Object)화하여 사용자가 필요할 때 내어 줍니다.
만약 menu1, menu2, menu3, menu4, menu5 라는 링크 목록을 만들고 싶다면 UL(Unordered List)를 이용해 다음과 같이 작성할 수 있습니다.
( # 부분은 URL )
<ul><li><ahref="#">menu1</a></li><li><ahref="#">menu2</a></li><li><ahref="#">menu3</a></li><li><ahref="#">menu4</a></li><li><ahref="#">menu5</a></li></ul>
목록을 가로 또는 세로방향으로 나열한다고 했을 때 한 단계로 표시하기 때문에 위와 같은 그룹은 1차 메뉴(1단)의 형식이 됩니다.
만약 menu1이 하위 목록을 갖고 싶다면 다음과 같이 작성할 수 있습니다.
<ul><li><ahref="#">menu1</a><ul><li><ahref="#">menu1-1</a></li><li><ahref="#">menu1-2</a></li><li><ahref="#">menu1-3</a></li></ul></li><li><ahref="#">menu2</a></li><li><ahref="#">menu3</a></li><li><ahref="#">menu4</a></li><li><ahref="#">menu5</a></li></ul>
이러한 목록 형식을 2차 메뉴(2단계)의 표현이라고 말합니다
만약 3차 메뉴(3단계)의 형식을 표현하고 싶다면 menu1-1 항목에서 같은 방법으로 하위 목록을 추가하게 됩니다.
이러한 목록은 메뉴 변수가 담겨지고 객체로 포장되어 보관되기 때문에 사용자가 레이아웃을 변경한다고 해도 레이아웃이 표현할 수 있는
메뉴의 깊이(depth, 목록의 단계)만큼 GNB, LNB 영역에 출력할 수 있는 것입니다.
다시 말해서 레이아웃이 2차 메뉴까지 표현할 수 있다면 사용자가 3차 메뉴까지 작성하였다고 하더라도 레이아웃에서는 2차메뉴까지만 보이게 되고 나머지는 표현할 방법이 없을 뿐 목록은 항상 가지고 있다는 의미입니다. 만약 3차 메뉴까지 지원하는 레이아웃을 만난다면 설정된 목록 그대로 표현할 것입니다.
사이트 메뉴 만들기
XE 코어에서 위와 같이 메뉴의 목록을 만들고 관리하는 도구는 [사이트 메뉴 편집] 쪽이 담당합니다.
이것을 사이트 맵이라고 표현하는군요, XE 코어를 설치하였을때 기본적으로 생성된 메뉴가 있습니다.
아래 그림과 같이 2차 메뉴로 작성되어 있고 각각의 메뉴에 welcome_page 모듈이 연결되어 있는 것을 알 수 있습니다.
메뉴는 링크 요소가 주제라고 했습니다. 따라서 메뉴를 추가할 경우 연결할 자원의 URL을 입력하는 것은 기본입니다.
하지만 코어는 이곳에서도 사용자에게 다음과 같이 3가지 질문을 합니다.
- 새로운 모듈을 만들고 연결하시겠습니까?...
- 모듈을 찾아 연결하시겠습니까?...
- URL을 직접 입력하시겠습니까?...
말줄임표 뒤에는 이런 뜻이 있답니다.
- 새로운 모듈을 만들고 연결하시겠습니까? 간단히 모듈을 만들 수 있는 서비스를 제공합니다.
- 모듈을 찾아 연결하시겠습니까? 만약 미리 모듈을 만들어 두셨다면 쉽고 빠르게 찾아 연결시켜드리겠습니다.
- URL을 직접 입력하시겠습니까? 다른 웹페이지로 가장 빠르게 모실 수 있는 쾌속선을 준비하죠.
위 3가지 질문에 대답할 내용을 이전 과정에서 모두 배우셨습니다.
추가로 배울게 있다면 사이트맵 추가를 눌러서 자신만에 메뉴를 만들 수 있고, 자신만에 메뉴 안에 자신만의 모듈을 넣어둘 수 있는것이죠.
마우스 드래그를 통해 메뉴 위치도 옮길 수 있습니다.
지금은 My_Menu안에 1차 메뉴 밖에 만들어두지 않았습니다, 여기서 2차 메뉴를 만들고 싶으면 1차 메뉴를 클릭 후 우측에 위치한 메뉴 추가버튼을 통해 하위 메뉴를 작성하시면 됩니다.
만약 메뉴가 목적한 내용대로 동작하지 않는 경우 [캐시파일 재생성]을 클릭하여 메뉴의 캐시파일을 재작성 해주시고 웹페이지를 새로고침하시면 됩니다.
저희가 새로만든 메뉴를 적용해보도록 합시다.
만든 메뉴 적용해보기
새로 만든 메뉴가 있습니다, 이 메뉴를 만들기만 했다고 자동으로 적용되는것은 아닙니다.
메뉴 부분을 수정해줘야하거든요.
일단 저희가 사용하는 레이아웃의 이름이 무엇인지 알아야합니다.
[사이트 제작/편집] 메뉴에서 [사이트 디자인 설정] 부분을 가시면 저희가 메인으로 사용하는 레이아웃이 무엇인지 출력이 됩니다.
저희는 XEDITION 이라는 레이아웃을 사용중이군요.
[고급] > [설치된 레이아웃] 페이지로 이동해서 자신이 사용중인 레이아웃을 눌러주신 후 설정 버튼을 눌러서 레이아웃 설정페이지로 들어가봅시다.
레이아웃에 대한 세부적인 설정이 보이시는데 이것은 사용자 입맛에 맞게 설정하시면 됩니다.
저희는 아래에 있는 메뉴 부분으로 갈겁니다.
자 이렇게 되어있습니다, 저희는 메인 메뉴부분을 바꿀것이니 Main menu 부분을 아까 설정한 사이트맵으로 설정해주고 저장을 누른 후 메인페이지를 봅시다.
자, 아까 저희가 설정한 메뉴가 상단에 제대로 출력이 되지요?
그리고 하나 더 알려줄게 있다면 사이트에 접속하면 뜨는 메인페이지 화면도 변경하실 수 있습니다.
홈 화면 변경하기 (http://www.xeschool.com/xe/step1_16)
사이트 메뉴 편집으로 들어가시고 자기 홈페이지에 접속하면 뜰 첫페이지가 될 모듈을 선택해줍니다.
저는 자유게시판을 홈 화면으로 사용해볼것인데요.
메뉴를 누른 후 우측 화면에 뜨는 목록중 [홈 페이지로 사용하기] 버튼을 눌러줍니다.
버튼을 눌러주고 나면 자유게시판 옆에 집 모양의 아이콘이 생깁니다.
이 아이콘이 생겼다는 의미는 이제 해당 사이트의 메인화면은 저 모듈이 표시된다는 의미입니다, 자 이제 메인 화면을 볼까요?
이렇게 설정 후 메인화면으로 이동하니 자유게시판이 먼저 보입니다.
이렇게 메인 홈페이지 화면을 설정해주실 수 있습니다.
이 이후에 나오는것들은 꾸미기 기능입니다.
사이트를 만들 의지가 있는분이라면 대충 훑어보기만 해도 이해가 되는 과정이니 링크와 간단한 설명만 남겨놓습니다.
로고 꾸미기 - http://www.xeschool.com/xe/step1_17
사이트에 타이틀을 꾸밀 수 있습니다.
자신이 만든 이쁜 이미지를 로고로 등록해보는 과정입니다.
메인 페이지 꾸미기 - http://www.xeschool.com/xe/step1_18
사이트 메인 페이지를 꾸밀 수 있습니다.
위에 적혀있는 홈 화면을 위젯 페이지로 해둘 경우 위젯 페이지를 수정하면 됩니다.
수정을 통해 최근 글, 인기 글, 갤러리 같은 위젯을 통해 게시글을 나열할 수 있으며 환영 문구 또는 이미지를 넣어서 꾸밀 수 있습니다.
이렇게 다 꾸민 위젯 페이지를 사이트 첫 접속시 보여주는 홈 화면으로 설정해두면 됩니다.
최근 게시물 꾸미기 - http://www.xeschool.com/xe/step1_19
위 메인 페이지 꾸미기에서 설정 해둔 위젯 페이지에 최근 글 위젯을 넣어서 최근에 작성된 글 목록을 출력하는 위젯을 넣는법을 알려주는 과정입니다.
그리고 위젯에 대한 속성값 변경 부분도 이야기 해주니 참고하시면 좋습니다.
그러나 대부분 위젯페이지로 이것저것 추가해보고 여러 설정 버튼을 눌러보면 대부분 보기만 해도 이해하기 쉬운 구조로 되어있으니 어려워 하지 않으셔도 됩니다.
방문자 카운터 추가하기 - http://www.xeschool.com/xe/step1_20
사이트 접속자 카운터를 추가합니다, 블로그에 있는 투데이랑 비슷한 기능입니다.
해당 기능을 사이드바나 위젯 페이지에 추가할 수 있습니다.
해당 게시글에 나오는 방법으로 수정하는 방법보다는 자신이 직접 레이아웃 html 파일을 열어서 수정하시는걸 추천 권장합니다.
위젯 생성은 관리자 페이지 설치된 위젯 부분에 들어가면 코드생성 메뉴를 통해 위젯 코드를 생성 할 수 있습니다, 자신의 입맛에 맞게 설정하신 후 나온 코드를 레이아웃 html을 수정해서 자신이 넣고 싶은 부분에 넣으시면 됩니다.
수정은 레이아웃 html을 꺼내서 수정하신 후 넣으시는 방식으로 하시고
수정하는 방식만 참고하시면 됩니다.
회원가입 폼 관리하기 - http://www.xeschool.com/xe/step1_21
해당 기능은 전에 XE코어 기본 설정하기 과정에서 배우신겁니다.
대충 훑어보시면 됩니다, 회원가입 폼 설정에 다른 기능이 무엇인지 안내를 해주니 한번 쓱 훑어보시면 이해가 되실겁니다.
회원그룹과 권한 관리하기 - http://www.xeschool.com/xe/step1_22
해당 과정은 적고싶지만 그렇게 중요하진 않고, 메인이 되는것이 아니기에 적지 않겠습니다.
간략하게 축약하자면
관리자 페이지 [회원] > [회원 그룹] 을 통해서 회원의 그룹을 설정 가능합니다. / 예) 정회원, 준회원, VIP 등
이렇게 설정한 회원 그룹에 따른 각기 다른 기능을 부여 할 수 있습니다.
VIP만 입장 가능하고 보이는 게시판을 만들고 싶으면 게시판 권한 설정 부분으로 들어가셔서 각기 맞는 권한을 읽어 보신 뒤 [선택 그룹 사용자]를 선택 후
각자 맞는 그룹을 지정해주시면 됩니다.
대충 이 말을 보신 뒤에 과정을 읽어보시면 이해가 될 것 입니다.
애드온 켜고 끄기 - http://www.xeschool.com/xe/step1_23
별로 어려운게 아닙니다, 그냥 켜고 끄기인겁니다.
설치된 애드온 부분으로 가셔서 자신이 키고싶은 애드온만 키고, 끄고싶은건 끄시면 되는 기능입니다.
그 외에 기본으로 깔린 애드온 기능에 대해 설명해주니 한번 읽어보시는것도 나쁘지 않습니다.
다국어 설정하기 - http://www.xeschool.com/xe/step1_24
해당 기능은 많이 쓸거같지 않습니다만..
관리자 페이지 > [설정] > [일반] 에서 지원 언어를 선택 해주신뒤에 [콘텐츠] > [다국어] 부분에서 추가하실 수 있습니다.
이렇게 추가가 됬으면 게시판 상세설정 부분으로 들어가셔서 브라우저 제목쪽에 지구본 아이콘을 클릭해서 설정해둔 다국어를 불러오시거나 거기서도 새로 생성하실 수 있으니 참고하시길 바랍니다.
위 링크는 구버전이라 신버전이랑 다른점이 있긴하지만 제가 적어둔 내용을 참고하시면서 하시면 이해하기 쉬울 것입니다.