태그 보관물: CSS

HTML/CSS

페이지 리프레시 없이 CSS만 리로드하기

댓글 남기기

웹페이지 개발할 때 CSS 수정하고 확인을 위해서 수시로 페이지 리프레시를 하다보면 무척 귀찮습니다. 더욱이 AJAX를 사용하는 경우에는, 작업중인 화면을 보기 위해 여러 번 클릭을 해서 들어가야 하는 번거로움도 있고요.
이럴 때 편하게 페이지 리프레시 없이 CSS만 다시 불러올 수 있는 방법을 소개합니다.

파이어폭스의 부가기능(도구 > 부가기능) 메뉴로 들어가서, “CSS”로 검색을 해보면 다양한 플러그-인 들을 찾을 수 있습니다.
css reloader search result

이 중에서 마음에 드는 녀석을 골라서 사용하면 되겠습니다.
물론 크롬에도 비슷한 부가기능 들을 쉽게 찾을 수 있습니다.

그런데, 이미 Web Developer Toolbar를 사용하고 있다면, 굳이 새로운 플러그-인을 설치할 필요가 없습니다.
웹 디벨로퍼 툴바에서 CSS > Reload Likned Style Sheets 메뉴를 실행하면, 페이지를 새로고침하지 않고 CSS 파일만 새로 불러와서 수정된 내용을 바로 확인 할 수 있습니다.

그러나 매번 두 번씩 클릭을 해야하는 것이 여간 불편한 것이 아닙니다. 이 점에 대해서도 대비책이 있는데, 그것은 바로 단축키를 지정하는 것입니다.
페이지 리프레시 없이 CSS만 리로드하기 더보기 →

HTML/CSS

CSS/JavaScript로 만든 프로그래스 바

댓글 남기기

얼마전 AS3으로 짠 프로그래스 바를 CSS와 자바스크립트를 사용해서 비슷한 방법으로 만들 수 있네요. 물론 브라우저와 버전에 따라서 차이가 나긴 합니다. 일단 파이어폭스와 IE9, 맥용 사파리 에선 정상적으로 보이네요.
크롬이나 구버전의 IE 등에서는 border-radius와 overflow가 무시되거나 다르게 보여지는 경향이 있으므로, 이들 브라우저에서는 직사각형 형태로 만들어야 할겁니다.

우선 태그는 다음과 같이 2개의 DIV 태그를 사용해서 간단합니다.

<div class="progressbar shadow"><div class="progress embossed" id="progress"></div></div>

CSS로 각각의 DIV에 스타일을 입히고,

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

.progressbar{
	border-radius:10px;
	position:relative;
	width:250px;
	height:20px;
	background-color: #EFEFEF;
	overflow:hidden;
    -webkit-box-shadow: inset 5px 5px 8px rgba(255,255,255,1), inset 5px -5px 8px rgba(0,0,0,0.5), 2px 2px 3px rgba(0,0,0,0.3);
    -moz-box-shadow: inset 5px 5px 8px rgba(255,255,255,1), inset 5px -5px 8px rgba(0,0,0,0.5), 2px 2px 3px rgba(0,0,0,0.3);
    box-shadow: inset 5px 5px 8px rgba(255,255,255,1), inset 5px -5px 8px rgba(0,0,0,0.5), 2px 2px 3px rgba(0,0,0,0.3);
}
.progress{
	border-radius:10px;
	position:absolute;
	left:-250px;
	width:250px;
	height:20px;
	background:url(/blog/wp-content/uploads/2012/11/test.gif) repeat-x 0px 0px;
    -webkit-box-shadow: inset 5px 5px 8px rgba(255,255,255,1), inset 5px -5px 8px rgba(0,0,0,0.5);
    -moz-box-shadow: inset 5px 5px 8px rgba(255,255,255,1), inset 5px -5px 8px rgba(0,0,0,0.5);
    box-shadow: inset 5px 5px 8px rgba(255,255,255,1), inset 5px -5px 8px rgba(0,0,0,0.5);
}

마지막엔 자바스크립트를 사용해서 backgroundPosiiton을 제어하는 것으로 마무리.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

var p = 0;
var pct = 0;
function loading(){
	var prg = document.getElementById("progress");
	if(prg){
		p++;
		if(p >= 20){p = 0;}
		prg.style.backgroundPosition = p + "px 0px";
		pct++;
		if(pct >= 0){pct = -250;}
		prg.style.left = pct + "px";
	}
}
setInterval(loading, 50);