테두리

CSS 팟캐스트 - 016: 테두리 를 통해 개인정보처리방침을 정의할 수 있습니다.

box 모델 모듈에서 박스 모델의 각 섹션을 설명하는 프레임 비유를 고려했습니다.

테두리 상자는 상자의 프레임입니다. border 속성은 이 프레임을 만들 수 있는 다양한 옵션을 제공합니다. 생각할 수 있는 거의 모든 스타일입니다.

테두리 속성

개별 border 속성을 사용하면 테두리의 다양한 부분에 스타일을 지정할 수 있습니다.

스타일

테두리를 표시하려면 이러한 포드의 border-style 다음과 같은 몇 가지 옵션 중에서 선택할 수 있습니다.

ridge, inset, outset, groove 스타일을 사용하는 경우 브라우저는 대비와 깊이를 제공하기 위해 두 번째로 표시된 색상의 테두리 색상을 어둡게 합니다. 이 동작은 브라우저에 따라 다를 수 있지만 black과 같은 어두운 색상에 특히 그렇습니다. Chrome에서는 이러한 테두리 스타일이 단색으로 나타나며, Firefox에서는 밝아진 후에 보다 어두운 두 번째 색상을 제공합니다.

다른 테두리 스타일에 따라서도 브라우저 동작이 달라질 수 있습니다. 따라서 다양한 브라우저에서 사이트를 테스트하는 것이 중요합니다. 이러한 차이점의 일반적인 예는 각 브라우저가 dotted 및 dashed 스타일을 렌더링하는 방식입니다.

</ph>

상자의 각 면에 테두리 스타일을 설정하려면 kubectl 명령어 border-top-style님, border-right-style, border-left-style, 및 border-bottom-style.

약식

margin 및 padding와 마찬가지로 border 약식 속성을 사용하여 하나의 선언에 테두리의 모든 부분을 정의합니다.

.my-element {
    border: 1px solid red;
}

border 약식의 값 순서는 border-width입니다. border-style 그리고 border-color를 차례로 클릭합니다.

색상

상자의 모든 면 또는 각 면에 border-color 기본적으로 상자의 현재 텍스트 색상(currentColor)을 사용합니다. 즉, 테두리 속성만 선언하면 예를 들면 너비, 색상은 명시적으로 설정하지 않는 한 계산된 값입니다.

.my-element {
    color: blue;
    border: solid; /* Will be a blue border */
}

.my-element {
    color: blue;
    border: solid yellow;
}

상자의 각 면에 테두리 색상을 설정하려면 사용 border-top-color님, border-right-color, border-left-color 및 border-bottom-color.

너비

테두리의 너비는 선의 두께를 말하며 border-width 기본 테두리 너비는 medium입니다. 하지만 스타일을 정의하지 않으면 표시되지 않습니다. thin 및 thick와 같이 이름이 지정된 다른 너비를 사용할 수 있습니다.

border-width 속성은 다음과 같은 길이 단위도 허용합니다. px, em, rem 또는 %입니다. 상자의 각 면에 테두리 너비를 설정하려면 border-top-width님, border-right-width, border-left-width 및 border-bottom-width.

논리적 속성

블록 흐름 및 인라인 흐름을 참조하는 방법을 알아본 논리적 속성 모듈 뚜렷한 상단, 오른쪽, 하단 또는 왼쪽이 아니라

테두리가 있는 이 기능도 있습니다.

.my-element {
    border: 2px dotted;
    border-inline-end: 2px solid red;
}

이 예에서 .my-element의 모든 면에는 2px이 있는 것으로 정의되어 있습니다. 현재 텍스트 색상인 점선 테두리 그러면 inline-end 테두리가 빨간색의 2px로 정의됩니다. 즉, 영어와 같이 왼쪽에서 오른쪽으로 읽는 언어에서는 빨간색 테두리가 상자 오른쪽에 있습니다. 아랍어와 같이 오른쪽에서 왼쪽으로 읽는 언어 빨간색 테두리가 상자 왼쪽에 있습니다.

브라우저 지원은 테두리의 논리적 속성에 따라 다양합니다. 사용하기 전에 지원 여부를 확인하시기 바랍니다.

테두리 반경

상자의 모서리를 둥글게 만들려면 border-radius 속성

.my-element {
    border-radius: 1em;
}

이렇게 하면 상자의 각 모서리에 일관된 테두리가 추가됩니다. 다른 테두리 속성과 마찬가지로 각 변의 테두리 반경을 정의할 수 있습니다. border-top-left-radius님, border-top-right-radius, border-bottom-right-radius 및 border-bottom-left-radius.

약식에서 각 모서리의 반경을 지정할 수도 있습니다. 왼쪽 상단, 오른쪽 상단, 오른쪽 하단, 왼쪽 하단 순서를 따릅니다.

.my-element {
    border-radius: 1em 2em 3em 4em;
}

모서리의 단일 값을 정의하면 은 테두리 반경이 두 부분으로 나뉘기 때문에 다른 약식을 사용합니다. 세로 및 가로 방향입니다. 즉, border-top-left-radius: 1em를 설정하면 왼쪽 상단-상단 반경 및 왼쪽 상단-왼쪽 반경을 설정합니다.

다음과 같이 모서리별로 두 속성을 모두 정의할 수 있습니다.

.my-element {
    border-top-left-radius: 1em 2em;
}

이렇게 하면 1em의 border-top-left-top 값이 추가됩니다. 2em의 border-top-left-left 값을 반환합니다. 이렇게 하면 왼쪽 상단 테두리 반경이 타원형 반경으로 변환됩니다. 를 사용합니다.

border-radius 약식에서 이러한 값을 정의할 수 있습니다. 표준 값 뒤에 /를 사용하여 타원형 값을 정의합니다. 이를 통해 창의력을 발휘하고 복잡한 도형을 만들 수 있습니다.

.my-element {
    border: 2px solid;
  border-radius: 95px 155px 148px 103px / 48px 95px 130px 203px;
}

테두리 이미지

CSS에서 획 기반 테두리만 사용할 필요는 없습니다. 또한 border-image 이 약식 속성을 사용하면 이미지의 슬라이스 및 너비, 경계선으로부터 가장자리까지의 거리와 반복 방법을 설정할 수 있습니다.

.my-element {
  border-image-source: url(https://assets.codepen.io/174183/border-image-frame.jpg);
  border-image-slice: 61 58 51 48;
  border-image-width: 20px 20px 20px 20px;
  border-image-outset: 0px 0px 0px 0px;
  border-image-repeat: stretch stretch;
}

border-image-width 속성은 border-width와 같습니다. 테두리 이미지의 너비를 설정하는 방법입니다. border-image-outset 속성을 사용하면 테두리 이미지와 이미지가 감싸는 상자 사이의 거리를 설정할 수 있습니다.

border-image-source

border-image-source (테두리 이미지의 소스)는 CSS 그라데이션을 포함하는 유효한 이미지의 url가 될 수 있습니다.

.my-element {
    border-image-source: url('path/to/image.png');
}

.my-element {
    border-image-source: linear-gradient(to bottom, #000, #fff);
}

border-image-slice

border-image-slice 속성은 이미지를 4개의 분할 선으로 이루어진 9개 부분으로 나눌 수 있는 유용한 속성입니다. 이는 상단, 오른쪽, 하단, 왼쪽 오프셋 값을 정의하는 margin 약식 표현과 같이 작동합니다.

.my-element {
    border-image: url('image.jpg');
    border-image-slice: 61 58 51 48;
}

오프셋 값을 정의하면 이제 이미지에 9개의 섹션(4개의 모서리, 4개의 가장자리, 4개의 중간 섹션)이 있습니다. 모서리는 테두리 이미지가 있는 요소의 모서리에 적용됩니다. 가장자리는 해당 요소의 가장자리에 적용됩니다. border-image-repeat 속성은 해당 가장자리가 공간을 채우는 방법과 border-image-width 속성은 슬라이스의 크기를 제어합니다.

마지막으로 fill 키워드는 슬라이싱으로 왼쪽 가운데 섹션을 요소의 배경 이미지로 사용할지 결정합니다.

border-image-repeat

border-image-repeat 드림 CSS에 테두리 이미지를 반복할 방법을 지정하는 방법입니다. background-repeat와 동일하게 작동합니다.

• 초깃값은 stretch입니다. 소스 이미지를 확장하여 사용 가능한 공간을 채웁니다.
• repeat 값은 소스 이미지의 가장자리를 최대한 많이 타일로 배열합니다. 이를 위해 에지 영역을 자를 수 있습니다.
• round 값은 반복과 동일합니다. 가능한 한 많이 맞추도록 이미지 가장자리 영역을 자르는 대신 이미지를 늘리고 반복하여 매끄러운 반복을 제공합니다.
• space 값은 다시 반복과 동일합니다. 하지만 이 값은 각 에지 영역 사이에 공간을 추가하여 원활한 패턴을 만듭니다.

이해도 확인

국경에 대한 지식 테스트

.my-element {
  border: solid hotpink;
}