Tag Archives: css

YDN이 권장하는 웹사이트의 최적화 지침

웹 사이트 성능 최적화 에반젤리스트(Evangelist)로 활동 중인 YDN(Yahoo! Developer Network)의 Steve Souders씨가 작성한 15개의 웹 사이트 성능 최적화 지침이다. “High Performance Web Sites“라는 이름으로 책이 출간되어 있으며, Firebug의 확장기능인 YSlow역시 이 규칙들에 기반하고 있다. 다음 예제들은 지침에 근거하여 작성한 실습 예제들로서 조금더 구체적인 성능향상 방법들을 제시한다. 규칙 1 – HTTP 요청을 줄여라 HTML에 속해있는 이미지, 스크립트, 플래시 등은 서버로 요청하고 응답받기까지의 시간을 필요로한다. 이러한 외부파일들이 많으면 많을 [...]
Posted in css/html, development, info, javaScript | Also tagged | Leave a comment

about DIV

원문 : http://kukie.net/2006/01/05/238/ HTML에서의 div는 Division Marker의 줄임말로서 영역을 구분짓거나 무리(구분)지어주는 엘리먼트이다. 오늘은 div에 대해 알아보자. div는 div를 열고 닫은 앞뒤로 줄바꿈이 되는 블럭 레벨 항목 block level element이다. div의 앞 뒤에 있는 항목들이 가로줄로 흐르지 않고, 엔터값을 입력한 것 처럼 아래로 줄 지어진다는 말이다. div로 레이아웃이나 박스를 구성하기 위해, CSS에서 가장 많이 쓰는 속성인 position 값으로는 static, relative, absolute, [...]
Posted in css/html, development | Also tagged , | Leave a comment

CSS Box Model

원문 : http://minicube.kr/blog/entry/CSS-박스-모델에-대해 CSS 에서 가장 중요한 개념 중 하나가 박스모델입니다. 박스모델의 개념을 이해함으로써 각각의 엘리먼트를 문서에 배치하는 원리를 알 수 있기 때문입니다. 그리고 이를 응용하여 전체 레이아웃을 정의할 수도 있고, 콘텐츠를 디자인할 수도 있기 때문에 CSS를 통한 디자인을 하려면 박스모델을 이해하는 것이 필수라고 할 수 있습니다. 우선… 첫번째로 이해해야 할 명제는 “모든 엘리먼트, 태그는 박스 모델이다” 라는 것입니다. <br>, <b> 같은 표현을 [...]
Posted in css/html, development | Also tagged , | Leave a comment

css 를 사용한 중앙 정렬

원문 : http://wiki.standardmag.org/css_align 기존에는 어떤 오브젝트라도 가운데로 정렬하기 위해 아래와 같은 코드를 사용해 왔습니다. <table align="center">...  <div align="center">... 이것을 CSS기반으로 수정한다면 <table style="text-align: center;">...  <div style="text-align: center;">... 위와 같이 사용할 수 있는데, 이것은 블럭 레벨 오브젝트(table,div,p etc) 안에 있는 인라인 오브젝트(일반 텍스트, img etc)에만 적용되는 값입니다. 기존의 속성과 동일하게 블럭 레벨 오브젝트를 중간에 배치하고 싶다면 해당 오브젝트에 아래와 같이 margin을 사용합니다. <table style="margin: 0 auto;">... 또는 table [...]
Posted in css/html, development | Tagged | Leave a comment