강의를 듣다가 강사님께서 border: none; outline: none; 을 작성하시는 걸 보고 두 프로퍼티의 차이가 궁금해져서 찾아보았다.
작성한 마크업은 아래와 같다.
<div class="border-outline-container">
<div class="border"></div>
<div class="outline"></div>
</div>작성한 css는 아래와 같다.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.border-outline-container {
margin: 1rem;
display: flex;
justify-content: space-between;
}
.border {
width: 150px;
height: 150px;
padding: 8px;
margin: 8px;
border: 2px solid green;
}
.outline {
width: 150px;
height: 150px;
padding: 8px;
margin: 8px;
outline: 2px solid red;
}border box
box-sizing: border-box;를 작성했기 때문에 div의 너비와 높이는 border와 padding을 포함하게 된다. 따라서 content 자체는 150px에서 padding 양쪽을 합한 16px과 border 양쪽을 합한 4px을 뺀 130 * 130 의 크기를 갖는다.
border-top,border-left등의 속성을 이용하여 특정 테두리만 스타일링 할 수 있다. outline은outline-top과 같은 속성이 없으므로 불가능하다.
outline box
- outline은 border의 바깥에 그려지는 선이다.
- outline의 너비는 box-sizing 속성의 값에 영향을 받지 않는다. 따라서 content는 150px에서 padding 16px을 뺀 134 * 134 의 크기를 갖는다.
- 아래 그림에서 볼 수 있듯 outline은 CSS Box Model에 속하지 않는다.
- 또한 outline은 공간을 차지하지 않는다. 이를 확인하기 위해 outline의 색상을 흰색으로 변경해서 확인한 결과, padding과 margin 사이에는 여백이 없으며 그 사이에 outline이 위치해있음을 알 수 있었다.
- border와 마찬가지로 rounded 모서리를 지원한다. 스택오버플로우에서 그렇지 않다는 답변을 보고 확인차 시도해보았는데 border-radius 속성이 잘 적용되었다.
outline-offset속성을 사용하여 offset을 작성할 수 있다.outline-offset: 15px;을 작성했을 때 아래와 같이 offset이 적용되어 Box Model을 벗어나서 outline이 그려지게 된다.
정리
- border는 요소에서 공간을 차지한다. outline은 공간을 차지하지 않는다.
- border, outline 모두 border-radius 속성을 사용하여 둥근 모서리를 만들 수 있다.
- border는 한쪽 모서리만 스타일링 할 수 있는 반면 outline은 불가능하다.
- outline은 offset을 적용할 수 있지만 border는 불가능하다.
- +) outline은 border의 바깥에 그려진다.
