글
display 스타일 속성은 block element를 inline element로 혹은 inline element를 block element로 변환시켜 준다. 아래의 소스파일과 출력화면을 보면 a 태그 element는 원래 inline형인데 display:block; 라고 스타일 속성을 지정해 block형으로 바꾸었고 div 태그 element는 원래 block element인데 display:inline; 라고 스타일 속성을 지정해 inline형으로 바꾸어 줬다. 또한 display:none; 라고 지정해주면 그 element는 출력화면에 나타나지 않게 된다. 화면만 나타나지 않을 뿐만 아니라 원래 없는 것처럼 영역까지 사라지게 된다. (소스) <head>
<title> CSS 속성 익히기 </title>
<meta http-equiv="content-type" content="text/html;charset=euc-kr"/>
<style type="text/css">
/*display는 block, none, inline 세가지를 가지고 있다. */
a {
display:block; /*inline level elem을 block level elem으로 바꾸어 준다.*/
background:red;
}
div {
display:inline; /*위와 반대 역할, block를 inline로 바꾸어 준다.*/
background:yellow;
}
</style>
</head> <body>
<p>검색엔진 사이트 <a href="www.naver.com" color=blue>네이버</a>로 연결됩니다.</p>
<div>첫번째 블럭 영역</div>
<div>두번째 블럭 영역</div>
</body> (출력화면)
a 태그가 block형이 되어 배경색깔인 붉은 색이 글자공간을 넘어서 쭈욱 길어지게 되었고 div 태그는 inline형이 되어 글자공간에만 노란배경색이 들어가게 되었다.
<title> CSS 속성 익히기 </title>
<meta http-equiv="content-type" content="text/html;charset=euc-kr"/>
<style type="text/css">
/*display는 block, none, inline 세가지를 가지고 있다. */
a {
display:block; /*inline level elem을 block level elem으로 바꾸어 준다.*/
background:red;
}
div {
display:inline; /*위와 반대 역할, block를 inline로 바꾸어 준다.*/
background:yellow;
}
</style>
</head> <body>
<p>검색엔진 사이트 <a href="www.naver.com" color=blue>네이버</a>로 연결됩니다.</p>
<div>첫번째 블럭 영역</div>
<div>두번째 블럭 영역</div>
</body> (출력화면)
a 태그가 block형이 되어 배경색깔인 붉은 색이 글자공간을 넘어서 쭈욱 길어지게 되었고 div 태그는 inline형이 되어 글자공간에만 노란배경색이 들어가게 되었다.
'웹스터디 > xhtmlcss' 카테고리의 다른 글
| RSS란 무엇인가. (초보용) (0) | 2008.11.09 |
|---|---|
| 해외 CSS 테크닉 문서 모음 (0) | 2008.11.09 |
| Aire Kahn이 제시한 법칙 - 그 자세한 설명 (0) | 2008.11.09 |
| 구조적 HTML 짜기 (0) | 2008.11.09 |
| 사이트 내 모든 type 스타일 지정하기 (0) | 2008.11.08 |
| 아름다운 CSS 타이포그라피 10선 (0) | 2008.11.02 |
| 체크박스와 라디오버튼을 이미지로 사용하자 (0) | 2008.10.17 |
| Customized input elements (0) | 2008.10.17 |
| Shoutbox (0) | 2008.10.17 |
| XHTML/CSS를 이용한 이미지 데코레이션 (0) | 2008.10.17 |
RECENT COMMENT