1. 아웃라인(outline)

  - outline 속성과 border 속성은 비슷하다. border가 테두리면 outline은 바깥 외곽선이라고 말한다.

  - 요소를 두드러져 보이게 만들고자 할 때 사용한다.

 

  • outline-style 
  • outline-width
  • outline-color
  • outline-offset

 

1-1 outline 여러 가지 속성

<style>
   div {width: 150px; height: 80px;}
   div.a 
    { 
        border: solid 3px skyblue;
        outline-style: solid;
        outline-width: 5px;
        outline-color: gray;
        outline-offset: 5px;
    }
</style>
<body>
    <div class="a"></div>
</body>

  - outline-style은 [CSS] 테두리(border) 참고

  - style, width, color 적용방법은 border와 동일하므로 설명은 필요 없을 거 같다.

  - outline의 축약 방법 또한 border와 동일하다.

  - outline-offset : border로부터 속성값만큼 간격을 띄운다.

  

 

 

 

'FrontEnd > Css' 카테고리의 다른 글

[CSS] position, z-index  (0) 2021.07.29
[CSS] display, visibility, opacity  (0) 2021.07.27
[CSS] 마진(margin)  (0) 2021.07.27
[CSS] 테두리(border)  (0) 2021.07.27
[CSS] 패딩(padding)  (0) 2021.07.27