목차
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;
부모요소의 속성값 상속.
주소 복사
랜덤 이동