목차
- outline 예제 - 테두리 외곽선 일괄 지정
- outline 정의
- 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;
부모요소의 속성값 상속.