앞의 두 게시물에서 JavaScript 최적화와 CSS Sprite를 적용해서 블로그 로딩 시간을 줄이는 방법에 대해 이야기했다. 이번에 이야기할 내용은 앞의 두 내용보다 훨씬 간단히 적용할 수 있으면서도 JavaScript를 많이 사용하는 사이트나 블로그에서 그 효과가 더 크다. Ctrl + C, Ctrl + V만 잘하면 끝이다. 웹 사이트를 표시할 때 해당 사이트의 HTML과 CSS를 참고 해서 작성된 순서대로 표시한다. 그런데 JavaScript 적용 방법에 대한 많은 글에서 인라인 JavaScript나 js 파일 적용에 대해 다음과 같이 설명한다. 여기 전체를 복사해서 사이에 붙여넣기 하세요~ 여기서 문제가 발생한다. 티스토리를 기준으로 skin.html 파일 구성을 살펴보면 거의 맨 위에 가 위..

글을 읽기 전에... 이 게시물에서는 태그 및 CSS에 대한 기본적인 이해가 있다는 바탕에 개별 이미지를 사용하던 방법을 CSS Sprite를 사용하는 방법으로 전환하는 내용만 간략히 다룰 것입니다. 각 태그 및 CSS 속성에 대한 설명은 생략합니다. 홈페이지나 블로그 스킨을 구성하다 보면 이미지를 많이 사용하게 된다. 상단의 블로그 메뉴, 사이드 바, 검색 창, 각종 링크 등 많은 이미지를 사용하다 보면 각 이미지를 불러오기 위해 여러 번 HTTP 서버에 요청한다. 10개의 이미지를 사용하면 그 페이지를 정상적으로 표시하기 위해 10번 파일을 내려받는다. 이미지를 사용하지 않으면 그만큼 웹페이지 로딩 시간이 단축되겠지만, 이미지를 꼭 사용해야 할 상황도 있다. 이럴 때 웹 요청을 줄이는 방법이 CSS ..

JavaScript는 웹상에서 특정 명령을 수행하는 명령어다. 블로그에 어떤 효과를 추가할 때 JavaScript를 많이 사용한다. 내가 티스토리 스킨에서 봤던 JavaScript는 스킨의 날짜 표시 형식을 바꾼다든지 사이드바의 분류 항목을 접고 편다든지 화면을 스크롤 하면 맨 위로 이동하는 버튼이 생긴다든지 이미지 크기가 글 영역을 벗어나지 않게 한다든지 하는 기능을 수행했다. 스킨을 수정하다 보면 아래와 같은 문구가 보일 때가 있다. (티스토리는 [설정] - [스킨] - [HTML/CSS 편집] - [skin.html]에 있음.) 이 부분이 JavaScript를 사용하는 부분이다. 사이에 있는 내용 또는 지정된 위치의 js 파일이 바로 JavaScript다. 블로그에 다양한 효과를 적용하려고 욕심을 ..