Skip to Content
Go Back
안형우

안녕하세요. 14년차 풀스택 웹개발자 안형우입니다. 이 블로그에서는 WordPress, PHP, CSS, 사용성, 리눅스 서버 등 풀스택 웹개발에서 마주하는 다양한 문제 상황과 해결책, 필요한 개념들을 다룹니다. 👉 소개


작업물

📌 CSS가 어려운 이유 — 프로젝트 중심 실전 CSS 강의 소개 2023-04-13
📌 워드프레스, 답답한 빌더와 플러그인 대신 시원하게 커스터마징하기(강의) 2023-01-15
📌 아무도 말하지 않는 PHP의 좋은 점 2018-10-13
📌 유지보수하기 쉬운 CSS 전략(슬라이드) 2016-12-20
📌 워드프레스 테마에서 템플릿 파일 매칭 순서 2013-05-12
📌 [번역] CSS 코드 냄새 2013-01-01

[jQuery] 구글 안내 메세지 흉내낸 함수

jGrowl이라는 플러그인을 발견했는데 내가 만든 것보다 훨씬 좋다. 이걸 추천한다. – 2011.6.24

소스코드에 오류가 있었다. 오늘 수정했다. – 2010.3.10

구글 안내 메세지라는 게 아래 버튼을 클릭해 보면 뭘 말하는 지 알 수 있을 것이다.(단, IE6에서는 메세지가 화면의 맨 위가 아니라 문서의 맨 위에 나오게 된다. 알아서 수정해 쓰시길. 난 거기까지는 필요하지 않아서 만들지 않았다.)

로드 중… 이라고 뜨는 걸 말한다.

가독성도 있고 깔끔해서 좋다.

일단 이걸 사용하려면 jQuery 1.4 이상을 사용하고 있어야 한다. 1.4 미만을 사용하고 있었다면 이 기회에 업그레이드하시라.

그리고 아래 function을 넣자.

/** 정보 메세지 출력 함수 by mytory
 */
function infoMsg(text) {
	jQuery('body').append('<p class="infoArea"></p>');
	jQuery('.infoArea').text(text).css( {
		left : (jQuery('body').width() - jQuery('.infoArea').width()) / 2 + 'px',
		top : 0
	}).fadeIn().delay(3000).fadeOut('slow', function() {
		$(this).remove();
	});
}

css도 넣어야 한다.

css는 아래와 같다.

.infoArea {
	position: fixed;
_position: absolute;
	display: none;
	background-color: #fff1a8;
	padding: 6px;
}

한 가지 더 신경써 줘야 할 게 있다. 안내 메세지를 fixed로 해 놨는데 ie6에서는 이 css가 작동하지 않는다. 그래서 _position: absolute; 를 넣었다.(디자인과 IE6를 대하는 관점 보기) ie6에서는 absolute로 화면에 고정될 것이다.

이렇게 하고 사용법은 아래와 같다.

infoMsg('안녕하세요')

이렇게 사용하면 구글처럼은 아니지만 유사한 가독성을 가지는 안내 메세지를 출력할 수 있다. css는 나름대로 맞게 수정해서 사용하시라. 배경색은 구글 것과 똑같은데, 글꼴에 대한 css는 넣지 않았다.

모서리를 둥글게 하는 것도 css에 넣지 않았다.

안녕하세요. 14년차 풀스택 웹개발자 안형우입니다. 이 블로그에서는 WordPress, PHP, CSS, 사용성, 리눅스 서버 등 풀스택 웹개발에서 마주하는 다양한 문제 상황과 해결책, 필요한 개념들을 다룹니다. 👉 소개


작업물

댓글 (4개)

    • 넹 ^^ 저도 이거 만들고 나서 이건 곳곳에 적용할 수 있겠다 싶어서 소스 공개했어요. 플러그인으로 만들면 더 좋겠지만 거기까지 욕심내진못했고요 ㅋ
      몇 가지 더 수정하고싶은 게 있는데 할 수 있을지는 모르겠어요 ^^

  • 웹사이트에 append 사용해서 메세지 뛰우는거 적용해보려 하는데요

    메일로 자세히 소스 보내주실수 있으세요 혹시

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다