누구나 쉽게 만드는 웹페이지
HTML을 몰라도 이메일만 보낼 줄 알면 누구나 쉽게~
테라보드와 함께라면, 회사소개 · 대표인사말 등의 단순한 웹페이지는 사용자 스스로 누구나 쉽게 만들 수 있습니다. HTML은 알면 도움이 되지만 몰라도 상관없습니다. 게시판에 글을 작성해 본 적이 있다면 누구나 관리자 모드의 ‘페이지 관리’ 메뉴에서 웹페이지를 제작하실 수 있습니다. 테라보드의 웹페이지는 [에디터], [스킨], [링크] 세 가지 형태로 제작 가능하며, 생성된 웹페이지는 ‘페이지명’을 기준으로 네비게이션 메뉴에 자동 추가됩니다.
CH Editor을 사용합니다.
에디터! 겉모습뿐 아니라 속까지 따져보세요~
에디터는 관리/운영자의 웹페이지 제작뿐만 아니라, 일반 사용자도 게시판을 매번 사용합니다. 그래서 저희는 테라보드의 개발과 함께 다양한 에디터를 비교 테스트하였습니다. 비교대상은 네이버의 Smart Editor, 워드프레스의 TinyMCE, CH소프트의 CH Editor였습니다. 일반 사용자에게 인지도 면에서는 CH소프트가 가장 미약하지만, 사실 옥션, 지마켓, 벅스, 카페24 등의 알만한 사이트들과 국내 주요 기관/기업에서는 모두 CH Editor을 사용하고 있습니다. 왜일까요? 사실, 에디터의 겉모습과 기본적인 기능(폰트 속성, 이미지 삽입, 링크 등)은 모두 흡사하지만, 에디터를 통해 동일하게 작성된 문서 내용의 소스코드를 살펴보면 소스코드가 모두 제각각입니다. 결론적으로 저희 판단에는 CH에디터를 통해 작성된 코드가 가장 간결하였고, 무엇보다 유일하게 소스코드의 색상이 구분되어 눈의 피로가 덜했습니다. 아울러 한글과 워드프레스에서 작성된 문서의 복사/붙여넣기, 익스플로러/크롬/파이어폭스와의 크로스 브라우징 테스트에서도 안정적인 결과를 가져다주었습니다. 그래서 저희는 200만원이 넘는 고가의 CH에디터의 재배포 라이센스를 구매하여, 테라보드의 사용자분들이 무료로 편리하게 이용하실 수 있도록 제공 드리게 되었습니다. (꼭 기억해 주세요~ 200만원)
회원님 자동완성 기능을 활요하세요.
회원님이 아닌, 닉네임을 불러주는 센스 + 번거로운 일 줄이기
키보드의 엔터키로부터 11시 방향에는 기호 {와 }가 있습니다. 기호의 명칭은 브레이스(brace)라고 합니다. 그냥 괄호 (와 )를 쓰면 설명하기 쉬웠을 텐데 자주 쓰는 기호를 자동완성 기능으로 적용하면, 괄호는 기호로써 사용할 수 없으므로, 자동완성 기호는 브레이스로 정했습니다. 많은 개발자분이 공감하실 텐데 홈페이지 운영자로부터 주소나 전화번호가 바뀌었다고 고쳐 달라는 전화를 받게 되면 별것 아니지만, 돈 받기도 뭐하고 무료로 일일이 페이지를 찾아 수정해주는 일이 은근 번거로울 것입니다. (아마 운영자 입장에서도 직접 수정하고 싶겠죠) 자동완성 기능은 이렇게 번거로운 일들을 줄이고, 웹페이지와 자동 완성용 문자/메세지/메일을 통해 다수의 회원 이름이나 닉네임을 쉽게 표기하기 위한 목적으로 개발되었습니다. 덤으로 문자 입력만 가능한 게시판의 댓글에서도 이미지 경로를 브레이스로 묶어 등록하면, 이미지로 표기됩니다. 알아두시면 편리한 사용 가능한 자동완성 항목은 아래와 같습니다.
홈페이지명}도메인주소}회사명}대표자명}사업자등록번호}통신판매업신고번호}대표메일}대표번호}팩스번호}회사주소}개인정보책임자명}개인정보책임자메일}닉네임}회원ID}성명}가입일}
테이블 제작에 관한 팁
브라우저의 창크기를 줄여 변화하는 표 모양을 확인하세요.
|
너비(Width) 100%의 테이블 |
|
기본적으로 테이블은 |
전체 가로폭이 줄면 |
전체 크기에 맞추어 |
칸이 줄어듭니다. |
| 하지만 스타일에 | display:inline-block 를 넣으면 | 고정된 크기에서 | 칸이 내려갑니다. |
기본적으로 에디터를 통해 제작할 수 있는 테이블은 너비(Width)를 퍼센트(%)와 픽셀(px)로 지정할 수 있습니다. 퍼센트는 테이블이 속해있는 BODY 또는 DIV, TABLE의 크기에 비례하는 상댓값입니다. 픽셀은 그 반대인 절댓값으로 테이블이 BODY 또는 DIV, TABLE의 크기보다 큰 수치를 입력할 경우, 전체 영역의 크기가 늘어나게 됩니다. 홈페이지가 틀어지는 가장 흔한 원인이므로 기억해 두시기 바랍니다. 또한, 테라보드와 같이 반응형으로 제작된 홈페이지에서는 가로로 여러 개의 칸이 존재하는 테이블을 만들 때는 일반적인 TD 태그의 사용보다는, 각각의 테이블을 만들어 스타일에
에디터의 이미지 첨부
홈페이지의 가로 폭에 비례하여 줄어드는 이미지
위 이미지는 가로 1200px / 세로 300px 크기의 이미지 입니다. 테라보드는 반응형 플랫폼으로서 첨부된 이미지가 디스플레이의 가로 폭보다 클 경우, 디스플레이의 가로폭에 맞추어 이미지의 가로/세로 크기를 함께 줄여서 보여주게됩니다. (브라우저의 창크기를 줄여서 시험해 보세요.) 당연한 결과라고 생각하실 수 있지만, 실제로는 이미지에 맞추어 디스플레이의 폭이 늘어나서 좌우 스크롤 생기는 것이 기본입니다. 이로한 작용은 에디터와 첨부파일을 통해 등록된 이미지의 가로폭에만 적용되며, 세로 길이는 상관하지 않습니다. (스크롤을 내리면 되므로)
아! 추가적으로 설명드릴 부분이 있는데, 만약 가로 폭 1600px 크기의 이미지를 등록하였는데, 1200px로 보여진다면, 그것은 관리자 모드의 환경설정 > 이미지 스케일링 값이 1200으로 설정되어있기 때문이므로, 수치를 올려주시면 됩니다. 사실, 이 값은 홈페이지의 일반 사용자가 휴대폰으로 찍은 고용량/고해상도의 사진을 무분별하게 등록하여, 하드 디스크를 차지하고 트래픽을 발생시킨는 문제를 줄이기 위한 테라보드만의 작지만, 매우 유용한 기능이므로 잘 활용하시기 바랍니다.