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

홈페이지 사용 안내
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 구조로 변경하여 오류 보정.