• Q&A
  • 회원가입
  • 로그인

[outline] CSS - outline 속성 ★ - 테두리 외곽선 일괄 지정. (= 아웃라인속성, 상속X, IE8)

목차

  1. outline 예제
  2. outline 정의
  3. outline 구문

 

outline 예제
 
<style>
div {
   width:200px;
   height:
   text-align: center;
   border: 5px solid red ;
   outline: 5px solid blue;
   margin:0 auto;
   padding:10px;
}
p {
   text-align: center;
}
</style>
 
<div>
   <p>홈짱닷컴</p>
   <p>Homzzang.com</p>
</div>
 
※ div 스타일의 text-align:center 속성은 정렬에 영향 안 미치나, 없으면 border 색깔이 사라짐. 
※ p 스타일의  text-align:center 속성이 실질적으로 div 요소 안에서 중앙 정렬을 담당.
※ margin:0 aoto 속성은 div 요소 중앙정렬 속성으로, IE이상에서 DTD 선언되어야 정상작동.
 
outline 정의

 

border (테두리) 바깥쪽의 외곽선.

 


 

1.

outline 속성 중 두께・색깔은 선언 안 해도 되지만,

스타일 속성(예:solid)은 반드시 선언해줘야 함.

 

2.

스타일 두께 색깔의 속성 순서는 자유.

 

3.

outline은 요소에 포함 안 되므로, 요소너비 (width)나 요소높이(height)에서 제외. 

 

4.

IE경우, IE8 이상에서 DTD 선언되어 있어야 작동.

 

5.

CSS2

 

6.

기본 문법은 border와 동일. 

 

 
outline 구문

 

선택자 {outline: width style color|initial|inherit;}

(예) div {outline:2px solid red;}

 


[속성값]


width

선택. 외곽선 너비.

 

style

필수. 외곽선 스타일.

 

color

선택. 외곽선 색깔.

 

initial

이 속성의 기본값 지정.

 

inherit;

부모요소의 속성값 상속.

 


방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

찾아주셔서 감사합니다. Since 2012