HTML CSS(스타일시트) outline-style 속성(시각 효과 속성)- 속성값,css 예제및 관련된 태그입니다.

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

HTML CSS outline-style 속성

테두리의 스타일을 정의합니다.

속성 값: none,dotted,dashed,solid,double,groove,ridge,inset,outset



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 outline-style 속성 값

none : 테두리 없음

dotted : 짧은 점선으로 테두리 선 지정

dashed : 긴 점선으로 테두리 선 지정

solid : 얇은 라인 테두리 선 지정

double : 두 줄로 테두리 선 지정

groove : 테두리가 들어가 보이도록 테두리 선을 지정

ridge : 테두리가 위로 올라온 것 같은 효과를 가진 테두리 선을 지정

inset : 테두리가 안으로 들어간 느낌을 지정

outset : 테두리가 밖으로 나온 느낌을 지정



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

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

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



<style.css> 
 h1 {
   outline-width: 1px;
   outline-style: none,dotted,dashed,solid,double,groove,ridge,inset,outset 속성값입니다.;
 }

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

  <body>
    <h1>CSS 레포드 과제</h1>
    <ul>
      <li>CSS 속성 예제 만들기</li>
      <li>CSS 속성의 링크타입 스타일 시트(External Style Sheet) 값은?</li>
      <li>팀별 CSS의 프로젝트</li>
    </ul>
    
  </body>


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

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

					
					
<head>
         


<style type="text/css"> <!--  
 h1 {
   outline-width: 1px;
   outline-style: none,dotted,dashed,solid,double,groove,ridge,inset,outset 속성값입니다.;
 }
 --> </style>
</head>

  <body>
    <h1>CSS 레포드 과제</h1>
    <ul>
      <li>CSS 속성 예제 만들기</li>
      <li>CSS 속성의 임베디드 스타일 시트(Embedded Style Sheet) 값은?</li>
      <li>팀별 CSS의 프로젝트</li>
    </ul>
    
  </body>


CSS outline-style 예제 : 인라인스타일(Inline Styles)

인라인스타일(Inline Styles)은 HTML 웹페이지 내에서 직접 지정하는 방법입니다.
<div style="outline-style : 여기에 속성 값을 넣습니다;">HTML CSS outline-style속성의 인라인스타일(Inline Styles) 예제 샘플입니다.<div>


 

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

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

HTML CSS(스타일시트) overflow 속성(시각 효과 속성)- 속성값,css 예제및 관련된 태그입니다.  (0) 2012.09.18
HTML CSS(스타일시트) outline-width 속성(시각 효과 속성)- 속성값,css 예제및 관련된 태그입니다.  (0) 2012.09.18
HTML CSS(스타일시트) outline-color 속성(시각 효과 속성)- 속성값,css 예제및 관련된 태그입니다.  (0) 2012.09.18
HTML CSS(스타일시트) outline 속성(시각 효과 속성)- 속성값,css 예제및 관련된 태그입니다.  (0) 2012.09.18
HTML CSS(스타일시트) min-width 속성(시각적 서식 속성)- 속성값,css 예제및 관련된 태그입니다.  (0) 2012.09.18
WRITTEN BY
white_rabbitstar
html대학에서는 html 태그,html5 신규태그,css등 모든 속성,이벤트,속성값을 정리하여 앞으로 열심히 글을 올리 겠습니다.
,