[HTML/CSS] 경계 바깥쪽에 배경색을 추가하려는 경우

개시하다

이 기사는 저자의 이해와 연습 성과를 복습하고 확인하기 위해 쓴 것이다.
잘못된 해석 등이 있으면 연락 주세요.

대응법

아웃라인 및 아웃라인 오프셋을 설명합니다.

outline: 5px solid orange; // 輪郭線の設定
outline-offset: -10px; // 輪郭線と要素の空間を設定する。マイナスだと内側、プラスだと外側に線が表示される。

border와outline의 차이

왼쪽은border,오른쪽은outline
border는 요소의 일부분으로 설정됨
밖에 공백을 두고 싶어도 쓸 수 없다.

outline이 요소로 인식되지 않음
아웃라인 오프셋을 설정하여 선의 위치를 이동할 수 있습니다.

outline-offset 정보

outline-offset: -10px; outline-offset: 0; outline-offset: 10px;

참조 링크

https://developer.mozilla.org/ja/docs/Web/CSS/outline
https://developer.mozilla.org/ja/docs/Web/CSS/border