HTML CSS(스타일시트) display 속성(시각적 서식 속성)- 속성값,css 예제및 관련된 태그입니다.

CSS 스타일시트 2012. 9. 18. 12:47

share this post

HTML CSS display 속성

객체에 인라인 또는 블럭단위의 박스를 생성합니다.

속성 값: inline,block,list-item,run-in,compact,marker,table,inline-table,table-row-group,table-header-group,table-footer-group,table-row,table-column-group,table-column,table-cell,table-caption,none,inherit

Tip: CSS 몇가지 방법
1. 임베디드 스타일 시트(Embedded Style Sheet) : 내부 스타일 시트라고도 하며 HTML 웹페이지의 상단 <head>와 </head> 테그 사이에 Style Sheet를 지정하는 방법입니다.
2. 링크타입 스타일 시트(External Style Sheet) : 외부 스타일 시트라고도 하며 별도의 CSS파일을 만들어 Link 테그로 연결하는 방법입니다.
3. 인라인스타일(Inline Styles) : HTML 웹페이지 내에서 직접 지정하는 방법입니다.
4.@import로 외부 스타일시트를 참조합니다.
5.xml-stylesheet 처리 명령으로 외부 스타일시트를 참조합니다.

CSS display 속성 값

inline : (기본값) 줄바꿈이 되지 않음. margin-bottom,margin-top,padding,width, height 속성을 사용할 수 없음

block : 줄을 바꿈. margin-bottom,margin-top,padding,width, height 속성을 사용할 수 있음

list-item : 리스트 목록 지정

run-in : 블록 박스로 지정

compact :

marker : 앞/뒤 생성된 내용에 표시자가 되도록 지정

table : 앞뒤 줄바꿈이 되는 테이블처럼

inline-table : 인라인 테이블 요소의 특징을 가짐

table-row-group : 테이블 행의 그룹처럼 보이게 지정

table-header-group : 테이블의 헤더 행 그룹처럼 보이게 지정

table-footer-group : 테이블의 풋터 행 그룹처럼 보이게 지정

table-row : 테이블의 행 처럼 보이게 지정

table-column-group : 테이블의 컬럼그룹(colgroup) 처럼 보이게 지정

table-column : 테이블의 컬럼 처럼 보이게 지정

table-cell : 테이블의 셀처럼 보이게 지정

table-caption : 테이블의 캡션처럼 보이게 지정

none : 개체가 디스플레이되지 않음

inherit : 부모(상위)부터 상속받음

1. CSS display : 링크타입 스타일 시트(External Style Sheet)

링크타입 스타일 시트(External Style Sheet)은 외부 스타일 시트라고도 하며 별도의 CSS파일을 만들어 Link 태그로 연결하는 방법입니다.

					
					
 
[style.css] 이라는 이름을 가진 별도의 파일입니다.

<style.css> 
 p {
   display: inline,block,list-item,run-in,compact,marker,table,inline-table,table-row-group,table-header-group,table-footer-group,table-row,table-column-group,table-column,table-cell,table-caption,none,inherit 속성값입니다.;
 }
 

별도의 이름을 가진 웹페이지입니다.(예 : sample.html)
HTML CSS font-size 속성의 예제 샘플입니다

<body>
  <p>HTML CSS display 속성의 링크타입 스타일 시트(External Style Sheet) 예제 샘플입니다.</div>
  <p>HTML CSS display 속성의 링크타입 스타일 시트(External Style Sheet) 예제 샘플입니다.</div>
  <p>HTML CSS display 속성의 링크타입 스타일 시트(External Style Sheet) 예제 샘플입니다.</div>
</body>

CSS display 예제 : 임베디드 스타일 시트(Embedded Style Sheet)

임베디드 스타일 시트(Embedded Style Sheet)은 내부 스타일 시트라고도 하며 HTML 웹페이지의 상단 <head>와 </head>태그 사이에 Style Sheet를 지정하는 방법입니다.

					
					
<head>
         
<style type="text/css"> <!--  
 p {
   display: inline,block,list-item,run-in,compact,marker,table,inline-table,table-row-group,table-header-group,table-footer-group,table-row,table-column-group,table-column,table-cell,table-caption,none,inherit 속성값입니다.;
 }
 
 --> </style>
</head>

<body>
  <p>HTML CSS display 속성의 임베디드 스타일 시트(Embedded Style Sheet) 예제 샘플입니다.</div>
  <p>HTML CSS display 속성의 임베디드 스타일 시트(Embedded Style Sheet) 예제 샘플입니다.</div>
  <p>HTML CSS display 속성의 임베디드 스타일 시트(Embedded Style Sheet) 예제 샘플입니다.</div>
</body>

CSS display 예제 : 인라인스타일(Inline Styles)

인라인스타일(Inline Styles)은 HTML 웹페이지 내에서 직접 지정하는 방법입니다.

<div style="display : 여기에 속성 값을 넣습니다;">HTML CSS display속성의 인라인스타일(Inline Styles) 예제 샘플입니다.<div>

CSS display 관련 태그

저작자표시 비영리 변경금지

'CSS 스타일시트 ' 카테고리의 다른 글

HTML CSS(스타일시트) float 속성(시각적 서식 속성)- 속성값,css 예제및 관련된 태그입니다. (0)	2012.09.18
HTML CSS(스타일시트) empty-cells 속성(테이블 속성)- 속성값,css 예제및 관련된 태그입니다. (0)	2012.09.18
HTML CSS(스타일시트) cursor 속성(시각 효과 속성)- 속성값,css 예제및 관련된 태그입니다. (0)	2012.09.18
HTML CSS(스타일시트) counter-reset 속성(콘텐츠 속성)- 속성값,css 예제및 관련된 태그입니다. (0)	2012.09.18
HTML CSS(스타일시트) counter-increment 속성(콘텐츠 속성)- 속성값,css 예제및 관련된 태그입니다. (0)	2012.09.18

WRITTEN BY

: white_rabbitstar
html대학에서는 html 태그,html5 신규태그,css등 모든 속성,이벤트,속성값을 정리하여 앞으로 열심히 글을 올리 겠습니다.