seye2님의 이글루

이번에는 CSS3의 5가지 특징을 알아보고 현재 진행중인 웹사이트와 디자인에 적용해보자.

1. Border Radius
http://media2.smashingmagazine.com/images/css3/border-radius.png
http://twitter.com/smashingmag

가장 큰 일반적인 CSS3특징으로 사용되어지는것은 border-radius이다.
일반적인 HTML 블록 엘레멘트들은 90각도로 되어진 사각형이다. 하지만
CSS3 스타일 규칙은 라운드형태가 되도록 설정을 허용한다.

-moz-border-radius: 20px;   
-webkit-border-radius: 20px;   
border-radius: 20px;  

moz- and -webkit문법은 약간씩 다르지만 border-radius는 목표인 각각의 코너들에 사용되어 진다.
-moz-border-radius-topleft: 20px;   
-moz-border-radius-topright: 20px;   
-moz-border-radius-bottomleft: 10px;   
-moz-border-radius-bottomright: 10px;   
-webkit-border-top-right-radius: 20px;   
-webkit-border-top-left-radius: 20px;   
-webkit-border-bottom-left-radius: 10px;   
-webkit-border-bottom-right-radius: 10px;  
위의 내용은 Firefox, Safari and Chrome에서 지원된다.


http://twitter.com에서 사용되어졌다.


참고자료:
W3C Working Draft (http://www.w3.org/TR/css3-background/#the-border-radius)
Border-radius on CSS3.info (http://www.css3.info/preview/rounded-border/)
The Art of Web (http://www.css3.info/preview/rounded-border/)


2. Border Image
http://media2.smashingmagazine.com/images/css3/border-image.png
Border-images는 객체의 border로 사용되어지는 곳을 image사용을 가능하게한다.
이미지는 객체의 각 사이드와 인접한 부분에 만들어진다.
이미지의 각 사이드 부분은 HTML객체의 모서리 부분과 일치한다.
다음과 같은 문법으로 실행되어 진다.
 border: 5px solid #cccccc;   
-webkit-border-image: url(/images/border-image.png) 5 repeat;   
-moz-border-image: url(/images/border-image.png) 5 repeat;   
border-image: url(/images/border-image.png) 5 repeat;  

{ border:5px }속성은 보더 너비값의 전부이다. 그리고 각 border-images규칙은 border의 5px부분을
채우고 몇개의 이미지들을 사용하는것을 말한다.
Border-image는 한 사이등 기본적으로 정의할 수 있고, 네개의 코너만큼 각각의 사이마다 이미지들을
다르게 적용시키는것을 가능하게한다.

border-bottom-right-image   
border-bottom-image   
border-bottom-left-image   
border-left-image   
   border-top-left-image   
   border-top-image   
   border-top-right-image   
   border-right-image  

Supported in Firefox 3.1, Safari and Chrome.

http://www.blog.spoongraphics.co.uk/에서 사용되어 졌다.

참고자료
W3C Working Draft (http://www.w3.org/TR/2002/WD-css3-border-20021107/#the-border-image-uri)
Border-image on CSS3.info (http://www.css3.info/preview/border-image/)
Border-image in Firefox  (http://ejohn.org/blog/border-image-in-firefox/)

3.Box Shadow and Text Shadow
http://media1.smashingmagazine.com/images/css3/shadow.png

Drop shadows : drop shadow를 만드는데 있어서 포토샵은 필요하지 않다. CSS3면 할 수 있다.
좋은예제는 24 Ways website(http://24ways.org/)에서 볼 수 있다.

-webkit-box-shadow: 10px 10px 25px #ccc;   
-moz-box-shadow: 10px 10px 25px #ccc;   
box-shadow: 10px 10px 25px #ccc;  

첫번째 두가지 속성은 엘레멘트와 연관된 그림자의 offset을 결정한다.
세번째 속성은 shadow의 흐릿함의 정도를 설정한다.
마지막은 shadow의 색을 설정한다.
text-shadow속성은 원문문장을 사용하는데 유용하다.
text-shadow: 2px 2px 5px #ccc;  

Supported in Firefox 3.1, Safari, Chrome (box-shadow only) and Opera (text-shadow only).


24 Ways website(http://24ways.org/)에서 사용되어 졌다.

참고자료

W3C Working Draft (http://www.w3.org/TR/css3-background/#the-box-shadow)
Box-shadow on CSS3.info (http://www.css3.info/preview/box-shadow/)
W3C Working Draft (http://www.w3.org/TR/2003/CR-css3-text-20030514/#text-shadows)
Text-shadow on CSS3.info (http://www.css3.info/preview/text-shadow/)

4.Easy Transparency with RGBA and Opacity
http://media1.smashingmagazine.com/images/css3/opacity.png

웹디자인에서 PNG 파일을 사용하는 것은 투명한 디자인 특징의 핵심이다.
alpha값 또는 opacity 규칙을 css에서 직접적으로 정의 할 수 있다.

rgba(200, 54, 54, 0.5);   
/* example: */  
background: rgba(200, 54, 54, 0.5);   
/* or */  
color: rgba(200, 54, 54, 0.5);  

첫번째 세 값은 빨강, 초록, 파란색이다. 그리고 마지막 값은 alpha값(투명한 효과를 생성한다)
으로 간주된다.

opacity규칙은 대신에 색을 일반적으로 정의한다. opacity값은 분리된 규칙으로 설정한다.
color: #000;   
opacity: 0.5;  

Supported in Firefox, Safari, Chrome, Opera (opacity) and IE7 (opacity, with fixes).

24 Ways website(RGBA)(http://24ways.org/)에서 사용되어 졌다.

참고자료
W3C Working Draft (http://www.w3.org/TR/css3-color/#rgba-color)
RGBA on CSS3.info (http://www.css3.info/preview/rgba/)
Pure CSS Opacity (http://www.stevenyork.com/tutorial/pure_css_opacity_and_how_to_have_opaque_children)

5.Custom Web Fonts with @Font-Face
http://media2.smashingmagazine.com/images/css3/font-face.png

일반적인 폰트들의 설정은 웹에서 사용되어 진다(알려진것으로는 Arial, Helvetica, verdana, georgia,
comic sans(ahem) 등등 현재 @font-face css3규칙은 특별한 텍스트의 사용을 가능하게한다.
그러나 이것은 저작권 문제를 일으킬 수 있다. 그래서 @font-face내장 속성을 이용하여 특별한 fonts들을
다룰 수 있다.

@font-face {   
font-family:'Anivers';   
src: url('/images/Anivers.otf') format('opentype');   
}  

두번째 옵션을 포함하여 font-family의 사용은 일반적으로 사용되어 진다.
h1 { font-family: ‘Anivers’, Helvetica, Sans-Serif;  

Supported in Firefox 3.1, Safari, Opera 10 and IE7

TapTapTap(http://www.taptaptap.com/)에서 사용되어 졌다.

참고자료
Fonts available for font-face embedding (http://www.webfonts.info/wiki/index.php?title=Fonts_available_for_%40font-face_embedding)
Font-face in IE, making Web fonts work (http://jontangerine.com/log/2008/10/font-face-in-ie-making-web-fonts-work)
Web fonts, the next big thing - A List Apart (http://www.alistapart.com/articles/cssatten)


CSS3로 개발함에도 불구하고 리스트되어진 규칙들은 현재 몇몇 브라우져에서만 지원하고 있다.
Safari는 이러한 새로운 특징들을 광범위하게 지원하고있다. 불행하게도, (상위의브라우져들임에도 불구하고)
Safari와 친밀한 사용자들은 적다. 반대인 그룹의 사용자들을 위해서 추가확장특징은 가치가 없다.
그러나 apple은 그들의 방법을 만들고 Safari사용자들은 계속적으로 증가하고 있다.

반면 Firefox는 기본적인 사용자들을 많이 가지고 있다. FF3.1이상부터는 CSS3특징들을 추가적으로 지원을 하고 있다.
대부분 FF사용자들의 추측은 FF브라우져가 업데이트 될것이고 사용자 그룹들은 이러한 새로운 규칙들을 지원할 것이라고
믿고 있다.

Google Chrome은 작년에 공개하였고 WebKit Engine을 탑재하고 있다. 크롬은 Safari와 같은 지원을 하고 있다.
Safari가 Mac 사용자들에 의해 좋은 위치를 잡는 동안 크롬은 폭발적인 유저층을 가지게되었다.

비율로 보면(W3's Browser statistics - http://www.w3schools.com/browsers/browsers_stats.asp)는(2008년 11월조사)
W3School의 사용자들 44.2%가 파이어폭스, 3.1%구글 크롬, 2.7%사파리를 사용한다고 말했다.
50%의 대다수 인터넷 유저들이 이러한 특징을 보여주고 있다.
웹디자인 커뮤니티에서는 더욱 더 개념적인 브라우져들을 택하고 있다. CSS3지원하는 사용자들의 비율은 더 높아져 73.6%에 달한다.
위 내용은 Blog.SpoonGraphics(http://www.blog.spoongraphics.co.uk/)에서 참고했다.

6.The downside(또다른 면)
당신은 새로운 디자인을 적용해보고자하는 상상을 하고 있을것이다. 하지만 몇가지 부정적인 면을 고려하여야 한다.
- Internet Explorer : 인터넷 유저중 46%는 이러한 특징을 볼 수 없다. 디자인의 가장 중요한 특징을 그들은 볼 수 없을
수도 있다. 이런 해결 방법은 CSS3의 특징을 두번째 옵션으로 생각해야한다.

IE는 @font-face를 지원한다. (http://jontangerine.com/log/2008/10/font-face-in-ie-making-web-fonts-work)

- Style Sheets의 오류
이러한 CSS3의 특징은 최종 명세서로서 추가되지 못했다. CSS3는 다양한 브라우져들의 태그에서 실행되어졌다.
이것은 당신의 style sheet를 쓸모없게 만들 수 있다.

- CSS markup의 확장성
마지막 견해에 따르면 각각의 브라우져들을 같은 규칙들로 명세하여 다양한 태그들을 지원하고 있다.
CSS의 마최종 명세로서의 표준규칙을 포함하고 있다. CSS Markup의 추가적인 코드들을  포함하고 있다.

- 잠재적인 좋지 않은 습관
전통적인 포토샵으로 작업을 완료하고 이것들을 통하여 새로운 스타일 특징의 사용은 몇몇 왜곡된 디자인들의 결과이다.
Drop Shadows와 같은 것들을 우리에게 경고를 하고 있다.

-참고 자료
http://www.smashingmagazine.com/2009/01/08/push-your-web-design-into-the-future-with-css3/
http://html5gallery.com/

HTML5와 CSS3, ECMAScript 5의 working draft단계이거나 최종 초안이 공개되었고
그에 맞춰 따라가야한다는 생각에 먼저 HTML5에 관련된 내용을 찾아 봤습니다.
HTML5의 맛은 봤으니 CSS3에 대해서 찾아논 자료를 공부해봐야할거 같네요.

HTML5명세서는 몇가지 흥미롭고 구조적인 마크업을 유용하게 할 수 있는 태그들을 추가했다.
이러한 태그들(매일 사용하는 주요한 것들)은 우리가 사용하는 코드(일반적으로 div)를
변경시켜줄 것이다.

그럼 한번 무엇인지 알아보자

1. Defining Structure(구조 정의)
 - <section></section>
   section은 내용을 모아 주제화 하는 것이고, header태그가 section태그보다 선행되어야 하고, section태그 뒤에는
   fotter태그가 와야 한다. section은 각각 부분마다 정의 될 수 있다.
 - <header></header>
   section의 header는 제목 혹은 제목을 그룹핑하거나 section의 보중 설명을 포함한다.
 - <footer></footer>
   footer는 누가 쓴것인지, 어떤 문서와 링크가 연결되어 있는지, copyright, 기타등등의 내용들을 포함하고 있다.
 - <nav></nav>
   이 태그에는 navigation영역을 정의한다. 링크의 리스트등과 같은 것들. nav의 정의 위치는 section,
   header, footer와 같은 주요한 태그 다음이어야한다.
 - <article></article>
   블로그, 매거진, 개요등과 같은 내용을 독립적으로 구성 할 수 있다.
 - <aside></aside>
   aside는 내용과 관련된 것을 나타낸다.

일반적인 블로그 페이지를 새로운 구조 태그로 적용해보자.
<!DOCTYPE html>
<html>
  <head>
    <title>Standard Blog</title>
  </head>
  <body>
    <header>
      <h1><a href="#">Standard Blog</a></h1>
    </header>
    <nav>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Archives</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
    <section>
      <article>
        <header>
          <h1><a href="#">Title</a></h1>
        </header>
        <section>
          <p>Lorem ipsum...</p>
        </section>
      </article>
      <article>
        <header>
          <h1><a href="#">Title</a></h1>
        </header>
        <section>
          <p>Lorem ipsum...</p>
        </section>
      </article>
      <article>
        <header>
          <h1><a href="#">Title</a></h1>
        </header>
        <section>
          <p>Lorem ipsum...</p>
        </section>
      </article>
    </section>
    <footer>
      <p>Copyright © 2008 All Rights</p>
    </footer>
  </body>
</html>

그럼 이 태그를 사용할 수 있을까?

현재 나온 브라우져들은 지원을 하고 있고 IE6에서 또한 적용이 가능하다. 다만 몇가지 작은 변덕이 있는데
이 태그들을 사용하고자 하면 작은 문제들을 넘어가는 것이 필요하다.
첫번째, 새로운 HTML5 doctype은 대부분의 브라우져들이 이해하지 못한다.
다행히도 이런 내용에 유동적인 브라우져들 때문에 그들은 알 수 없는 태그들을 대처 할 수 있다.
이러한 알려지지 않은 태그(기본적인 스타일이 없는)이고, 이것들은 inline태그로 다루어져 왔다.
이러한 새로운 HTML5 태그들은 구조적인 내용이고 명확한 block level 요소이다.
그렇기 때문에 우리는 태그들에 css 스타일을 적용해주어야 한다. (display:block같은 속성)
css를 간단하게 부분적으로 확장하고 이러한 새로운 태그들은 바로 사용하기 때문에 바로 사용 할 수 있다.
물론 HTML5가 더욱더 지원되어지고, display:block과 같은 쓸모없는 속성은 제거되어져야 하고, 그것은
브라우져의 기본적인 style로 지원될것이다.

IE 지원
만약 IE지원을 요구한다라면 더 많은 이슈가 있을것이다.IE rendering engine은 새로운 태그들을 적용할 것이지만
어떠한 CSS내용도 인식하지 못할 것이다. 다행히도 IE는 매우 간단한 자바스크립트로 신속하게 대처하고 있다.
HTML5를 사용하기 위해선 각각 새로운 태그들을 위해 자바스크립트로 DOM을 만든다
이렇게 하면 새로운 태그에 대한 문제점을 없앨 수 있다. 그 코드는 다음과 같다.

<script>
  document.createElement('header');
  document.createElement('footer');
  document.createElement('section');
  document.createElement('aside');
  document.createElement('nav');
  document.createElement('article');
</script>

이 코드를 적용하기 이전에 HTML5에서의 script태그에 대해 얘기해보자.
HTML 어떠한 script태그에도 type="text/javascript"가 작성되었다고 가정한다. 기존에 넣었던 이 속성을 넣지
않아도 되고 매우 간단해 전다.

HTML5가 제공하는 태그들을 사용하여 문서의 구조를 만들 수 있다(몇가지 편법과 함께)
새로운 웹사이트를 작업할때 더욱 더 구조적으로 마크업을 정의하여 (HTML5를 고려하여)야 한다.

http://orderedlist.com/articles/structural-tags-in-html5 (원문)

소개
The writing-mode속성은 비라틴계열언어들(일본어, 아랍어등)과 같은 텍스트 레이아웃을 가능하게 해준다.

이 속성의 세가지 목표
- 개발자들이 결과를 예상할 수 있도록 하기 위해
- 적절하게 맞는 크기와 같은 상대적으로 새로운 CSS 개념을 정리하기 위해
- CSS3 Text Layout Module을 더 제공하기 위해

이 문서는 새로운 이행법과 시작하고자 하는 시험들의 기본적인 것들을 통하여 작업하고있다.

기본적인 속성과 값들
CSS3 Text Layout의 정으로서 The writing-mode속성은 간단하게 'direction'그리고 'block-progression'속성으로
되어있다. 'direction'속성은 라인 흐름의 특징으로 생각되어질 수 있다.
'block-progression'속성은 라인 흐름의 방향으로서 생각되어질 수 있다.
다음의 테이블 내용으로서 8가지 가능한 값들을 볼 수 있다.

writing-mode    direction    block-progression        Common Usage:
   lr-tb          ltr              Tb            Latin-based, Greek, Cyrillic writing
                                                 systems (and many others)
   rl-tb          rtl              Tb            Arabic, Hebrew writing systems
   tb-rl          ltr              Rl            East Asian writing systems in
                                                 vertical mode
   bt-rl          rtl              Rl            Arabic script block quote embedded in
                                                 East Asian vertical text
   tb-lr          ltr              Lr            Mongolian script writing system
   bt-lr          rtl              Lr            Arabic script block quote embedded in
                                                 Mongolian script document
   lr-bt          ltr              Bt            None
   rl-bt          rtl              Bt            None
 
vertical text layout을 이해하기 위하여 width,height(는 문맥의 기본적인것을 변경할수 있다)는 것에
동의하는것이 중요하다.

우리는 width와 height를 물리적 속성으로 간주한다.
IE에서 width는 항상 수평적이고 height는 항상 수직적이다. 게다가 left, top, right, bottom
물리적인것으로 고려된다.

writing-mode와 vertical text layout을 이해하는 가장 좋은 방법은 예제를 통해서이다.
다음의 예를 보자

1. Block dimension
vertical sizing 알고리즘은 width와 height의 계산법을 교환한다. 이 알고리즘은 수평 레이아웃의
 너비(혹은 높이)에 사용되어졌다.

다음의 예를 보자

여기 너비와 높이값이 없는 두개의 div엘레멘트로 정의되어져 있다. 첫번째는 parent body와 병렬화 되어
있고, 두번째는 writing-mode를 tb-lr로 설정했을때 지각으로 되어있다.

첫번째 div의 너비는 viewport만큼 넓고, 높이는 내용만큼 길어졌다. 이것이 일반적인 css의 규칙이다.

두번째 div는 너비와 높이를 교환했을때와 정확하게 유사하다. 높이는 viewport만큼 길어졌고, 너비는
내용만큼 넓어졌다.

여기서 viewport는 예제로 사용되어 진것이지만, body's height가 명시되어져 있다면 그 값은
auto height값과 같이 예상되어 계산되어질 것이다.

다음의 예제는 더 흥미롭다. 두번째 직각의 div에 또 하나의 div를 더하는것이다. 그리고 이것은
상대적인 사이즈가 되었다.

The second vertical div의 width는 50%값을 가지고 있고 물리적 너비는 viewport의 50%크기이다.

부모노드(body)의 block흐름이 top to bottom이기때문에 마지막 block은 이전것보다 아래에 나온다.
엘레멘트가 block 속성으로 지속될 경우에는 writing-mode가 엘레멘트에 영향을 준다고 가정 할 수 있다.
(다른 조건에서는 똑같은 결과가 나오지는 않는다.)
body에 LR값을주고 block 속성으로 변경시킨다면 엘레멘트는 옆으로 나올것이다.
그러나 body가 수평으로 overflow한다면 엘레멘트의 writing direction에 의해 영향을 받을 것이다.
이럴때 HTML엘레멘트는 LR-TB이다. 그러므로 overflow는 내용의 시작을 숨기고 오른쪽으로 나올것이다.
대부분의 사용자들은 원래 지점(내용의 첫번재 문장이 나타나는)원래 지점을 예상할것이다.
이것은 overflow를 신경쓰지않고 보이는걸 예상하는 것이다.
위의 내용은 매우 미묘하지만 중요한 내용이다.
overflow는 left and top(LR-TB방향으로 추정한다)으로 스크롤을 사용할 수 없고 clip-able area이 아니다.

overflow in vertical layout
수직 레이아웃 overflow를 다루는 것은 논쟁의 여지가 있다. IE8 스크롤바 위치는 overflow위치에 따른다.
내용이 엘레멘트 왼쪽으로 넘친다면 수직 스크롤바는 왼쪽사이드로 놓여질것이다.

내용의 시작이 엘레멘트의 아래쪽부터 일때, 그것이 수직 스크롤바의 초기 위치 값이다.

또다른 흥미로운 상황은 엘리멘트가 window보다 넓을 경우 viewport의 스크롤바를 강제로 보여준다.

텍스트의 시작은 스크린 바깥이고 사용자는 오른쪽 스크롤바를 봐야만 할 것 이다.
게다가 수직 스크롤바는 사용자가 오른쪽으로 스크롤을 움직인 후에 접근할 수 없다.
이것은 이상하게 보일것이지만 예상되었던 결과이다. parent(body)방향이 LR-TB이기때문이다.
레이아웃 방식을 혼용하여 개발할때 overflow의 영향을 고려하여야한다.

vertical layout과 tables
수직 테이블의 경우 rows는 vertical이고 columns는 horizontal이 된다. 다음과 같이 마크업을 하면

<body writing-mode=”??-??”>
     ABCDEF
     <table>
          <tr>
              <td> 1 </td> <td> 2 </td> <td> 3 </td>
          </tr>
          <tr>
              <td> 4 </td> <td> 5 </td> <td> 6 </td>
          </tr>
          <tr>
              <td> 7 </td> <td> 8 </td> <td> 9 </td>
          </tr>
     </table>
</body>

이것들은 모든 8가지 모드의 결과이다.

table sizing은 box sizing과 같은 원리와 같습니다. 너비와 높이 계산은 교환된다.
각 셀의 너비/columns 너비 / 테이블 너비계산 알고리즘은 모든 높이값을 사용한다.
각 셀의 높이/row 높이/테이블 높이 계산 알고리즘들은 모든 너비 값을 사용한다.

padding, margin and percentage values

대부분 CSS로 웹사이트를 만드는 사람들은 margin-collapsing으로 시간을 허비하고 있다.
디자인과 다양한 writing directions을 실행하는것에 대하여 margin-collapsing을 복잡하게 추가하여 사용하는것을
최소화 하는것이 웹사이트를 만드는 사람들의 목표이다. 본직적으로 margin-collapse사용은 CSS2.1-8.3.1의 규칙과
같다. 다양한 margin의 사용은 block-progression 방향일때 통합되어진다.
방향의 직각 변화(수평에서 내부수직으로)일어난다, 엘레멘트의 방향 변화는 Block Formatting Context로 된다.
둘러싸는 엘레멘트들의 마진 없이 병합되어 질 수 있다. 다음 예제를 봐보면 된다.
container에 보더값을 주지 않고 둘러쌓여 있는 블럭엘레멘트들이 container의 마진값들을 병합시키지 않았다.

패딩과 마진의 percentage 값은 기본적으로 논리적인 너비값에 기초되어 계산되어 진다.
부모 엘레멘트에서 수직이거나 높이값이 계산되어 진다거나 부모 엘레멘트가 수직
block-progression이라면 너비는 계산되어진것이다.

-참고 margin-collapsing (마진통합)

★ 인접(동등한)한 블록레벨 엘리먼트의 margin-bottom과 margin-top 간의 일어나는 현상.

    1.큰값 쪽으로 접혀들어간다.
    2. 값이 동일한 경우: bottom(위의 엘리먼트의)쪽의 값에 접혀 들어가서 통합된다.
    3. P 엘리먼트 간의 간격을 유지하는 원리를 생각하면 좀 더 쉽게 이해할 수 있다.

※ 마진값은 음수값을 가질 수 있다. (cf. 패딩값은 최소값이 0이고, 음수값을 가질 수 없다.)

- 부모 자식관계의 엘리먼트의 경우에도 collapsing margin이 발생한다.

1. 마진통합현상에서 벗어나려면: border, padding 값을 적용하거나, 부모엘리먼트에 컨텐츠를 넣으면 된다.

- 자식이 인라인엘리먼트인 경우 : collapsing margin은 일어나지 않는다.
   이유: css boxmodel의 padding-top, padding-bottom, margin-top, margin-bottom 값이 구현되지 않기 때문에

★ CSS 작성순서  - 1. 웹을 만들 때 항상 적용하게 되는 속성과 값을 미리 정의한다.(초기화한다)
  - 2. /* Layout */
  - 3. body 안에 마크업된 순서대로 차근차근 작성한다.

 HTML마크업은 중요한 컨텐츠가 먼저 마크업되어야 한다.

http://blogs.msdn.com/ie/archive/2009/05/29/the-css-corner-writing-mode.aspx
마진통합 참고자료 - http://frieze.tistory.com/7?srchid=BR1http%3A%2F%2Ffrieze.tistory.com%2F7
Block Formatting Context등(CSS Layout Formatting) 참고 자료 -
http://cafe.naver.com/javaserverfaces.cafe?iframe_url=/ArticleRead.nhn%3Farticleid=17

- display:inline-block이란 속성을 어느 때 사용해야 되는지에 대한 내용과 사용하면서 있었던 문제

- IE6,7
inline태그 위 속성(inline-block) 사용시 : 이상없음
block태그 위 속성(inline-block) 사용시 : inline-block을 block속성으로 인식하는 버그로 인하여*display:inline;*zoom:1;
위의속성 사용하여 해결

- FF2
또한, FF2에서는 display:-moz-inline-stack;을 사용하여
해결을 하였는데요. 이것보다 더 의미에 맞는 속성은 display:-moz-inline-box;속성이라고 합니다.
하지만 제가 사용해본 결과로는 -moz-inline-box속성을 사용할 경우 FF에서 조금씩 영역을 제대로 잡지 못하는 문제를 발견하게 되어 inline-stack을 사용하고 있습니다.

inline-block의 브라우저별 지원 여부는 아래 페이지에서도 확인할 수 있습니다.
http://www.webdevout.net/browser-support-css

참고 - 정찬명님 블로그 CSS Text Button Design