CSS8 CSS, Javascript 전송량 줄이기!! [Minify] 모바일 브라우저 사용도 많이 늘어나고, 빠른 피드백이 중요시 되는 사회가 되면서 사이트 속도에 대한 이슈가 늘어나는 것 같습니다.사이트 속도를 높이는 방법은 여러가지가 있습니다.Image sprites나 lazy loading, gz 압축 등의 방법이 있는 것 같네요. Minify는 CSS, Javascript 에서 불필요한 부분을 제거하고 변수길이등을 조절하는 것으로 파일 크기를 줄이고, 캐쉬와 만료일 지정을 통해 사이트 트래픽을 줄여주는 소프트웨어 입니다. PHP로 제작이 되어 있으며 단순 복사 및 .htaccess 를 수정하는 것으로 설치가 가능하기 때문에 비교적 쉽게 적용 가능합니다. 설치과정!1. https://code.google.com/p/minify/ 로 이동해서 배포중인 압축 파일을 다운.. 2014. 7. 4. Javascript 를 이용해 동적으로 CSS 스타일 추가하기 자바스크립트를 이용해서 동적으로 스타일을 추가하는 방법입니다.여기서 소개하는 방법은 DOM 객체 하나 하나에 스타일을 추가하는 것이 아니라, 규칙 자체를 head 안에 넣는 방법입니다.태그를 생성해 준다고 보면 되겠네요. IE7,8,9,11 과 Chrome, Firefox, Safari 에서 테스트 해봤습니다. [출처:http://stackoverflow.com/questions/524696/how-to-create-a-style-tag-with-javascript][원본 코드에서 약간의 수정이 가해졌습니다.] 위와 같은 형태로 태그 하단부에 작성해 주시면 됩니다.볼드 처리된 부분을 보시면 아시겠지만, 위 스크립트를 실행하면 배경색을 빨갛게 만들어 줍니다. 규칙 자체를 추가하는 방법이기 때문에, 동적인 .. 2014. 3. 20. 항목 배열시 가운데에 간격 넣기!! CSS 를 이용해서 어떤 항목을 배열한다고 할 때 어려움이 많습니다. 만약 다음과 같은 형태로 출력 하고자 한다면??? 고정된 크기로 출력을 하는 경우에는 너비를 지정해 주어서 출력하는 것도 좋은 방법입니다. 테이블을 사용하나 DIV를 사용하나 너비 지정하는 방법을 쓰면 효과적으로 작동합니다.문제가 있다면, 전체 가로 너비가 변경되는 경우에는 다시 손을 봐줘야 한다는 점이죠! 자바스크립트를 이용하는 방법도 있습니다. 문제는 속도가 느려질 수 있다는 것? 그렇다면 웹 표준을 준수하면서 저런걸 할 수 있을까요?우선은 각 DIV를 33.33%로 만들어 주면 3등분은 가능하겠네요~(정확히는 아니지만..) 그 다음엔? 생각보다 간단하게, 각 항목에 'margin-right:20px;' 을 적용시켜 주고, 전체를 .. 2013. 4. 15. IE8 핵 사용하기(IE9 포함) HTML5 로 넘어가야 하는 이 시기에 아직도 크로스브라우징 문제에 발목이 잡혀 있다는 것이 원통할 따름입니다. ㅠㅠ 그나마 올해 초 Microsoft에서 IE6,7에 대해 강제 업데이트를 시행한 이후로 항상 사용자 중 대다수를 차지하던 IE6의 비율이 많이 줄어들게 되었죠~ 이건 정말 다행입니다. 하지만! IE8이 남아 있습니다. 사실 IE9도 그다지 맘에 들진 않습니다만, IE8은 웹 표준을 정말~ 정~말 어설프게 지원해서 골치가 아프네요.아직도 Windows XP 사용자가 많아서인지 국내 브라우저 사용자 비율 중 IE8이 가장 높은 것 같습니다. 그래서!! 다른 브라우저는 버리더라도, IE8은 안고 갈 수 있도록, 필요악인 IE8 핵을 좀 적어봅니다. 1. 기존에 많이 알려져 있던 핵! div {h.. 2012. 8. 2. 이전 1 2 다음
