홈페이지 사용 안내2011, 07, 06

www.bugo17.net

글쓰기 화면

회원정보 / 화면보기 영역

제목 입력 부분

내용 입력 부분

파일 첨부 부분

태그 입력 부분

기능 버튼 부분

글쓰기 화면

회원정보 / 화면보기 영역

[ 로그인 전 ] [ 로그인 후 ]

게시판 상단우측에 로그인 영역과 설정 아이콘이 표시됩니다 .

이곳에서 회원가입 , 로그인 및 로그아웃을 할 수 있습니다 .

- 로그인 : 홈페이지에 로그인 하여 게시물 열람 , 글 작성 등의 활동을 할 수 있습니다 .

- 회원가입 : 클릭하여 홈페이지의 회원가입을 합니다 .

- 회원정보보기 : 로그인한 회원은 자기의 회원 정보를 열람 및 수정하고 , 회원 탈퇴를 할 수 있습니다 .

- : 게시판 스킨 제작 정보를 표시합니다 .

- : 홈페이지의 게시물에 달린 태그를 표시합니다 .

- : 게시판 보기 형태를 한줄 목록 형태로 출력합니다 .

- : 게시판 보기 형태를 웹진 형태로 출력합니다 . ( 기본 형태 )

- : 게시판 보기 형태를 앨범 형태로 출력합니다 . ( 사진 게시판에 이용 )

글쓰기 화면

글쓰기 > 제목 입력 부분

게시물의 제목을 입력하는 곳입니다 .

기본적으로 마련된 몇가지의 컬러와 제목을 강조하여 굵은 글씨로 표시할 수 있습니다 .

- 제목 : 게시물의 제목을 입력합니다 .

- 제목 색깔 : 클릭하여 10 가지의 컬러 중에서 나타내고 싶은 컬러를 선택할 수 있습니다 .

- 제목 굵게 : 체크박스에 표시하면 제목이 강조되어 굵게 표시 됩니다 .

- 댓글 허용 : 체크박스에 표시하면 작성글에 회원들이 댓글을 달수 있습니다 .

- 엮인글 허용 : 블로그 관련된 기능인데요 , 체크 된 상태로 이용합니다 .

- 알림 : 글 등록시 게시판 관리자에게 메일로 통보합니다 . ( 잘 사용하지 않습니다 .)

글쓰기 화면

글쓰기 > 내용 입력 부분 > 에디터 도구

게시물의 내용을 입력하는 곳입니다 .

글씨체 , 크기 , 줄간격 , 컬러 , 문단 정렬 , 인용구 , 특수문자 , 링크 , 테이블 등의 편리한 기능을 갖추었습니다 .

네모난 아이콘에 마우스 포인트를 갖다 대면 해당 아이콘에 대한 기능 설명이 출력됩니다 .

[ 게시판 이용 시 주의사항 ]

- 메모장 , 아래한글 , 워드 등의 프로그램으로 글을 미리 작성하신 후에 , 게시판에 붙여 넣어서 이쁘게 편집하여 사용합니다 .

- 홈페이지 게시판에 등록하는 글은 타 프로그램에서 편집하지 마시고 , 게시판의 기능으로만 편집하는 것이 좋습니다 .

-아래한글이나 워드 등의 원문을 올리실 경우에는 ‘파일첨부’ 기능을 이용하여 해당 파일을 첨부하여 등록해 주십시오 .

-메일 내용을 카피하여 올릴 때에는 내용만 정확히 선택하여 복사하시고 , 이외의 버튼 , 네임택은 복사하지 마십시오 . 메일

원문의 소스태그가 홈피와 섞여서 화면이 깨지는 현상이 나타날 수 있습니다 .

글쓰기 화면

글쓰기 > 내용 입력 부분 > 글쓰기

텍스트 입력

게 시 판 글 쓰 기 화 면 에 서 직 접 타 이 핑 하 여 입력하거나 , 미리 작성해둔 문서에서 카피하여 붙여 넣기 합니다 . 이때 , 아래한글이나 워드 등 에 서 카 피 한 것 을 직 접 넣 으 면 해 당 프로그램에서 지정된 형식이 따라와서 게시판과 충돌하게 되므로 절대 금지합니다 .

아래한글이나 워드 등 타 프로그램으로 작성된 글을 가져 올 경우에는 반드시 ‘메모장’을 열어서 붙인 다음 , ‘ 메모장’ 의 텍스트를 복사한 후에 게시판에 붙여 넣으세요 .

그 다음에 게시판의 기능을 이용하여 글씨의 크기를 조절하고 , 컬러를 바꾸고 , 굵게 하거나 , 문단의 정렬 방식을 지정해 주는 등의 꾸미기 작업을 합니다 .

홈페이지 게시판은 문서편집 프로그램과 같이 정교한 작업을 할 수 없습니다 .

글쓰기 화면

글쓰기 > 내용 입력 부분 > 에디터 기능

- 형식 : 제목 스타일을 지정합니다 . 6 개의 사이즈가 있습니다 . 단락 단위로 적용됩니다 .

- 글꼴 : 돋움 , 굴림 , 바탕 , Arial, Arial Black, Tahoma, Verdana 등의 몇 가지 서체를 지원 합니다 .

- 크기 : 9 ~ 32 px 까지 10 단계의 사이즈를 지원합니다 .

- 줄간격 : 100 ~ 200% 까지 6 단계로 줄간격을 지원합니다 .

글자를 진하게 합니다 .

밑줄을 긋습니다 .

글자를 기울이게 합니다 .

취소선을 긋습니다 .

글자의 색상을 지정합니다 .

글자의 배경색상을 지정합니다 .

위 첨자를 입력합니다 .

아래 첨자를 입력합니다 .

글쓰기 화면

글쓰기 > 내용 입력 부분 > 에디터 기능

- 정렬 : 글의 왼쪽 , 오른쪽 , 가운데 , 양쪽을 기준으로 정렬합니다 . 단락 단위로 적용됩니다 .

- 목록적용 : 숫자 또는 기호를 사용하여 목록을 만듭니다 . 단락 단위로 적용됩니다 .

- 들여쓰기 : 들여쓰기의 정도를 조절합니다 .

- URL : 텍스트와 이미지에 링크를 걸어 줍니다 . ‘새창으로’에 체크하면 클릭시 브라우저의 새창으로 열립니다 .

- 특수문자 , 인용문 : 특수문자를 입력하고 , 인용기호를 입력합니다 .

왼쪽 정렬

가운데 정렬

오른쪽 정렬

양쪽 정렬

숫자 목록 적용

기호 목록 적용

들여쓰기 낮춤

들여쓰기 높임

특수 문자

링크인용문

글쓰기 화면

글쓰기 > 내용 입력 부분 > 에디터 기능

- 표 : 표를 생성하고 편집하는 기능입니다 .

- 셀 병합 : 가로 또는 세로방향으로 연속 선택된 셀을 합칩니다 .

- 열 분할 : 선택된 셀을 세로로 나눕니다 .

- 행 분할 : 선택된 셀을 세로로 나눕니다 .

- 확장 컴포넌트 : 게시판에 쉽게 넣기 어려운 몇가지 기능을 쉽게 넣도록 지원하는 기능입니다 .

- HTML 편집기 : 고급사용자를 위하여 , HTML 을 이용하여 게시물을 등록할 수 있도록 지원하는 기능입니다 .

[ 주의사항 ]에디터는 인터넷 브라우저를 통해서 게시물을 작성할 때에 HTML 을 잘 모르더라도 쉽게 글을 작성할 수 있도록 최소한의 도움을 제공하는 목적으로 만들어졌습니다 . 아래한글이나 워드 같은 전문적인 프로그램이 아니므로 , 기능으로 서로 비교하여 판단하여서는 안됩니다 . 간단한 기능이지만 사용이 불편하고 어려울 수도 있습니다 . HTML 기반의 프로그램이므로 이에 맞는 사용방법을 습득하여 사용하시기를 권장해 드립니다 .

표셀 병합

열 분할

행 분할

글쓰기 화면

글쓰기 > 글 작성하기 예시

1. 제목 입력 부분

제목 입력란에 글제목을 입력합니다 . ‘ 제목색깔’을 선택하고 제목 글씨를 굵게 하는 기능을 사용할 수 있습니다 .

기본값은 보통 굵기와 검정색 글씨 입니다 .

빨간색으로 표시한 것은 현재 작성중인 게시글에 관한 옵션 사항입니다 .

‘ 댓글 허용’에 체크 되어 있어야 회원들이 이 게시물에 댓글을 달 수 있습니다 . 체크하지 않으면 댓글을 달지 못합니다 .

‘ 엮인글 허용’은 블로그의 ‘트랙백’이라는 개념으로 게시물 및 댓글에 관련한 것인데요…

‘ 알림’은 댓글이 달렸을때 쪽지로 알려주는 기능입니다 . ‘ 엮인글 허용’과 ‘알림’ 은 꼭 필요한 것이 아니므로 그대로 놓아둡니다 .

[ 옵션 조절에 따라서 아래와 같이 제목 출력이 됩니다 . ]

글쓰기 화면

글쓰기 > 글 작성하기 예시

2. 내용 입력 부분 ①

내용을 입력합니다 . 직접 입력하거나 , ‘ 메모장’에 미리 작성했던 것을 카피해서 붙이기 합니다 . 아래한글이나 워드 등에서 작성한 글은 ‘메모장’으로 옮긴 후 다시 카피하여 ‘텍스트’만 옮기도록 합니다 .

강조할 부분을 마우스로 드래그 하여 선택 합니다 .

선택한 단락을 24px 로 지정하고 , 굵게 하였습니다 .

글쓰기 화면

글쓰기 > 글 작성하기 예시

2. 내용 입력 부분 ②

더 강조하고 싶은 단어를 선택합니다 . 32px, 밑줄 , 분홍색을 적용합니다 .

아래의 문장 2줄은 숫자로 된 목록형태를 적용해 봅니다 . 적용할 단락을 저렇게 걸쳐서 선택하면 됩니다 .

글쓰기 화면

글쓰기 > 글 작성하기 예시

2. 내용 입력 부분 ③

입력한 글에 대하여 마우스로 드래그하여 선택하고 에디터 툴을 적절히 활용해서 위와 같은 게시물을 만들었습니다 .

에디터 기능을 습득하여 다양하고 멋진 게시물을 작성할 수 있습니다 .

글쓰기 화면

글쓰기 > 글 작성하기 예시

2. 이미지 넣기 ①

게시물에 사진을 넣을 때에는 다음과 같은 방법으로 합니다 .

① 내용 입력란 아래에 있는 ‘파일첨부’ 버튼을 클릭하여 등록하려는 이미지 파일을 선택하여 등록 합니다 .

② 첨부하는 이미지는 제한 용량 범위에서 숫자 제한 없이 무제한으로 등록 할 수 있습니다 .

③ 이미지 파일을 등록하면 좌측에 조그만 사각형으로 보여집니다 .

④ 등록된 파일 목록에서 파일명을 클릭하면 해당 이미지가 좌측 사각형에 표시 됩니다 .

⑤ 이미지를 넣으려는 위치에 마우스로 클릭하여 ‘마우스 커서’를 위치 시킵니다 .

⑥ ‘ 본문삽입’ 버튼을 클릭하면 등록된 파일 목록에서 선택된 이미지가 본문에 삽입 됩니다 .

글쓰기 화면

글쓰기 > 글 작성하기 예시

2. 이미지 넣기 ②

⑦ 좌측의 썸네일 사각형 이미지를 마우스로 클릭 후 본문에

드래그하여 원하는 위치에 넣을 수도 있습니다 .

마우스로 클릭하여 클릭한 상태로 본문의 원하는 위치로 드래그 하여 옮김

‘ 본문삽입’ 버튼으로 넣은 이미지는 원래의 이미지 사이즈로 들어갑니

다 .

마우스로 드래그하여 본문에 삽입한 이미지는 게시판

가로폭에 꽉 차게 크기가 조절되어서 들어갑니다 .

글쓰기 화면

글쓰기 > 글 작성하기 예시

2. 이미지 넣기 ③

이미지의 사이즈를 조절하려면 ,

본문에 들어간 이미지를 클릭하여 선택합니다 .

선택된 이미지는 상하좌우모서리에 작은 사각형이 나타납니다 .

이 사각형을 마우스로 클릭 , 드래그 하여 이미지의 크기를 조절 할 수 있습니

다 .

⑧ 본문에 삽입된 이미지를 삭제하려면 , 위와 같이 해당 이미지를 선택한 후에 키보드의 ‘ delete’ 키를 눌러서 삭제 합니다 .

⑨ 사진을 본문에 넣기 전에 등록한 이미지 파일 중 , 사용하지 않는 파일은 지우도록 합니다 . 아래의 그림과 같이 처음에 4개의 이미지를 등록하였고 , ‘푸른언덕 .jpg’ 이미지는 사용하지 않아서 삭제 할 때 , 해당 파일명을 선택하고 오른쪽의 ‘선택삭제’ 버튼을 눌러서 삭제하면 됩니다 .

사용하지 않는 이미지 파일을 삭제하지 않으면 , 자동으로 게시물이 맨 앞에 보여지게 되니 주의하세요 .

글쓰기 화면

글쓰기 > 댓글

1. 댓글 달기

게시글의 하단부에는 위의 그림과 같이 댓글을 달 수 있는 기능이 있습니다 .

해당 게시글에 대한 의견등을 작성하여 “댓글 등록” 버튼으로 댓글을 등록합니다 .

‘ 파일첨부’ 기능을 이용하여 게시판 에디터와 같은 기능을 사용할 수 있습니다 .

‘ 댓글 등록’ 버튼

댓글 삭제

댓글 수정

댓글의 댓글 달기

댓글 입력란

글 등록할 때의 여러 가지 오류 사항

그 동안 리뉴얼 작업 후 , 많은 문제점이 지적 되었습니다 . 이 부분은 게시판 기능상의 문제 , 홈페이지 세팅에 따른 문제 , 인터넷

브라우저의 문제 , 올바르지 않은 사용의 문제 등이 복합적으로 나타난 것입니다 . 크게 다음과 같이 정리를 해 보았습니다 .

[ 문제점 ] [ 원인 ] [ 해결방법 ]

아래한글 , 워드 등의 문서에서 복사한 글이 원문과 다르게 보여짐 . 게시판에서 수정할 때 수정도 잘 안됨 .

해당 프로그램과 인터넷 브라우저는 호환성이 없음 .해당 프로그램과 게시판의 기능에 많은 차이가 있음 .

이런 방법으로 인터넷 게시판에 글을 올리는 것은 문제가 생길 수 밖에 없음 . 가급적 이 같은 방법으로 사용하지 말고 , 해당 파일을 첨부하여 올리는 방법으로 이용해야 함 .

다음 카페 등 타 홈페이지 에서 복사한 글이 원문과 다르게 보여짐 .

홈페이지 마다 각각 다른 디자인 요소 (css) 를 적용하고 있으며 , 그에 따라 홈페이지 마다 보여지는 화면이 다름 .

글을 카피하여 붙일 때 , 원문이 등록되어진 홈페이지의 디자인 요소가 코드상에 따라 들 어 오 기 때 문 에 , HTML 소 스 를 많이 정리하고 수정해야 함 .

Iframe, script 등 일부 태그가 작동하지 않음 .

게시판 자체에서 사이트의 보안 강화를 위해서 , 악용 될 수 있는 일부 HTML 태그를 사용하지 못하도록 막아 놓았음 .

사 용 하 지 못하 게 막아 놓은 태 그 들 중 대부분을 사용할 수 있도록 조취함 .

글등록 화면 , 미리보기 화면 , 등록된 글이 조금씩 서로 다르게 보여짐

각각 화면의 구성 요소들이 각각의 특성에 따라서 조금씩 다르게 배치되어 있고 , 간격 , 사이즈 등이 조금씩 달라서 생기는 문제임 .각 화 면 이 똑같 이 보 여 지 게 제 작 된 것 이 아니라 , 글 등록 전에 미리보기 기능으로 비슷하게 확인하는 용도로 제작됨 .

XpressEngine 을 제 작 , 배 포 하 는 XE 개발자 포럼에 문제점을 등록하여 , 향후 업데이트시에 보완 될수도록 보고 예정 . ( 이 문제점은 크게 이슈가 되지 않는 현상이라 반영될지는 미지수입니다 .)

HTML 편집기 이용시 끝부분의 코드가 일부 짤리는 현상

현재까 지 특별한 원 인 을 찾을 수 없 음 . 마 이 크 로 소 프 트 Internet Explore 브라우저에서만 나타나는 문제임 .

파이어폭스 , 사파리 등의 타 브라우저에서는 나타나지 않는 현상 . XE 문제로 보여지지 않기 때문에 , 원인 파악 후 조취 예정 .

첫화면 로그인 영역이 어긋나 있음 . Internet Explore 6 버전에서 나타남 . 해당 영역을 table 구조로 변경하여 오류 보정 .