• 회원가입
  • 로그인
  • 구글아이디로 로그인

[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;

부모요소의 속성값 상속.

 


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

분류 제목
outline CSS - outline 속성 ★ - 테두리 외곽선 일괄 지정. (= outline속성 = 아웃라인속성)
outline CSS - outline-style (아웃라인스타일) - 테두리 외곽 스타일 (상속 X) : (IE8)
outline CSS - outline-width (아웃라인위드스) - 테두리 외곽 두께 (상속 X) : (IE8)
outline CSS - outline-color 속성 - 외곽선두께 (= 아웃라인컬러속성 = outline-color속성…
outline CSS - outline-offset 속성 -
목록
찾아주셔서 감사합니다. Since 2012