overfloweblog » css http://overfloweb.com/blog are you driving me crazy? Sun, 13 May 2012 16:59:15 +0000 en hourly 1 http://wordpress.org/?v=3.3.2 YDN이 권장하는 웹사이트의 최적화 지침 http://overfloweb.com/blog/index.php/archives/39 http://overfloweb.com/blog/index.php/archives/39#comments Thu, 10 Apr 2008 02:21:50 +0000 overflow http://overfloweb.com/?p=39 웹 사이트 성능 최적화 에반젤리스트(Evangelist)로 활동 중인 YDN(Yahoo! Developer Network)의 Steve Souders씨가 작성한 15개의 웹 사이트 성능 최적화 지침이다. “High Performance Web Sites“라는 이름으로 책이 출간되어 있으며, Firebug의 확장기능인 YSlow역시 이 규칙들에 기반하고 있다. 다음 예제들은 지침에 근거하여 작성한 실습 예제들로서 조금더 구체적인 성능향상 방법들을 제시한다.

규칙 1 – HTTP 요청을 줄여라

HTML에 속해있는 이미지, 스크립트, 플래시 등은 서버로 요청하고 응답받기까지의 시간을 필요로한다. 이러한 외부파일들이 많으면 많을 수록 웹 사이트의 성능을 떨어트리기 마련이다. 다음은 예제들은 HTTP 요청을 줄이기 위한 방법을 제시하며 동일한 결과물을 놓고 직접 비교할 수 있다. 참고로 예제 6 ,7번에서 사용된 Data URI는 IE7 이하에서 지원하지 않기 때문에 그림의 떡이나 마찬가지다.

 

규칙 2 - CDN을 사용하라

CDN(Content Delivery Network)은 접속하는 사용자의 위치에 따라서 응답이 빠른 서버로 접속하여 필요한 파일들을 호출하는 것을 말한다. 글로벌라이제이션 서비스를 지향하는 서비스에 적절한 성능향상 방법으로 일반(특정 지역만을 대상으로 하는 서비스) 사이트에서는 만족스러운 향상효과를 기대하기 어렵다.

  • 예제 1 - CDN : CDN 사용
  • 예제 2 - No CDN : CDN 미사용

 

규칙 3 – Expires 헤더를 추가하라

자바스크립트를 이용한 Ajax와 복잡한 UI 등이 널리 애용되면서 더욱 많은 외부파일(스크립트와 이미지, 스타일시트 등)들을 생산하게 됨에 따라 이를 효율적으로 처리하지 못할 경우 웹 사이트 성능이 크게 저하되기도 한다. 외부파일들의 헤더에 Expires 정보를 추가하여 캐시하는 것 만으로도 웹 사이트의 성능을 끌어 올릴 수 있다.

 

규칙 4 – Gzip 압축을 사용하라

외부파일들을 압축하여 성능을 높일 수도 있다. 현존하는 대부분의 브라우저가 Gzip 압축전송을 지원하며, 이또한 헤더 정보를 수정하고 비교적 간단한 서버단 작업으로 구현할 수 있다. 

 

규칙 5 – 스타일시트(CSS)는 위에 선언하라

스타일시트(CSS)는 HTML의 헤드(Head)태그의 최상단에 위치하는 것이 성능향상에 도움된다.

 

규칙 6 – 스크립트는 아래에 작성하라

스크립트 파일들은 바디(Body)태그에서 호출하는 것으로 성능을 높일 수 있다. 다음 예제들은 자바스크립트 위치에 따른 성능변화를 매우 직관적으로 표현하고 있다.

 

규칙 7 – CSS에서 Expressions 사용을 자제하라

IE계열 브라우저에서만 작동하는 expression은 IE6 이하에서 표현하지 못하는 스타일링에 상습적으로 사용한다. 브라우저로 하여금 다소 무리한 연산을 요구하기 때문에 사용을 자제하는 것이 좋다.

 

규칙 8 - 자바스크립트와 스타일시트는 외부파일로 분리하라

너무나도 당연한 성능향상을 기대할 수 있다. 일단 브라우저에서 캐시효과를 누릴 수 있는 것 외에도 필요한 스크립트만을 호출할 수 있는 등 부가적으로 얻어지는 가치는 상당하다.

 

규칙 9 - DNS 확인 시간을 줄여라

DNS(Domain Name System)란 쉽게 말해 인터넷의 전화번호부라고 할 수 있다. 도메인이 사람이름이고 IP가 전화번호인 셈이다. 전화번호부에서 원하는 전화번호를 찾기위해 시간이 걸리는 것 처럼 브라우저 또한 DNS 확인을 위한 시간을 필요로한다. 여기에 들이는 시간을 줄여서 웹 사이트의 성능을 높일 수 있다. DNS정보 역시 브라우저의 저장영역에 캐시되어 있기 때문에 같은 도메인 네임을 사용할 경우 DNS 확인에 걸리는 시간을 최소화 할 수 있는 것이다. 도메인이 서로다른곳의 외부파일들을 불러올 때 고려해야 할 사항이다.

규칙 10 - 자바스크립트를 최소화 하라

JS, CSS 파일을 압축(Minified) 또는 암호화(Obfuscated or Packed)하여 용량을 줄일 수 있다. Minify는 파일 내부의 개행과 주석 그리고 인텐트(들여쓰기) 등, 시스템이 이해하기에 불표한 문자열을 제거하여 용량을 줄이는 방법이고 Packing은 여러가지 압축기법으로 문장을 암호화하여 브라우저의 인터프리터에 의존해 해석(Evaluate)하는 방식으로 Minified 파일보다 압축률이 훨씬 높다. 참고로, 매번 Packed하는 것이 꼭 좋지만은 않다.

 

규칙 11 – 리다이렉트는 피하라

포워딩(Forwarding)과 달리 리다이렉트(Redirect)는 2차례에 걸쳐 통신하게 된다. 그만큼 서버로부터의 응답이 완료되기까지 소요되는 시간이 길기 때문이다.

 

규칙 12 – 중복되는 스크립트는 제거하라

때때로 자바스크립트 파일을 복수로 불러야할 때가 있다. 이 때 캐시설정을 하지 않았다면, 동일한 파일이라 할지라도 브라우저는 지속적으로 요청을 하고 같은 수행을 반복 한다. 이와 같은 스크립팅은 가급적이면 피하는 것이 좋다.

 

규칙 13 – ETag 헤더를 설정하라

ETag는 HTTP/1.1에 기본으로 사용하도록 설정된 태그로서 파일캐시 및 갱신 진위여부를 가리는데 사용된다. 캐시와 밀접한 연관이 있으므로 외부파일의 헤더에는 ETag를 항상 설정하여 전송량을 최소화할 수 있다. 보다 자세한 내용은 “응답헤더 설정으로 웹사이트 성능 개선하기“를 참고하자.

규칙 14 – AJAX를 캐시하도록 하라

Ajax요청 역시 Expires 헤더를 설정하여 캐시효과를 누릴 수 있다.

규칙 15 – 아이프레임을 현명하게 사용하라

아이프레임역시 src 속성에 의해 브러우저로 하여금 HTTP 요청을 할당한다. 아이프레임을 다수 사용할 때 src 속성을 지정하지 않는 것으로 로딩속도를 향상시킬 수 있다.

]]> http://overfloweb.com/blog/index.php/archives/39/feed 0 about DIV http://overfloweb.com/blog/index.php/archives/34 http://overfloweb.com/blog/index.php/archives/34#comments Tue, 08 Apr 2008 10:46:30 +0000 overflow http://overfloweb.com/?p=34 원문 : http://kukie.net/2006/01/05/238/

HTML에서의 div는 Division Marker의 줄임말로서 영역을 구분짓거나 무리(구분)지어주는 엘리먼트이다.
오늘은 div에 대해 알아보자.

div는 div를 열고 닫은 앞뒤로 줄바꿈이 되는 블럭 레벨 항목 block level element이다.
div의 앞 뒤에 있는 항목들이 가로줄로 흐르지 않고, 엔터값을 입력한 것 처럼 아래로 줄 지어진다는 말이다.

div로 레이아웃이나 박스를 구성하기 위해, CSS에서 가장 많이 쓰는 속성인 position 값으로는 static, relative, absolute, fixed, inherit가 있다.

Position 속성

static
CSS로 특별한 값을 지정해 주지 않아도 적용되는 기본값이다.
HTML 파일에서 중첩되지 않은 여러개의 div를 작성하면, 위에서 부터 차곡 차곡 쌓이는 기본적인 형태이다.
relative
한개의 div가 있고 relative로 설정할 경우엔 static과 큰 차이는 없다. 하위에 div가 있을 경우엔 하위의 div를 absolute 배열 할 수 있다.
absolute
흔히 레이어라는 개념으로 알고 있는 값이다. div에 top, right, bottom, left 값을 지정해서 원하는 위치에 고정되게 띄울 수 있다.
fixed
기본적으로 absolute와 같다. absolute는 canvas의 스크롤에 따라 올라가고 내려가지만 fixed의 경우는 스크롤에 상관없이 지정한 위치에 고정된다.
inherit
상위에서 지정한 값을 상속한다.

div를 설명하자면, 레이아웃layout 또는 박스모델 boxmodel을 빼놓고 말할 수 없다.
위에도 적었듯이 컨텐츠를 묶어주는 역할을 하는데, 컨텐츠를 묶어서 배열 하는 것이 곧 레이아웃layout이기 때문이다.

컨텐츠 안에서의 div는 사용자가 사용하기 나름일테고, 컨텐츠를 묶어주는 역할의 div는, 위치를 지정함(positioning)으로써 자신의 진정한 역할을 하게 된다.
여기서는 컨텐츠를 묶어주는 가장 크고 바깥의 영역을 담당하는 div에 대해 얘기하도록 하자.

positioning하는 것은 div를 float 시키거나 절대값으로 위치absolute positioning 하는 등 사용자가 원하는 위치에 위치시키는 것을 말한다.
positioning하기 위해서는 위에 나열한 position 속성을 사용하거나, float를 사용하여야 한다.

기본 적인 형태의 Layout

XHTML Layout - preview

XHTML code

<!doctype html public "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" >
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
 <title> New Document </title>
 <link rel="stylesheet" type="text/css" href="css/left.css">
</head> 

<body>
 <div id="header">헤더</div>

<div id="container">
 	<div id="contents">컨텐츠</div>
 	<div id="sidebar">사이드바</div>
 </div>

<div id="footer">푸터</div>
</body>
</html>

 

CSS code (float 사용)

body {
 margin: 0;
 padding: 10px;
 background-color: #FFF;
}
#container {
 width: 380px;
}
#header {
 background-color: #FF4A4D;
 height: 50px;
}
#contents {
 float: left;
 background-color: #FFC64A;
 width: 290px;
 height: 214px; /* 임의 지정 */
}
#sidebar {
 float: right;
 background-color: #85C69D;
 width: 90px;
 height: 214px; /* 임의 지정 */
}
#footer {
 clear: both;
 background-color: #3B83B1;
 height: 40px;
}

boxmodel의 예제는 Little Boxes에서 자세히 살펴볼 수 있다. 하단에 몇 개 더 소개하도록 하겠다.

절대값 위치absolute positioning에 대한 개념은 좌표를 지정하여 div를 배열하는 방식이기 때문에 기존의 레이어layer 개념을 알고 있다면 정확하게 익히는 것이 어렵지 않을 것이라고 본다.

그럼 float에 대해 좀 더 알아보자.
float의 값으로는 left, right, none, inherit가 있다.

float 속성

left
left로 설정된 엘리먼트가 HTML 코드에서 바로 다음 엘리먼트의 왼쪽에 위치하게 된다.
right
right로 설정된 엘리먼트는 바로 다음 엘리먼트의 우측에 위치하게 된다.
none
float 하지 않는다.static의 상태로 자연스럽게 박스가 쌓이는 형태라고 보면 된다.
inherit
상위에서 지정한 값을 상속한다.

float를 사용할 때는 clear에 대해서도 알아야 하겠다.
위에서 어떠한 항목에 대해 float:left; 혹은 float: right;를 설정하였을 경우 그 아래에 있는 것들도 영향을 받게 된다. 그것들에 대해 다시 초기화를 시켜주는 것이 clear이다.
left, right 각각 해당 정렬에 대한 영향을 없애주고 both는 둘 다 없애준다.

div의 width, height

특별히 width나 height를 정해주지 않으면 컨텐츠의 길이와 넓이에 따라 자동적으로 늘어나고 줄어든다.

만약에 width를 지정했는데, 끊기지 않는 텍스트나 커다란 이미지 혹은 링크로 인해 고정한 width보다 컨텐츠가 넓어질 경우에는 overflow 속성을 지정해서 해결 할 수 있다.
(FF에서는 박스는 고정되어 있고 컨텐츠만 삐져나오고, IE에서는 컨텐츠에 따라 박스가 함께 넓어 지기 때문에 레이아웃이 엄청 깨지는 것을 볼 수 있다. height를 고정한 경우에는 height에도 함께 적용 된다.)

overflow에 지정할 수 있는 속성으로는 visible, hidden, scroll, auto등이 있다.

visible
내용을 자르지 않고 블럭 밖까지 가도록 허용한다.
hidden
박스를 넘어갈 경우, 넘어가는 부분을 감추어 버린다. (잘림부분의 크기와 모양은 ‘clip’ 속성에 의하여 결정된다.)
scroll
박스에 기본적으로 scroll을 제공하게 된다. – print나 projection CSS에서 해당 div안의 넘치는 컨텐츠도 인쇄 해준다.
auto
박스는 고정해 두고, 박스보다 컨텐츠가 커질 경우 스크롤을 만들어 준다.

만약에 height를 지정했는데 FF에서 컨텐츠가 삐져나온다면, min-height를 이용하여 해결 할 수 있다.
고정된 값을 지정했다면, 컨텐츠가 많이 지더라도 div의 높이 값은 고정되어 있는 것이 맞다.
IE는 자체지능적;으로 컨텐츠에 따라 높이를 마음대로 높혀 버리는데, IE처럼 컨텐츠에 따라 div의 높이가 변해주길 바란다면 min-height라는 속성을 지정해 주면 된다. IE에서는 적용되지 않으므로 * html #id { height: 200px; } 같은 hack도 함께 써주어야 한다.

결론적으로 layout을 위해 div를 사용할 때에는 position, float에 대해서는 기본적으로 알아야 하고, 부가적으로 overflow를 알아두면 더욱 적절히 사용할 수 있겠다.

참고 링크

연관되는 것들에 대해 쓰다보니 글이 조금 길어졌다.
다음에는 layout을 구성할 때의 box model에 대해 적어봐야겠다.

]]> http://overfloweb.com/blog/index.php/archives/34/feed 0 CSS Box Model http://overfloweb.com/blog/index.php/archives/33 http://overfloweb.com/blog/index.php/archives/33#comments Tue, 08 Apr 2008 08:42:11 +0000 overflow http://overfloweb.com/?p=33 원문 : http://minicube.kr/blog/entry/CSS-박스-모델에-대해

CSS 에서 가장 중요한 개념 중 하나가 박스모델입니다.
박스모델의 개념을 이해함으로써 각각의 엘리먼트를 문서에 배치하는 원리를 알 수 있기 때문입니다. 그리고 이를 응용하여 전체 레이아웃을 정의할 수도 있고, 콘텐츠를 디자인할 수도 있기 때문에 CSS를 통한 디자인을 하려면 박스모델을 이해하는 것이 필수라고 할 수 있습니다.

우선… 첫번째로 이해해야 할 명제는 “모든 엘리먼트, 태그는 박스 모델이다” 라는 것입니다. <br>, <b> 같은 표현을 위한 태그를 제외하면, 자주 사용하는 <div>, <span>, <table>, <p> 등의 태그들은 기본적으로 사각형(박스) 형태로 되어 있습니다. 생각해보면 이러한 태그들이 원형으로 들어가는 것은 없지요? ^^;;
두번째는 “contents, padding, border, margin” 입니다. 모든 박스모델은 이러한 속성을 가지고 있고 이 순서대로 둘러싸여있다고 보시면 되겠네요. 또한 padding, border, margin이 각각 4가지 속성을 가지고 있는데, top, bottom, left, right 로 분리할 수 있어서 각 방향의 속성을 따로 지정해 줄 수 있습니다. 예를 들어 margin-right:2px; margin-left:2px; 등으로 이렇게 따로 지정해 줄 수 있으며, 각각의 속성은 임의대로 조합해서 사용할 수 있습니다.

사용자 삽입 이미지
  1. contents : 순수한 콘텐츠
  2. padding : 콘텐츠와 경계선 사이의 여백
  3. border : 경계선. 이 선 자체의 모양이나 두께도 바꿀 수 있다.
  4. margin : 경계선 밖에서 박스모델의 최종 경계선까지의 여백

원래 이론상 모든 태그에는 margin, padding, border의 초기값이 0으로 지정되어야 하는 것이 맞지만 각 브라우저의 설정에 따라 기본적으로 가지고 있는 간격이 존재할 수도 있습니다. 예를 들면 순서 없는 리스트를 의미하는 <UL> 내의 엘리먼트인 <LI> 태그의 경우 목록 모양을 만들어주기 위해 버튼 형태와 함께 기본적 패딩을 가지고 있습니다. 보통 CSS로 디자인하기 위해서 <LI> 속성에 list-style:none, padding:0 을 적용해주는 걸 많이 보셨을 거에요.

간단하게 <div>태그로 만든 박스에 패딩을 적용한 소스를 확인해 보겠습니다. 이 편이 박스모델을 이해하는 것이 훨씬 쉬울 것 같습니다.

<div style=”width:400px;background:#f2cccc;”>
<div style=”width:300px;background:#f4f4f4; padding:10px 20px; border:solid 2px red; margin-right:10px; margin-left:10px;“>
THIS IS BOX MODEL. THIS IS BOX MODEL. THIS IS BOX MODEL. THIS IS BOX MODEL. THIS IS BOX MODEL. THIS IS BOX MODEL. THIS IS BOX MODEL. THIS IS BOX MODEL. THIS IS BOX MODEL. THIS IS BOX MODEL. THIS IS BOX MODEL. THIS IS BOX MODEL. THIS IS BOX MODEL. 
</div>
</div>

이 모델을 분석하면 다음과 같이 됩니다.

사용자 삽입 이미지

첫번째 div 엘리먼트의 붉은색의 배경은 height를 지정하지 않고 width만 400px으로 지정하였습니다. 이 엘리먼트는 기본적으론 아무 것도 적용하지 않았기 때문에 padding과 margin은 모두 0입니다.
그 안의 두번째 div 엘리먼트는 width는 300px로 지정했으며, padding은 상하 10px, 좌우 20px이고 border는 상하좌우 모두 solid 형태의 2px, margin은 왼쪽과 오른쪽을 각각 10px로 정하였습니다.
즉 이 박스의 전체 width는 10(margin) + 2(border) + 20(padding) + 300(contents) + 20(padding) + 2(border) + 10(margin) = 364px 입니다.
참고로 background-color 속성도 적용되어있는데 background 속성은 contents + padding 영역에 적용이 됩니다.
height의 경우 콘텐츠에 따라 유동적으로 결정되도록 따로 height 를 주지 않아 일정한 높이는 없지만 2px 의 border가 상하에 적용되어 있고, padding이 상하에 10px 적용되어 있는 걸 확인할 수 있죠.

margin과 padding에서 쓸 단위는 px, em, % 등 상관없이 사용할 수 있습니다.
border의 경우 약간 틀린데 경계선의 모양과 색상을 따로 줄 수 있기 때문에 추가 속성이 있습니다. border-width 외에 border-style, border-color 속성 등이 있습니다. border-style 속성의 경우 경계선의 모양을 결정해주는데, 사용되는 밋밋한(?) 형태의 실선인 ‘solid’ 가 자주 사용됩니다.. border-color 속성은 보시다시피 색상을 지정하는데 RGB코드나 색상명으로 사용하구요. 이 세 속성을 연달아 사용할 수 있어서 border:solid 2px red; 등으로 지정할 수 있습니다.

1. margin 및 padding 의 간략한 표기
원래 margin-top, margin-bottom 등으로 따로 표기하는 것이 원칙이지만 이를 간단하게 margin 속성 하나로 제어할 수 있을 뿐만 아니라 일부의 값이 같으면 더 축약하여 쓸 수 있습니다.
줄여 쓸 때에는 margin:5px 10px 15px 20px; 등으로 네개의 값을 연달아 쓸 수 있는데 ‘상우하좌’ 순서입니다. 이는 위쪽부터 시작해서 시계방향으로 돌아가는 것과 같으니 시계방향이라는 것만 기억하셔도 됩니다.

  • 1개 - margin:5px; – 상하 좌우에 모두 똑같이 5px 의 마진이 적용됩니다.
  • 2개 - margin:5px 10px; – 상하에는 5px, 좌우에는 10px 의 마진이 적용됩니다.
  • 3개 - margin:5px 10px 15px; – 상 5px 좌우 10px, 하 15px 의 마진이 적용됩니다.
  • 4개 - margin:5px 10px 15px 20px; – ‘상좌하우’ 방향에 모두 별도의 마진이 적용됩니다.

다만 이렇게 줄여서 쓸 경우엔 한가지 속성만 지정했을 때와 달리, 네가지 값을 한꺼번에 지정하는 효과가 있기 때문에 주의해야 합니다.
만약 초기 마진이 모두 0으로 지정되어 있는 상황에서 margin:9px 0 0 0; 과 margin-top:9px; 는 보이는 것은 같지만 의미가 같지는 않습니다. 전자는 이전 속성에서 지정된 margin-left나 margin-right 값이 다시 0으로 설정되지만, 후자는 따로 지정하지 않았기 때문에 이전 값에 변화가 없습니다.

2. 여러 margin 사이의 충돌
화면 상에서 세로방향(상하)에 연달아 있는 엘리먼트의 경우 margin 속성이 맞닿게 되면 작은 쪽이 없어져 병합되는 현상이 발생합니다.
예를 들어 첫번째 div 엘리먼트가 margin:10px 0;으로 설정되어 있고, 두번째 div 엘리먼트가 margin:20px 0 55px;로 설정되어 있다면 첫번째의 아래 마진 10px와 두번째의 위 마진 20px가 더해져서 총 30px의 마진이 들어가야 원래 의도에 맞습니다만, 이때 마진이 병합되어 작은 마진은 사라지고 20px의 마진이 적용되는 것입니다. 이를 피하기 위해서는 경계선이 없는 엘리먼트의 경우 한쪽에는 마진 대신 패딩을 적용해주면 됩니다. 경계선(border)이 있는 경우는… 코딩을 바꿔야겠지요. ^^
하지만, 이러한 병합은 가로방향(왼쪽, 오른쪽) 마진과 float가 적용된 엘리먼트의 마진의 경우엔 적용되지 않기 때문에 이럴 때에는 걱정하지 않으셔도 됩니다.

3. 음수값의 margin, padding 사용 가능
원래 마진과 패딩 값은 양수 값을 사용하는 것이 원칙이지만 음수를 사용해서 특이한 효과를 줄 수 있습니다. 주로 겹치는 효과 등을 연출할 수 있습니다.

CSS
   Special Effect

이 문구는 아래 special effect라는 문구가 있는 div 엘리먼트에 margin-top:-10px; 를 준 것입니다. 다만 주의하실 점은 원래 엘리먼트에 링크가 있을 경우에 아래 엘리먼트의 마진을 조정하여 원래 엘리먼트의 영역를 덮을 경우 링크가 적용되지 않는 현상이 발생할 수도 있습니다.

4. 인라인 태그와 블록 태그의 margin, padding 적용의 차이
표현을 위한 태그를 제외한 엘리먼트들은 보통 블록 속성을 가진 태그와 인라인 속성을 가진 태그가 존재합니다. 블록 속성 태그는 <div>로 대표되며 이와 비교되는 인라인 태그가 <span>태그입니다.
블록 속성 태그는 위 아래로 분리된 영역을 가지기 때문에 옆으로 별도의 콘텐츠를 배치할 수 없습니다. 하지만 인라인 속성 태그는 블록을 생성하지 않기 때문에 양 옆으로도 콘텐츠를 배치하는 것이 가능합니다.
이 인라인 태그들에 margin이나 padding 속성을 적용할 때에는 좌우 방향의 값은 적용되지만, 상하 값은 적용되지 않는 것을 유의하셔야 합니다.
CSS 속성 중 display 속성을 지정하여 원래의 인라인 태그나 블록 태그들도 역할을 서로 바꾸는 것이 가능하긴 하지만 display:inline; 등으로 강제적으로 인라인 속성으로 변경한 <div>엘리먼트도 역시 상하 방향의 마진과 패딩이 적용되지 않기 때문에 주의해주세요~

5. 테두리 넣기 (border속성)
경계선은 세가지 속성을 별도로 가지고 있습니다. 어떤 모양인지 보여줄 style과 두께를 말하는 width, 색상을 말하는 color 속성입니다. 이 속성이 상하좌우에 적용되어 border에 관련된 속성은 총 12개의 조합이 있을 수 있습니다. (물론 이와 별도로 구분되는 속성도 있습니다. border-collapse 같은…)
style의 경우 border-top-style, border-bottom-style, … , border-style 속성이 있을 수 있는데 경계선의 모양을 결정합니다. 가장 많이 사용하는 실선의 경우 ‘solid’를 사용합니다. solid, dashed, dotted, double, groove, inset, outset, ridge 등의 속성이 존재합니다만 각각의 모양은 직접 만들어보세요~ (우리나라 특성상 화려한 그래픽을 자랑하는 국내 웹사이트 특성상 이 속성들을 다 사용할 일은 없을 것 같습니다만-_-) width는 말 그대로 두께를 말하고, color 역시 RGB코드 또는 색상명을 사용할 수 있습니다.
border-right:solid 2px red; 등으로 한 방향의 경계선 스타일을 간략하게 지정할 수도 있고 네 방향이 다 같을 경우 border:solid 2px red; 같은 식으로 더 간단하게 통합할 수 있습니다. 속성의 순서는 상관없이 사용할 수 있으며 생략할 수도 있지만, 생략할 경우에는 기본값으로 처리되게 되죠.

6. IE6 Quirks 모드 이하에서의 적용 이상
국내에서 가장 높은 점유율을 자랑하는 IE6의 경우, DTD를 별도로 지정하지 않고 Quirks모드로 돌릴 경우에는 박스 모델의 해석이 약간 틀려집니다. 또한 5.5 이하 버전에서는 상관없이 발생하는 현상인데요.

사용자 삽입 이미지

원래 width 속성으로 지정된 길이는 박스모델 내에서는 contents에 대해 적용되고 margin, border, padding과 별도로 적용되는 것이 맞습니다만, IE6의 Quirks모드와 IE5.5 버전 이하에서는 contents와 함께 padding, border 를 합한 것으로 계산하는 이슈가 있습니다.
이를 해결하기 위해서는 표준 모드로 동작할 수 있도록 정확한 DTD를 지정해주는 방법이 1차적인 대책입니다만 IE5.5 이하 버전에서는 이것도 적용되지 않기 때문에 컨디션 코드 또는 CSS 핵을 사용해주어야 합니다. 즉 IE구버전에만 적용되는 CSS핵을 사용하셔서 여기에만 적용되는 width를 직접 계산하셔서 넣어주셔야 하죠.
(참조 : http://www.456bereastreet.com/)

7. IE6 에서 float속성 적용된 div의 좌우 마진 두배 현상
이 현상은 박스 모델과는 크게 관련은 없지만, 레이아웃/콘텐츠 구성 시 div 엘리먼트의 마진을 조정하면서 이유없이 일어나는 버그이기 때문에 다루어 봅니다.
블록 속성의 엘리먼트에 float 속성을 주면 블록 속성을 유지하면서도 가로로 배열하는 것이 가능합니다. 이 경우가 레이아웃을 잡을 때 많이 사용하는 형태입니다만, IE6의 경우 float된 엘리먼트의 경우 가로 방향의 마진이 적용되는 경우 이 마진이 두배씩 적용되는 현상이 발생합니다. 이것은 위의 경우와는 달리 명백한 버그라고 할 수 있겠네요…
예를 들어 가로 500픽셀의 div 엘리먼트 내에 두개의 div엘리먼트를 float속성을 주어 배열하는 경우를 생각해보죠. 첫번째 엘리먼트는 100픽셀의 가로길이를 가지고 두번째 엘리먼트가 왼쪽 마진을 50px를 가지고 350px의 길이를 가지게 되면 100 + 50 + 350 = 500 의 식에 의해 정확히 맞아 떨어지게 되는 것이 이론상 맞지만..

<div style=”width:500px;”>
    <div style=”float:left;width:100px;“>
    LAYER1
    </div>
    <div style=”float:left;margin-left:50px;width:350px;“>
    LAYER2
    </div>
</div>

타 브라우저에서는 의도한 대로 정확히 보이지만, IE6의 경우 버그 때문에 마진이 두배가 되어 100px 의 마진이 적용되죠. 이것은 전체 길이 500px 를 넘어서게 되어 두번째 엘리먼트는 첫번째 엘리먼트의 다음 줄로 넘어가게 되죠.
이 버그를 해결하려면 float된 두개의 div 엘리먼트에 display:inline; 속성을 주어서교정할 수 있습니다만, 이 속성은 인라인으로 바뀌는 것이 아니고 단순히 IE의 버그를 해결하기 위해서 존재합니다. 여전히 이 div엘리먼트의 속성은 블록 속성입니다.

 

“각 브라우저의 설정에 따라 기본적으로 가지고 있는 간격이 존재할 수도 있습니다.” 
이부분에서 저를 포함한 많은 분들이 애를 먹은 경험이 있을겁니다. 빌어먹을 IE6..
저같은 경우는 정확한 DTD 선언으로 어느정도 타협하고, CSS 핵을 써야하는 상황은 무시합니다.
이렇게라도 해야 정신적 건강에 어느정도 도움이 되지 않을까요..
갑자기 서글퍼지네요. 

]]> http://overfloweb.com/blog/index.php/archives/33/feed 0 css 를 사용한 중앙 정렬 http://overfloweb.com/blog/index.php/archives/32 http://overfloweb.com/blog/index.php/archives/32#comments Tue, 08 Apr 2008 02:21:05 +0000 overflow http://overfloweb.com/?p=32 원문 : 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 { 
margin: 0 auto;
}

단, 사용시에는 아래와 같은 조건이 충족되어야 합니다.

조건:
해당 오브젝트의 width가 설정되어 있어야 합니다.
DTD가 선언 되어 있어야 합니다.

단순히 margin:0 auto;를 사용했는데 적용이 되지 않을 경우엔 위의 두 조건이 충족되었는지 다시 한번 확인해 보아야겠습니다.

하위 호환성

NN4와 익스5.5 이하 버젼에서는 margin: 0 auto;만으로는 가운데 정렬이 되지 않습니다.

익스6, 익스7에서도 DTD가 선언되어있지 않으면 하위 호환성을 위해 quirks-mode로 렌더링을 하기때문에 가운데 정렬이 되지 않습니다.

이때문에 부모 엘리먼트에 text-align: center;를 같이 적용시켜줘야합니다.

body {
   text-align: center;
   } 

div {
   margin: 0 auto;
   width: 80%;
   text-align: left;
   }
]]> http://overfloweb.com/blog/index.php/archives/32/feed 0