카테고리 : css
-
HTML Critical rendering path의 이해
아래의 글은 "Understanding the Critical Rendering Path"의 내용을 번역한 글이다. 브라우저가 서버에서 페이지에 대한 HTML 응답을 받으면 화면에 표시되기 전에 많은 단계를 거쳐야 한다. 브라우저가 페이지의 초기 출력을 위해 실행해야하는 이 순서를 "Critical Rendering Path"(이하 CRP)라고 한다. 사이트의 성능을 향상시키는 방법을 이해하는데 CRP에 대한 지식은 매우 유용하다. CRP는 아래와 같이 6단계로 구성된다. DOM 트리 구축(Constructing the DOM Tr
-
CSS로 이미지 세로 중앙 정렬(Vertical align)하기
HTML에서 <img>를 CSS만으로 비율을 유지한 채로 특정 영역의 중앙에 출력하는 방법은 다음과 같다. <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <style type="text/css"> /* 예시를 위한 css */ dl { float:left; margin-right:20px; } dt { clear:both; } dd { margin:0 0 20px 0; padding:10px; float:left; } dd > img, dd > div { border:#ccc sol
-
CSS Units - px, pt, em, % 등
w3schools의 CSS Units에는 다음과 같이 CSS에서 사용하는 단위에 대해 안내되어 있다. CSS는 단위(길이)를 표현하기 위한 여러가지 단위가 있다. width, margin, padding, font-size, border-width 등과 같은 많은 CSS 속성에서 사용한다. 단위는 10px, 2em과 같이 숫자 뒤에 공백없이 붙여서 사용하며 0인 경우는 생략할 수 있다. 단위는 음의 수를 가질 수 있으며 상대/절대 단위로 구분할 수 있다. Browser Support Unit Chrome IE Firefox Safa
-
필요해서 만들어본 CSS Image Sprites 생성기
웹 기반 프로그램 개발을 주업으로 하다보니 CSS에 관련된 작업도 많이 하게 된다. 게다가 웹 서비스 성능에 대해 고민을 많이 하게되는 것도 당연하다. 그중에서도 간혹 필요하지만 마땅한 도구가 없어 고민을 하게되던 것 중 하나가 CSS Image Sprite 도구다. 얼마전에도 비슷한 작업이 필요하게되어 온라인 도구들을 찾던 중 마땅한 것이 없어 필요에 의해 도구를 하나 만들어 버렸다. 일단 이 도구에 대해 설명하기 전에 CSS Image Sprite가 무엇인지 부터 알아보자. CSS Image Sprite 기법 간단하게 설명하자면
-
-webkit-tap-highlight-color 사용하기
iOS와 안드로이드의 웹킷 기반 브라우저(사파리, 크롬 등)에서 링크를 터치하면 해당 위치를 표시하는 하이라이트가 나타난다. 이 하이라이트의 색상을 바꾸고 싶을 때 사용할 수 있는 것이 -webkit-tap-highlight-color 이다. 사용법은 아주 간단하다. -webkit-tap-highlight-color: <color>; 예를들어 검은색 계열에 불투명도 30%를 지정하고 싶다면 * { -webkit-tap-highlight-color:rgba(0,0,0,0.3); } 으로 지정하면 된다. *는 모든 개체를 뜻하므로 특정