작년에 David Hyatt 이 Shawun Inman 의 글에서 이러한 댓글을 달았었다.
The sad truth about CSS3 selectors is that they really shouldn’t be used at all if you care about page performance. Decorating your markup with classes and ids and matching purely on those while avoiding all uses of sibling, descendant and child selectors will actually make a page perform significantly better in all browsers. CSS3 선택자에 대한 슬픈 사실은 페이지 성능 향상에 조금이라도 신경을 쓴다면 전혀 사용하지 말아야 한다는 것이다. 순수하게 클라스와 아이디 선택자를 사용하며 자식 선택자, 하위 선택자, 인접 선택자를 사용하지 않으면 모든 브라우저에서 확연하게 성능 향상을 볼 수 있다.
David Hyatt은 모던 브라우저들의 개발에 영향을 주며 카미노를 만들고 불여우 파이어폭스를 Blake Ross 와 같이 만들어간 사람인 만큼 저 멘트에 대한 여파가 컸었다. 여러 테스팅도 진행되었고 하나같이 결론은 차이는 ‘significant’ 확연하게 차이가 나는 것이 아니므로 남용하지 않는다면 실용적인 사용에도 문제가 되지 않는다고 의견들이 모아졌었다. 오히려 그 시간에 다른 부분에서, 예를들어 JS 향상을 위해 손 보는것이 오히려 더 효율면에서 낫다라고 누군가 언급했었던 기억이 난다.
여기서 최근 재미난 테스팅을 SCREWLEWSE.COM 에서 진행했다. CSS 선택법, 사용법에 대한 카테고리를 나누어 그것이 브라우저 성능 상태와 어떤 연관성이 있을까라는 발상에서 시작 되었는데 일단은 CSS 테크닉에 있어서 나누어 놓은 3가지 방법을 살펴보아야 한다.
OOCSS 한창 주목받았던 그리고 꾸준히 접목되고 있는 아이디어. 기본 룰을 담은 class 를 부르고 세밀한 부분을 다른 클라스에 담아 복수 클라스를 부르는 방법. Object Oriented CSS 객채지향 CSS 로 소개도되고 잘 알려진 것으로 안다.
.ilmol 에 기본 속성을 정의해 주고 .ilmol-1 .ilmol-2에 각각 세밀한 부분을 넣은 후에 html에서 class=”ilmol ilmol-1″ 처럼 복수의 클라스들을 불러주는 방식.
이 세가지와 CSS가 없는 스타일을 합하여 4가지들에 각 브라우저들 마다의 테스팅을 진행 하였다. 그래프상 높을수록 시간이 오래걸린다는 것이니 성능에는 반비례한다.
from screwlewse.com
위의 그래프가 보여주듯이 Sass 테크닉이나 oocss 테크닉이 평범하게 사용되는 기법과는 확연한 차이를 보여주고 있다. 특별히 oocss는 모든 브라우저에서 가장 빠르게 읽혔음을 볼수 있는데 Cascading Style Sheet 이라는 법칙인 만큼 oocss 가 적용되지 않았나 생각이 들었다.
재미있게 보셨으리라 생각되고 이 테스팅이 절대 보통하는 테크닉이 잘못되었다거나 속도가 현처히 느리다라는 결론이 아니다. 여러 테크닉을 이해하는데에 있어서 이론적인 결과물을 보여주는 것이다. 적어도 일모리에겐 어느정도의 브라우저마다의 CSS 입력방식에 대한 팁을 선사해주는 부분에서 깨닳음을 얻었다고나 할까?
CSS 속성 가운데 float 속성은 자기 자신의 위치를 주변의 콘텐츠로부터 상대적으로 배치하는 속성입니다. float은 사전적 의미로 ‘뜨다, 띄우다, 뜨는 물건, 부유물’ 이라는 의미가 담겨져 있습니다. float은 높이가 가변적인 다단 컬럼 형태의 CSS 레이아웃을 위하여 반드시 요구되는 속성으로서 처음 CSS 배치기법을 익힐 때 가장 이해하기 어려운 속성중의 하나 입니다. float 속성이 부여된 엘리먼트는 좌측이나 우측으로 배치되면서 주변 콘텐츠의 배치에도 영향을 미친다는 사실은 어렵지 않게 학습되나 ‘float 된 엘리먼트가 부모 엘리먼트의 높이에 영향을 주지 않는다는 사실’은 몇 번의 경험 또는 선배들의 조언으로 깨닫게 되는 것이지요.
오늘은 float 속성을 이해하고 다단 컬럼형 레이아웃을 시도할 때 주변 엘리먼트들이 원하는 상태로 배치될 수 있도록 이것에 대응하거나 clear 하는 방법에 대하여 공유하고자 합니다. clear 속성은 float이 더이상 주변 엘리먼트의 배치에 영향을 미치지 않도록 해제시키는 속성입니다. 만약 Internet Explorer 브라우저를 사용하여 학습을 시도하신다면 일단 멈추시고 표준계열 브라우저에서 먼저 시도해 보세요. CSS 표준 렌더링을 엄격하게 준수하는 Opera와 Safari를 권장합니다. Internet Explorer와 Firefox 브라우저는 float, clear 속성에 관한 버그를 포함하고 있으므로 float과 clear의 표준 렌더링이 어떻게 구현되는지를 학습할 때 도움이 되지 않습니다. 하지만 버그를 해결하는 방법도 소개되어 있으니 안심하세요.
오늘 글의 핵심은 ‘float된 자식 엘리먼트의 높이를 부모 엘리먼트에 반영하도록 대응하는 방법’ 이라고 한마디로 설명할 수 있겠습니다. 부모 떠난 자식을 다시 부모의 품 안으로 돌아오도록 하려면 어떻게 해야 하는지 한번 살펴 보시죠.
float에 아무런 대응도 하지 않은 상태
#container는 부모 엘리먼트이며 #lnb와 #content는 자식 엘리먼트로서 현재 float된 상태 입니다. 아래 예제는 float에 아무런 대응을 하지 않으면 자식 엘리먼트가 부모 엘리먼트의 높이에 영향을 주지 않는다는 사실을 보여주고 있습니다. #container의 높이가 자식 엘리먼트의 높이를 반영하지 않고 있다는 사실에 주목해 주세요. float에 아무런 대응도 하지 않은 상태의 예제가 준비되어 있습니다.
float에 float으로 대응하는 방법
자식 엘리먼트의 높이를 부모에게 반영하는 방법으로 부모에게도 float 속성을 부여하는 방법이 있습니다. 부모에게 float 속성을 부여하게 되면 부모엘리먼트는 자식 엘리먼트의 높이를 반영합니다. 하지만 부모 엘리먼트의 너비는 float된 두 자식의 너비를 담을만큼만 작게 줄어든다는 사실에 주목해 주세요. 부모의 너비가 브라우저 크기에 따라 가변적이어야 하는 경우에 적용하기 어려운 단점이 있습니다. 또한 조상 엘리먼트들이 겹겹이 존재하는 경우 자식의 높이를 조상 엘리먼트에게 각각 전달하기 위하여 조상 엘리먼트들을 모두 float 시켜야 하므로 일반적으로 사용하는것을 권장하지 않습니다. float에 float으로 대응하는 방법 예제.
float에 overflow 속성으로 대응하는 방법
자식 엘리먼트의 높이를 부모에게 반영하는 방법으로 부모 엘리먼트에 overflow:auto 또는 overflow:hidden 속성을 부여하는 방법이 있습니다. overflow:auto 속성은 자식의 너비가 가변적이고 부모의 너비보다 커지는 상황이 발생할 때 가로 스크롤바를 유발하기 때문에 일반적으로 권장하는 방식이 아닙니다. overflow:hidden 속성은 그러한 상황에서 가로 스크롤바를 유발하지는 않지만 자식의 너비가 넘치는 경우 넘치는 부분이 잘리기 때문에 이 역시 완전하게 안전한 방법은 아닙니다. float에 overflow 속성으로 대응하는 방법 예제.
float을 빈 엘리먼트로 clear 하는 방법
이 방법은 #container 영역이 끝나기 직전 빈 엘리먼트를 넣고 빈 엘리먼트에 clear:both 속성을 부여하여 부모가 자식의 높이를 인식하도록 하는 방법입니다. 하지만 의미 없는 빈 엘리먼트를 사용하기 때문에 이 역시 권장되는 방법은 아닙니다. float을 빈 엘리먼트로 clear 하는 방법 예제. 예제에서는 .clear 라는 빈 엘리먼트를 가시적으로 보이도록 하였지만 실무에서는 보통 .clear {clear:both; height:0; overflow:hidden;} 처리하여 .clear 라는 빈 엘리먼트가 스스로 높이를 갖지 않도록 하고 보이지 않도록 처리 합니다.
하지만 Internet Explorer는 :before, :after 가상 엘리먼트 선택자를 지원하지 않기 때문에 다음과 같은 Hack이 필요합니다.
#container {*zoom:1;} /* IE5.5~7 브라우저 대응 Hack */
#container:after {content:" "; display:block; clear:both;} /* 표준계열 브라우저에 대응하는 float 해제용 가상 엘리먼트의 생성 */
IE 5~7 브라우저는 hasLayout이라는 고유한 성질을 갖게 되면 float을 해제하는 트리거로 작용하는 성질이 있고 zoom:1 속성이 hayLayout 이라는 성질을 갖도록 하기 때문에 IE 5~7 브라우저 고유의 특징을 이용한 해결방법 입니다.
float을 display:inline-block 으로 clear 하는 방법
float된 자식요소들의 높이를 부모에게 전달하는 방법으로써 부모 요소에 display:inline-block 속성을 부여하는 방법도 있습니다. [코멘트 해주신 김영환님 감사합니다] inline-block 속성이 부여된 요소는float된 자식의 높이만큼 늘어납니다. [CSS 2.1 관련 설명 코멘트 해주신 연홍석님 감사합니다] 모든 브라우저가 동일하게 float을 해제하는 방향으로 작용합니다. 단, 표준계열 브라우저들은 부모 요소의 너비가 자식의 너비만큼 알맞게 줄어들지만 IE 6~7 브라우저는 100%의 너비를 갖게 되는 특징이 있습니다. 또한 inline-block 속성을 갖게 된 요소는 인라인 요소와 마찬가지로 박스가 끝나는 지점에 약 4px 정도의 공백을 갖게 되므로 이점 유념하시는게 좋겠습니다.
썸네일 이미지를 가로 세로로 배열해 놓고, 마우스 오버시 이미지 테두리를 생성시켜주는 롤오버 효과를 한 두번쯤은 적용해 보았을 것이다. 많은 경우 기본 이미지와 롤오버 이미지(테두리 생성 이미지) 두개를 별도로 제작하여 스크립트로 처리하는 경우를 볼 수 있는데, 조금만 더 고민을 해 보면 CSS만을 이요해서 간단히 구현해 볼 수 있다.
ie6에서 png를 배경으로 쓸때 링크 클릭이 되지 않는 버그가 있습니다
해결법은 a태그에 position:relative를 주면 됩니다
단 배경이 되는 엘리먼트가 레이아웃을 가져야 하며 position이 absolute일경우 감싸는 div를 하나더 만들어 relative를 줘야 합니다~
class="first", class="last"
IE 6, 7등 일부 브라우저는 CSS의 유사 클래스인 :first-child와 :last-child를 지원하지지원하지 않습니다. 때문에 Class 이름으로 직접 'first'와 'last'를 사용합니다. (저 역서역서 'first-child', 'last-child'와 같이 사용하곤 합니다.)
class="image"
뉴스 목록과 같이 제목만 있는있는 경우, 제목과 이미지가 함께 있는 경우에 이미지가 있는 요소에 지정한다고 합니다.합니다.
class="inner"
화면 표현(디자인)을 위해서 사용되는 중첩 div에 사용합니다. (주로(주로 라운드 박스를 표현하는데 중첩 div를 많이 사용하죠. 제 경우에도 'inner-box'와 같은같은 형태로 자주 사용하곤 합니다.)
class="class="link"
앵커 요소에 스타일을 적용하는 경우에 PP 태그로 감싸고, P 태그에 .link Class 이름을 부여한다고 합니다.
class="one", class="twotwo", class="three"...
<li>와 같이 요소가요소가 나열될 때 각각의 요소가 개별적으로 적용될 때 사용한다고 합니다. (저는(저는 이 경우 불편하더라고 의미에 맞게 직접 이름을 지어주곤 하는데... 글쎄요 이렇게이렇게 순차적인 작명법은...)
class="eveneven", class="odd"
게시판 목록에서 홀수홀수 행과 짝수 행의 배경 색 등을 다르게 적용할 때 사용합니다.(개인적으로(개인적으로 이 Class 이름의 적용은 자바스크립트를 이용하곤 합니다. 행마다 다른 스타일을 적용하는적용하는 목적은 가독성을 조금 더 높이기 위함인데, 반드시 적용되지 않더라도 접근성을 크게크게 떨어뜨리지는 않기 때문에 자바스크립트를 지원하는 표준 브라우저에서는 자바스크립트를 이용해서 간편하게 처리하도록처리하도록 하고 있습니다.)
class="sectionsection"
특별한 스타일링이 요구되는 특정 섹션을 위해서 사용합니다. (제 경우에는 특별한 경우에서라기 보다 일반적으로 Contents 영역 아래에서 .article >> .section > .item 과 같은 순서로 적용하곤 합니다.)
CSS 를 쓰는데에 대한 절대적인 방법은 없습니다. 그리고 그것이 문제가 되는것도 아닙니다. 하지만 그래도 어떠한 일관된 방식으로나 어떠한 규칙을 정해서 쓴다면 한마디로 구조적인 CSS 를 쓸수 있다면 여러모로 플러스가 되지 않을까 생각이 듭니다. 예전에 후니님께서도 이러한 고민을 하셨듯이
내가 만들지 않은 CSS를 수정하는 것이 생각보다 쉽지 않다. 머랄까.. Xhtml는 공개된 원론적인 부분에 따라 구조화되어 가는 것에 비해서 CSS는 개발자의 개성을 많이 따르는 것 같다. -후니
꽤나 많은 스타일로, 입맛에 맞는대로, 적혀지는게 css 이겠지만 이 안에서 조금이나마 개선된 방법을 사용하면 좋겠다 싶어서 나누고자 합니다.
첫번째 전체적인 틀을 잡기
일단 커다란 그림을 보면, css 는 기본태그값설정, 레이아웃, 그리고 그밖의 것들 등으로 나눌수 있습니다. 보통은 기본태그값 설정 부분이 제일 위에 오며, 그 밑으로 이제 레이아웃 부분이 따라오고 마지막 즈음에 나머지가 불려진다고 볼수 있겠습니다. 레이아웃부분과 나머지 부분이 순서가 바뀌기도 합니다.
대충 이런식입니다. 다시 풀어서 보면,
—기본값—
—레이아웃과 별개로 사용되는값—
—레이아웃—
이러한 방식으로 순서를 정해 놓으면 나중에 찾기도 편하며 이해하기도 훨씬 수월합니다. 이것이 제일 첫번째로 이루어져야 하는 부분입니다. 문제는 보통 레이아웃 부분이 엄청나게 깁니다. 보통 블로그 스킨 css 는 200 에서 300줄 정도 나오는듯 싶습니다. 괜히 많이 쓴거 같아서 뿌듯할때도 있더군요.
코멘트를 사용하여 더욱 구조적으로
이러한 엄청나게 길어지는 레이아웃 부분을 잘 정리할수 있도록 코멘트 부분을 잘 의미있게 써주어야 할텐데요, 이부분에 있어서 권장하는 스타일이 있습니다.
코멘트 사용시 보통
/* 레이아웃 */
식으로 하는데요. 이 부분이 명확하게 보일수 있도록
/*레이아웃
—————————————————–*/
식으로 줄을 만들어 잘라주는것이죠. 사용해 보시면 알겠지만 꽤나 깔끔합니다. 그리고 영어로 쓰시게 된다면
/* =layout
————————————————-*/
으로 앞에 = 을 붙여주어 나중 겁색때에 찾기 쉽도록 해 주는것또한 간단한 팁 이겠네요. 후니님의 css 가 이것을 아주 잘 나타내고 있습니다.
한단계 더! 일모리의 사용법
아쉽게도 많은 부분 구조적인 css 사용에 대해서 위의 권장사항만이 나와있습니다. “기본값, 나머지, 레이아웃 식의 순서로 적게하여 알아볼수 있게 하며 코멘트를 잘 사용하여 페이지를 잘 나누라” 라는 것이죠. 하지만 제가 사이트와 스킨, 테마들을 제작하면서 점점 포괄상태가 되어가는걸 느꼈습니다. 레이아웃이 복잡해 지면 복잡해 질수록 비슷한 이름에 헛갈리는 속성들, 찾는것도 한두번이요 수십번 이름을 찾게 될 때에 엄청난 불편함이 몰려오더군요. 안되겠다 싶어 찾은 방법이 css 의 레이아웃 구조조차 구조적으로 바꾸는 방법입니다.
레이아웃대로 header, content, sidebar, footer 로 나누어 그안의 속성을 속성인것처럼 확실히 나타내는 것 입니다. 설명보다는 예제가 낫겠죠. 지금 제 사이트를 보시면 해더, 콘텐츠, 사이드바 로 나뉘어져 있습니다. 헤더 안에는 여러 다른 레이아웃 값들이 들어가며 콘텐츠 또한 그러합니다. 구조적으로 일단 이름만 적어보죠
headerwrap
-header
—title
—menu
——menu ul
——menu ul li
——menu_forum
——menu_archive
——menu_sitelog
——menu_contact
——menu_english
middle
-contentwrap
—content
——posttitle a
——posttitle
——post
——writing
보시기에 아주 이해도 잘 되며 머리도 덜 아프실겁니다. middle 안에 contentwrap 이 있고 그 아래 content이 있으며 content 아래 writing ul li, posttitle 등등이 들어있다는게 한눈에 들어옵니다. 이러한 장점을 그대로 CSS 에 넣어, 기본 값들을 한줄에 넣는것입니다. 특히나 모니터가 크신 분들은 이렇게 사용하시기 편하실꺼라 생각이 됩니다.
#headerwrap {height: 95px;}
#header {width: 100%; height: 95px; background: url(images/title.gif) no-repeat left top;}
#title {display:none;}
#menu {position: absolute; top:63px; left:47px; width:312px; height: 23px;}
#menu ul {margin: 0; padding: 0;}
#menu ul li {margin: 0; padding:0;float:left;list-style:none;}
#menu ul li a {text-decoration:none;height: 23px;text-indent: -5000px;display:block;}
#menu ul li a:hover {background: url(images/arrowdown.gif) no-repeat 48% top;}
#menu_home,#menu_about {width: 34px;}
#menu_forum {width: 37px;}
#menu_archive {width: 47px;}
#menu_sitelog {width: 39px;}
#menu_contact {width: 42px;}
#menu_english {width: 79px;}
헤더부분만 넣었는데요, 이 structure 구조의 장점은 속성중심이 아닌 레이아웃 중심이라고 볼수 있습니다. 예전 방식은 속성중심이었습니다. 속성을 잘 알아볼수 있도록 속성을 각각의 속성마다 한줄에 넣어 알아보기 쉽게 하였는데요, 이 방법또한 버그를 잡기 좋다거나 하는 장점이 있지만, 위에서 말씀드렸듯이 웹사이트 구조를 css 에서 이해하기란 여간 머리가 아픈게 아니며, 값이 늘어나면 늘어날수록 머리가 아파오는 단점을 가지고 있습니다. 하지만 위에서 소개한 구조를 잘만 사용한다면 xhtml 과 css 의 연관성을 더욱 증폭시킬수 있으며 특히나 그룹프로젝트가 진행될 때에 서로가 이해하기 쉬운 방법으로 접근할수 있다고 생각이 됩니다.
*값이 많아서 길어지는 경우에는 2줄 3줄로 써도 무관합니다. 제작하면서 언제나 느끼는거지만, 그리 긴 속성을 가지고 있는것들은 많지 않으며 몇몇 그나마 많다고 생각되는것들을 2줄로 만들면 오히려 더 강조하는 부분이 되므로 좋더군요. 이 블로그의 css 를 살펴보시면 되겠습니다. ^^
IE에서는 제대로 나오는데 FF3에서는 border-collapse를 먹은 table은 상단의 2px을 잡아 먹어버립니다.
즉 위치가 -2px이 되어버리더군요 FF3은 안써서 몰랐는데 아는분의 도움요청으로 테스트를 해본결과 이러한 버그가 발생했습니다. 해결방법은 table에 display: block;를 주는걸로 해결을 하셨다고 했는데 영찜찜해서요
---------------------------------------------------------------------
IE6에서 발생하는 ‘더블 마진 플롯 버그‘ 입니다. float된 요소에 float된 방향과 동일한 방향의 margin을
설정하는 경우 margin값이 두 배로 작용하는 버그 입니다. 이 버그는 float된 방향과 같은 방향으로 형제 엘리먼트가 존재하는 경우에는
발생하지 않습니다.
float된 방향과 동일한 방향으로 margin을 설정하지 않는다. 부모 요소의 padding을 이용하거나 position, left,
right 속성을 이용하여 배치 할 수 있다. 한편 float된 엘리먼트가 left, right 값을 갖게 되면 해당 엘리먼트의 display
속성이 block이 되는 특징이 있는데 이때 display속성을 inline으로 바꿔주면 IE6에서 더 이상 문제가 발생하지 않는다. 사실
display 속성을 inline으로 변경하더라도 해당 엘리먼트는 float 때문에 block 속성을 유지하게 되고 width, height와
같은 값들은 유지된다. Why is this happening? Don’t ask such silly questions! This is IE6,
remember?
UI 개발자가 ‘웹 표준’ 방식으로 전환하게 되면 으레 ‘브라우저 호환성’까지 확보하는 작업을 병행하게 됩니다. 정해진 표준 명세에 따라서 코드를 작성하는 것은 쉬우나 ‘브라우저 호환성’을 확보하는 일은 그 반대로 정말 고된 작업입니다. 저는 여기서 적지않은 오해가 발생한다고 생각합니다. ‘웹 표준은 더 많은 자원을 필요로 한다’ 라고 말하는 거죠. 저는 이것이 ‘브라우저 호환성 유지 작업은 더 많은 자원을 필요로 한다’ 라는 사실의 잘못된 표현이라고 생각합니다. ‘웹 표준’과 ‘브라우저 호환성’은 서로 다른 개념인데 이 두 개념을 아무 구분없이 뭉뚱그려 사용함으로서 웹 표준에 대한 그릇된 인식이 형성되었다고 생각합니다. 웹 사이트를 개발함에 있어 ‘브라우저 호환성’은 목표이고 ‘웹 표준’은 방법론 입니다. ‘웹 표준≠브라우저 호환성’ 서로 같지 않습니다.
솔직히 사람들은 ‘웹 표준’ 이라는 키워드를 더 많이 찾지만 ‘크로스브라우징’ 이라는 키워드에 더 환호한다고 생각합니다. 그래서 오늘은 이것을 준비 했습니다. ‘실전 비 표준 가이드’. 말 그대로 표준이 아닌 가이드 입니다. 제가 악마에게 영혼이라도 판걸까요? 이제서야 정리하는 이유는 이제 막 당구에 입문하는 친구에게 찍어치기를 먼저 알려주지 않는 것과 마찬가지 이유 입니다. 찍어치기를 먼저 알려주면 얇게 쳐도 될 공을 찍어치기 때문이죠.
첫 번째 라인은 희망하는 값 두 번째 라인은 FF 2 디버깅 값 세 번째 라인은 다시 희망하는 값 DTD가 표준모드인 경우 작용
Opera 9
html:first-child #selector { property:value; }
Opera 9.5 부터 작용하지 않음 DTD와 무관하게 작용
Safari 3
없음
없음
브라우저 호환성을 유지하는데 너무 많은 시간이 소요된다면 이런 CSS Hack 이라도 사용해서 시간을 절약해 보세요. 단, 다른 장치나 브라우저에서 어떻게 작용하게 되는지에 대하여 저는 아무것도 보증하지 않습니다. Hack을 사용하기 전에 반드시 알아두면 좋은 것은 ‘어느 브라우저가 CSS 표준 명세에 따라 렌더링 하고 있는지’에 대한 정보 입니다. 브라우저 마다 렌더링이 달라서 어느것이 표준인지 모르겠다면 Opera 와 Safari 를 먼저 참고하세요. 이 두 브라우저가 99.9% 정도 표준에 따라 렌더링 하는 브라우저들 입니다.
IE5.5에서 inline-block 값을 지원한다. 이 값을 사용하여 width이나 height 지정없이 개체에 배치(layout )를 만들 수 있다.
모든 보이는 object들은 블럭이거나 인라인 엘레멘트이다. 예를들어 div 개체는 블럭 엘레멘트이고, span 개체는 인라인 엘레멘트이다. 블럭엘레멘트는 전형적으로 시작하면서와 끝나면서 새로운 줄이 삽입되며, 다른 블럭엘레멘트나 인라인 엘레멘트를 포함할 수 있다. 이에 반해 인라인 엘레멘트는 새로운 줄을 삽입하지 않고, 인라인 엘레멘트나 데이터을 포함할 수 있으나 블럭 엘레멘트를 포함할 수 없다. display 속성을 변경하면 주위 내용의 배치에 영향을 준다.
block 값을 갖는 엘레멘트 다음에 새로운 줄을 삽입한다.
inline 값을 갖는 엘레멘트로부터 줄을 제거한다.
none 값을 갖는 엘레멘트로부터 디스플레이되었던 데이터를 감춘다.
visibility 속성과는 달리, display가 none 값을 가지면 스크린 상에서 개체를 위한 공간이 확보되지 않는다.
table-header-group와 table-footer-group 값들은 복수 페이지에서 tHead와 tFoot 개체들의 내용을 각 페이지에 디스플레이할 수 있도록 지정하기 위하여 사용될 수 있다.
