#XE3로 배우는 쉬운 웹사이트 제작 방법
XE3를 활용해서 웹에 대해서 잘 모르는 초보자도 쉽게 홈페이지를 구성할 수 있는 웹사이트 제작방법을 소개하기 위해 제작되었습니다.
본 게시글은 위젯을 구성하고 설정하는 방법에 대해서 소개합니다.
XE CAMPUS에서 진행한, 30분만에 나만의 웹사이트 만들기 ( #0, #1, #2, #3,#4 ) 까지에서는 XE3를 설치하기 위한 웹사이트 공간 마련과, 설치, 기본 설정, 메뉴설정 까지 해 보았습니다.
이번 게시물에서 알아볼 것은, XE3에 있는 간편한 위젯 구성 방식인 위젯 박스로 내 사이트 메인 페이지를 구성하는 방법에 대해서 알아 보겠습니다.
XE 에서 위젯이란, 화면에 표시되는 작은 프로그램 단위입니다.
최근게시물이나 회원정보 등과 같은 플러그인과 연동된 위젯도 있으며, 외부의 정보를 가져오는 것도 존재합니다.
위젯의 개념 이해하기
먼저 구성하기 전에, 위젯의 단위는 어떻게 되는지 알아봐야겠죠.
일단, 일반 방문자가 내 사이트를 보는 시점의 위젯으로 쉽게 알아보겠습니다.
XE3 를 처음 설치하면 제공되는 Together 테마와 위젯은 크게 6개의 위젯 구성으로 이루어져 있습니다.
우리는 이 처음 세팅 된 위젯 구성을 참고하여, 나만의 메인 페이지 구성하는 방법에 대해서 알아보겠습니다.
위젯 박스로 편집하기
XE에서는 관리자 아이디로 로그인하면, 별도의 프로그래밍 코드를 작성할 필요 없이, 마우스와 설정만으로 메인 페이지를 구성할 수 있는 방법인 “위젯 박스"를 제공하고 있습니다.
내 사이트에서 관리자 아이디로 로그인 후 메인페이지 또는 위젯페이지로 이동합니다.
그 이후, 하단에 있는 편집하기를 클릭합니다.
위젯 박스 이해하기
편집하기 버튼을 클릭하면 나오는 화면은 생소한 화면으로 무언가를 구성하고 있을 것으로 보입니다.
아래의 이미지는 기본으로 설정되어 있는 위젯 구성을 기반으로 제공되는 이미지 입니다.
실제로, 우리가 만든 새 위젯 페이지는 빈 위젯 구성으로 보일 것 입니다.
왼쪽의위젯 컨트롤 박스에서 셀과 위젯을 생성하고, 오른쪽의 위젯 편집 영역에서는 각각의 위젯단위를 마우스로 클릭해 움직이거나, 수정, 삭제할 수 있습니다.
위젯을 구성하는데에 필요한 것은 열과 셀 그리고 위젯입니다.
- 열 : 셀을 그룹단위로 묶을 수 있음.
- 셀 : 위젯을 그룹 단위로 묶기가 가능.
- 위젯 : 화면에 표시되는 작은 프로그램 단위
조금 더 들어가자면, 위젯의 크기는 그리드(Grid)라는 시스템으로 크기를 조절하고, 구성할 수 있습니다.
그리드에 대한 자세한 설명은 여기에서 읽어보실 수 있습니다.
위젯박스 사용하기
무엇이든지 직접 해보지 않으면, 완벽히 이해하기 어렵습니다.
위젯박스로 위젯을 추가하는 방법에 대해서 알아보겠습니다.
먼저 직접 만든 위젯 페이지로 들어가, 편집 버튼을 누릅니다.
아까 우리가 원래 있던 페이지에서 편집 버튼을 누른것에 비해 많이 비어 있는 것을 느낄 수 있습니다.
위젯 박스에서 위젯을 구성하기 위해서는 “셀"이라는 것을 추가해야 합니다.
왼쪽의 열 추가를 클릭하면, 오른쪽의 편집영역에 붉은색의 row라는 열이 만들어진 것을 확인할 수 있습니다.
이제 우리는, 위젯을 구성할 수 있는 셀을 추가할 수 있습니다.
먼저 붉은 열의 빈 공간을 클릭하고, 컨트롤 패널의 셀 추가를 클릭 해봅시다.
아무런 설정을 하지 않았다면 셀의 이름은 md:1이며, 조그마한 상자가 추가된 것을 알 수 있습니다.
그렇다면, 셀의 크기를 5로 하고 추가 해 봅시다.
아까와는 다르게 가로의 크기가 조금 더 넓어진 셀이 추가 되었고, 셀의 이름이 md:5 인 셀이 나왔습니다.
눈치 채신 분들도 계시겠지만, 위젯 박스에서는 최대 가로 길이의 그리드 값이 12 이며, 이 크기 안에서 자유롭게 위젯을 구성할 수 있는 시스템을 제공하고 있습니다.
방금 추가한 셀 두개를 모두 x를 눌러 삭제해주시고, 셀의 크기가 12인 셀을 생성해주세요.
그렇게 하면, 열의 크기와 셀의 크기가 모두 동일하게 되어 있는 셀이 위의 이미지 처럼 편집영역에 추가 되어 있습니다.
크기가 12인 셀의 빈 영역을 클릭 한 후, 위젯 추가 버튼을 클릭 합니다.
게시물을 보여줄 게시물 리스트 위젯을 먼저 선택한 다음, 투게더-갤러리 스킨을 클릭하면,아래에 위젯 설정 항목 들이 있는 것을 보실 수 있습니다.
각각의 설정을 추가하면, 아래의 항목처럼 됩니다.
모두 설정 하였다면, 하단의 저장 버튼을 누르고, 위젯박스의 저장 버튼을 클릭 합니다.
메인 위젯박스를 닫으면, 내가 설정한 스킨과 항목들이 메인페이지 또는 위젯 페이지에 노출되는 것을 볼 수 있습니다.
이런식으로 하나하나의 스킨을 설정하여, 위젯을 구성할 수 있습니다.
또한, 하나의 셀 안에 여러개의 위젯을 포함할 수 있고, 아래의 이미지 처럼 여러개의 위젯을 마우스로 배치를 바꿀 수 있습니다.
하지만, 위젯을 담고 있는 셀과 셀 끼리는 마우스로 배치할 수 없다는 점, 알아두면 좋습니다 :)
이렇게, XE3를 사용해 내가 원하는 게시판의 컨텐츠를 원하는 방식으로 보여줄 수 있는 위젯 사용 방법을 알아보았습니다.
지금 까지 XE3로 배우는 쉬운 웹사이트 제작 방법을 읽어주셔서 감사합니다 :)
웹사이트를 만드는것은 어렵지 않습니다, XE와 함께라면요 :)
