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

목차

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>

 

결과보기

---

PS.

• div 스타일의 text-align:center 속성은 정렬에 영향 안 미치나, 없으면 border 색깔이 사라짐. 
• p 스타일의  text-align:center 속성이 실질적으로 div 요소 안에서 중앙 정렬을 담당.
• margin:0 aoto 속성은 div 요소 중앙정렬 속성으로, IE8 이상에서 DTD 선언되어야 정상작동.

 

 

outline 정의

 

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

 

---

 

1.

• outline 속성 중 두께・색깔은 선언 안 해도 되지만, 스타일 속성(예:solid)은 반드시 선언해줘야 함.
• 스타일 두께 색깔의 속성 순서는 자유.
• outline은 요소에 포함 안 되므로, 요소너비 (width)나 요소높이(height)에서 제외. 
• 기본 문법 구조는 border와 동일. 

 

2.

• 기본값: medium invert color
• 상속여부: X
• 애니가능: O
• CSS버전: CSS2
• JS구문: object.style.outline="3px blue dotted";

 

3.

IE8 이상 주요 최신 브라우저 모두 지원. 

(※ IE8 이상 경우, DTD 선언 필수.)

 

4. MDN outline 예제보기

https://developer.mozilla.org/en-US/docs/Web/CSS/outline

 

outline 구문

 

selector {outline: width style color|initial|inherit;}

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

 

---

[속성값]

width

선택. 외곽선 너비.

 

style

필수. 외곽선 스타일.

 

color

선택. 외곽선 색깔.

 

initial

이 속성의 기본값 지정.

 

inherit;

부모요소의 속성값 상속.