sourcecode

아웃라인과 경계 CSS 속성의 차이점은 무엇입니까?

codebag 2023. 10. 15. 17:18
반응형

아웃라인과 경계 CSS 속성의 차이점은 무엇입니까?

입니까의 입니까?border그리고.outlineCSS의 속성?

차이가 없다면 같은 것에 대해 두 가지 속성이 존재하는 이유는 무엇입니까?

보낸이: http://webdesign.about.com/od/advancedcss/a/outline_style.htm

CSS 개요 속성은 혼란스러운 속성입니다.처음에 알게 되면 국경지역과 멀리 떨어진 곳까지 어떻게 다른지 이해하기가 어렵습니다.W3C는 다음과 같은 차이점이 있다고 설명합니다.

  1. 윤곽선은 공간을 차지하지 않습니다.

  2. 윤곽선이 직사각형이 아닐 수 있습니다.

다른 답변들 외에...제가 생각할 수 있는 몇 가지 차이점은 다음과 같습니다.

1) 둥근 모서리

border다로 합니다.border-radius소유물.outline안 그래요.

div {
  width: 150px;
  height: 150px;
  margin: 20px;
  display: inline-block;
  position: relative;
}

.border {
  border-radius: 75px;
  border: 2px solid green;
}

.outline {
  outline: 2px solid red;
  border-radius: 75px;
  -moz-outline-radius: 75px;
  outline-radius: 75px;
}

.border:after {
content: "border supports rounded corners";
position: absolute;
bottom: 0;
transform: translateY(100%);

}
.outline:after {
content: "outline doesn't support rounded corners";
position: absolute;
bottom: 0;
transform: translateY(100%);
}
<div class="border"></div>

<div class="outline"></div>

피들

(NB: 비록 파이어폭스가.-moz-outline-radius윤곽에 둥근 모서리를 허용하는 성질...이 속성은 CSS 표준에 정의되어 있지 않으며 다른 브라우저에서 지원되지 않습니다(소스).

2) 한쪽만 스타일링 가능

에는 각 에 을 지정할 수 이 있습니다.border-top:,border-left:타

아웃라인으로는 안 돼요아웃라인톱은 없습니다.다 아니면 아무것도 아닙니다.(이 SO 게시물 참조)

3) 상쇄하다

아웃라인은 부동산 아웃라인과 오프셋을 지원합니다. offset, 보더는 그렇지 않습니다.

.outline {
  margin: 100px;
  width: 150px;
  height: 150px;
  outline-offset: 20px;
  outline: 2px solid red;
  border: 2px solid green;
  background: pink;
}
<div class="outline"></div>

피들

모든 는 를 합니다.outline-offset인터넷 익스플로러

다른 답변 외에도, 개요는 보통 디버깅에 사용됩니다.오페라는 문서의 모든 요소가 어디에 있는지를 보여주기 위해 개요 속성을 사용하는 멋진 사용자 CSS 스타일을 가지고 있습니다.

요소가 예상한 위치나 예상한 크기에 나타나지 않는 이유를 확인하려는 경우 몇 가지 개요를 추가하고 요소가 어디에 있는지 확인합니다.

이미 언급한 바와 같이 윤곽선은 공간을 차지하지 않습니다.테두리를 추가하면 문서에서 요소의 전체 너비/높이가 증가하지만, 윤곽선에서는 이러한 현상이 발생하지 않습니다.또한 경계와 같은 특정 측면에 윤곽을 설정할 수 없습니다. 전부이거나 아무것도 아닙니다.

tld;

W3C는 다음과 같은 차이점이 있다고 설명합니다.

  • 윤곽선은 공간을 차지하지 않습니다.
  • 윤곽선이 직사각형이 아닐 수 있습니다.

원천

접근성을 위해 개요를 사용해야 합니다.

또한 개요의 주된 목적은 접근성이라는 점에 유의해야 합니다.개요: 어느 것도 피해야 합니다.

제거해야 하는 경우 대체 스타일링을 제공하는 것이 더 좋을 수도 있습니다.

아웃라인을 사용하여 포커스 표시자를 제거하는 방법에 대한 팁을 꽤 많이 보았습니다:none 또는 outline:0.어떤 요소에 키보드 포커스가 있는지 쉽게 알 수 있는 다른 항목으로 윤곽선을 교체하지 않는 한 이 작업을 수행하지 마십시오.키보드 포커스의 시각적 표시기를 제거하면 키보드 내비게이션에 의존하는 사람들이 사이트를 탐색하고 사용하는 데 정말 어려움을 겪을 것입니다.

출처: "링크 및 폼 컨트롤에서 아웃라인을 제거하지 않음", 365 Berea Street

기타 리소스

개요를 실용적으로 사용하는 것은 투명성을 다룹니다.배경이 있는 부모 요소가 있지만 부모의 배경이 보여지도록 자녀 요소의 테두리를 투명하게 하고 싶다면 '경계'가 아닌 '아웃라인'을 사용해야 합니다.테두리는 투명할 수 있지만 부모가 아닌 아이의 배경을 보여줄 것입니다.

즉, 이 설정은 다음과 같은 효과를 만들어 냈습니다.

outline: 7px solid rgba(255, 255, 255, 0.2);

enter image description here

요소 내부에는 테두리가 생성되고 요소 외부에는 외곽선이 생성됩니다.따라서 경계는 요소의 너비와 높이를 따라 계산되고 윤곽선은 요소 외부에 그려집니다.

Demo

W3 학교 현장에서

CSS 테두리 속성을 사용하면 요소 테두리의 스타일과 색상을 지정할 수 있습니다.

윤곽선은 요소를 "눈에 띄게" 만들기 위해 요소(경계 바깥쪽) 주위에 그리는 선입니다.

개요 축약 속성은 하나의 선언에서 모든 개요 속성을 설정합니다.

설정할 수 있는 속성은 (순으로) 아웃라인 색상, 아웃라인 스타일, 아웃라인 너비입니다.

위의 값 중 하나가 누락된 경우(예: outline:solid #ff0000;), 누락된 속성에 대한 기본값이 삽입됩니다.

자세한 정보는 여기에서 확인하세요. http://webdesign.about.com/od/advancedcss/a/outline_style.htm

약간 오래된 질문이지만 (부정적인 여백, 상자 그림자 등을 통해) 윤곽선이 모든 하위 요소의 외부에 렌더링되는 Firefox 렌더링 버그('13년 1월 현재에도 있음)를 언급할 가치가 있습니다.

이 문제는 다음과 같이 해결할 수 있습니다.

.container {
    position: relative;
}
.container:before {
   content: '';
   margin: 0;
   padding: 0;
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   outline: 1px solid #ff0000;
}

아직도 고쳐지지 않아서 정말 안타깝습니다.많은 경우 윤곽선이 요소의 치수에 추가되지 않기 때문에 요소의 치수를 설정할 때 항상 테두리 폭을 고려할 필요가 없기 때문에 훨씬 선호합니다.

결국, 어떤 것이 더 간단할까요?

.container {
    width: 960px;
    height: 300px;
    outline: 3px solid black;
}

또는:

.container {
    width: 954px;
    height: 294px;
    border: 3px solid black;
}

IE는 W3C 박스 모델을 구현하지 않기 때문에 W3C의 윤곽이 IE의 테두리라는 점도 주목할 필요가 있습니다.

w3c 박스 모델에서 테두리는 요소의 너비와 높이에 구애받지 않습니다.IE에서는 포괄적입니다.

테두리와 외곽선의 차이점:

테두리는 상자 모형의 일부이므로 요소의 크기에 따라 계산됩니다.윤곽선은 상자 모형의 일부가 아니므로 주변 요소에 영향을 주지 않습니다.

데모:

#border {
  border: 10px solid black;
}
#outline {
  outline: 10px solid black;
}
<html>
<body>
<span id="border">Border</span>Other text<br><br>
<span id="outline">Outline</span>Other text
</body>
</html>

Other differences:
The outline is displayed outside the border.
Outlines cannot have rounded corners; borders can.

저는 둘의 차이점을 알아보기 위해 css/html 코드를 조금 만들었습니다.

outline특히 인라인 컨테이너에 잠재적으로 넘치는 하위 요소를 포함시키는 것이 좋습니다.

border블록 behaving 요소에 훨씬 더 적합합니다.

만지작거리세요, 선생님!

CSS의 아웃라인 속성은 요소 외부에 선을 그립니다.다음을 제외하고는 국경과 비슷합니다.

  • 항상 모든 면을 돌며 특정할 수 없습니다.
  • 측면은 박스 모델의 일부가 아니기 때문에 영향을 주지 않습니다.
    요소 또는 인접 요소의 위치

출처 : https://css-tricks.com/almanac/properties/o/outline/

"outline"을 사용하는 실용적인 예로, 시스템이 웹 페이지에 초점을 맞추는 희미한 점선 테두리는 (예를 들어 링크를 탭하면) outline 속성을 사용하여 제어할 수 있습니다 (적어도 다른 브라우저는 시도하지 않고 Firefox에서는 가능하다는 것을 알고 있습니다).

일반적인 "이미지 교체" 기술은 다음과 같은 것을 사용합니다.

<div id="logo"><a href="/">Foo Widgets Ltd.</a></div>

CSS에 다음과 같은 내용이 포함됩니다.

#logo
{
    background: url(/images/logo.png) center center no-repeat;
}
#logo a
{
    display: block;
    text-indent: -1000em;
}

문제는 포커스가 태그에 도달하면 윤곽선이 1000em을 왼쪽으로 향한다는 것입니다.아웃라인을 사용하면 이러한 요소에서 포커스 아웃라인을 끌 수 있습니다.

IE Developer Toolbar에서도 "select" 모드에서 검사할 요소를 강조할 때 아웃라인 "under the hood"와 같은 것을 사용하고 있다고 생각합니다.그것은 "아웃라인"이 공간을 차지하지 않는다는 사실을 잘 보여줍니다.

윤곽선을 어떤 것의 바깥쪽에 그려지는 경계선으로 생각해 보세요. 경계선으로서 프로젝터가 어떤 것의 바깥쪽을 그 주변에 있는 실제 물체입니다.
투영은 쉽게 겹칠 수 있지만 테두리는 통과하지 못합니다.
은 내가 씀씀이를 grid+%width뷰예 div , 는합니다(: div withwidth:100%를 둔 width:100pxsborder:solid 5px분할하여 디브를 더 작게 만들어 국경에 공간을 마련합니다(비록 드물고 해결 가능하지만!).
아웃라인의 경우 아웃라인이 가상이기 때문에 이 문제가 없습니다. D 요소 밖에 있는 선일 뿐이지만 문제는 띄어쓰기를 제대로 하지 않으면 다른 내용과 겹치게 된다는 것입니다.

간단히 말하면 다음과 같습니다.
개요 전문가:
다에 않습니다.
점:

Google web.dev는 Box Model에 대한 좋은 설명을 가지고 있습니다.

테두리 상자는 패딩 상자를 감싸고 해당 공간은 테두리 값이 차지합니다.테두리 상자는 상자의 경계이고 테두리 테두리는 시각적으로 볼 수 있는 범위의 한계입니다.테두리 특성은 요소를 시각적으로 프레임화하는 데 사용됩니다.

여백 상자는 상자의 여백 규칙에 따라 정의된 상자 주변의 공간입니다.아웃라인과 박스 쉐도우 같은 속성들도 위에 칠해져 있기 때문에 우리 박스 크기에 영향을 주지 않습니다.당신은 우리 상자에 200px의 윤곽선 폭을 가질 수 있고, 테두리 상자를 포함한 안의 모든 것들은 정확히 같은 크기일 것입니다.

W3Schools에서 복사:

정의 및 용도

윤곽선은 요소를 "눈에 띄게" 만들기 위해 요소(경계 바깥쪽) 주위에 그리는 선입니다.

언급URL : https://stackoverflow.com/questions/1158515/what-is-the-difference-between-outline-and-border-css-properties

반응형

'sourcecode' 카테고리의 다른 글

PowerShell에서 객체의 여러 항목을 합산하는 방법?  (0) 2023.10.20
PowerShell에서 점(.)과 앰퍼샌드(&)의 차이점은 무엇입니까?  (0) 2023.10.15
D3 힘 레이아웃 그래프를 확대하는 방법이 있습니까?  (0) 2023.10.15
HTML5에서 target="_blank"를 사용해도 괜찮습니까?  (0) 2023.10.15
localhost에서 Google 분석을 사용하지 않도록 설정하는 방법  (0) 2023.10.15

'sourcecode'의 다른글

  • 현재글아웃라인과 경계 CSS 속성의 차이점은 무엇입니까?

관련글

댓글

티스토리툴바