outline

CSS 공작소에 방문해 주셔서 감사드립니다. 반응형 예제로 느껴보세요!!

outline 은 지정된 영역의 바깥쪽에 테두리를 만듭니다.
만약 border 로 테두리가 설정된 상태에서 사용한다면 border 의 테두리
바깥쪽으로 또 하나의 테두리를 만들게 됩니다.

예제 1
outline 개요
보기
outline : black solid 2px;
outline : black dotted 2px;
outline : red dotted 2px;
outline : red dashed 2px;
소스
<style type="text/css">
    .css_test {
        text-align : center;
        padding : 5px;
        margin-bottom : 10px;
    }
</style>

<div class="css_test" style="outline:black solid 2px;">outline : black solid 2px;</div>
<div class="css_test" style="outline:black dotted 2px;">outline : black dotted 2px;</div>
<div class="css_test" style="outline:red dotted 2px;">outline : red dotted 2px;</div>
<div class="css_test" style="outline:red dashed 2px;">outline : red dashed 2px;</div>
사용된 CSS (클릭시 보기) : margin-bottomoutlinepaddingtext-align
예제 2
border 설정 상태에서의 outline 보기
보기
outline : black solid 20px;
outline : black dotted 20px;
outline : red dotted 20px;
outline : red dashed 20px;
소스
<style type="text/css">
    .css_test {
        text-align : center;
        padding : 5px;
        margin-bottom : 20px;
        border : 5px solid blue;
    }
</style>

<div class="css_test" style="outline:black solid 5px;">outline : black solid 20px;</div>
<div class="css_test" style="outline:black dotted 5px;">outline : black dotted 20px;</div>
<div class="css_test" style="outline:red dotted 5px;">outline : red dotted 20px;</div>
<div class="css_test" style="outline:red dashed 5px;">outline : red dashed 20px;</div>
사용된 CSS (클릭시 보기) : bordermargin-bottomoutlinepaddingtext-align
설명
- border 테두리의 바깥쪽으로 하나 더 테두리가 만들어집니다.
예제 3
보기
CSS 공작소
outline :
5px
outline : 5px black solid
설명
- border : 5px solid blue 설정이 되어있는 div 에 outline 를 조절해 보는 예제입니다.
- 조절해 보면 outline 의 테두리는 다른것에 영향을 주지않는것을 볼 수 있습니다.
 
☞ 목록으로 가기
CSS 공작소  /   jQuery 공작소