윤곽선의 CSS 설정 반경

1. 윤곽선의 반경을 설정하려면 outline 속성 대신 box-shadow CSS 속성을 사용하십시오.
2. CSS의 후 선택기를 사용하여 윤곽선의 반경 설정
3. outline: auto 및 border-radius 속성을 함께 사용하여 윤곽선의 반경을 설정합니다.

이 문서에서는 border-radius 속성과 동일한 outline 속성에 대해 둥근 모서리를 설정하는 방법을 배웁니다. 여기에서는 outline 속성에 둥근 모서리를 적용하는 다양한 방법을 설명했습니다.

윤곽선의 반경을 설정하려면 outline 속성 대신 box-shadow CSS 속성을 사용하십시오.

outline 속성 대신 box-shadow CSS 속성을 사용할 수 있습니다. outline 속성과 유사하게 작동합니다.

아래 예에서 일부 텍스트를 포함하는 <div> 요소를 만들었습니다. 또한 <div> 요소에 일부 CSS를 적용했습니다.

background 속성은 <div> 요소의 배경색을 설정합니다. height 및 width CSS 속성은 각각 요소의 높이와 너비를 설정하는 데 사용됩니다.

border-radius 속성은 <div> 요소에 대해 둥근 모서리를 만들고 box-shadow는 윤곽선으로 작동하는 <div>에 그림자 효과를 적용합니다.

이러한 방식으로 box-shadow 및 border-radius 속성을 사용하여 모든 HTML 요소에 대해 둥근 윤곽선을 만들 수 있습니다.

HTML 코드:

<div>Welcome to DelftStack!</div>

CSS 코드:

div{
    background: yellow;
    height: 200px;
    width: 200px;
    border-radius: 10px;
    margin: 25px;
    padding: 20px;
    box-shadow: 0px 0px 0px 1px red inset;
}

CSS의 후 선택기를 사용하여 윤곽선의 반경 설정

사용자는 기본 outline CSS 속성 대신 ::after 선택기와 border-radius 속성을 사용하여 윤곽선을 만들 수 있습니다. border-radius 속성을 사용하여 <div> 요소의 모서리를 둥글게 만들 수 있습니다.

아래 예에서는 <p> 요소를 만들고 그 안에 일부 텍스트를 추가했습니다. <p> 요소에 CSS 스타일을 적용했습니다.

<p> 요소를 매력적으로 만들기 위해 배경, 폭, 패딩, 색상을 설정했습니다. 또한 <p> 태그에 border-radius를 설정하여 모서리를 둥글게 만들고 position을 상대적으로 설정하여 현재 위치에 따라 다른 요소를 추가했습니다.

그런 다음 ::after 선택자를 <p> 태그와 함께 사용하여 <p> 태그 뒤에 일부 콘텐츠를 추가할 수 있습니다. 여기서 <p> 요소 뒤에 빈 텍스트를 추가했습니다.

또한 빈 텍스트에 대해 border-radius 및 border를 설정했습니다.

<p> 태그의 위치에 따라 빈 텍스트의 border 위치를 설정했습니다. 그래서 위치: 절대를 사용했습니다. 테두리를 outline으로 설정하기 위해 top, bottom, left 및 right CSS 속성에 0 값을 사용했습니다. 이는 border가 윤곽선으로 작동하는 방식입니다.

여기서 position: absolute 속성을 사용하지 않고 top, bottom, left 및 right 값을 설정할 수 없습니다.

HTML 코드:

<p>Hello Programmers!</p>

CSS 코드:

p{
    background: green;
    padding: 15px;
    border-radius: 5px;
    width: 300px;
    color: white;
    position: relative;
}
 p:after{
    content: "";
    display: block;
    border-radius: 5px;
    border: 2px solid red;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

outline: auto 및 border-radius 속성을 함께 사용하여 윤곽선의 반경을 설정합니다.

outline 속성의 값으로 auto를 사용하면 둥근 모서리를 포함하여 사용자 지정 윤곽선 스타일을 표시할 수 있습니다.

이 예제에서는 HTML에서 <span> 요소를 만들고 CSS를 사용하여 스타일을 적용했습니다. outline: auto CSS 속성을 border-radius 속성과 함께 사용하여 외곽선의 둥근 모서리를 만들 수 있습니다.

HTML 코드:

<span>Here is the Outline.</span>

CSS 코드:

span{
    outline: auto blue;
    border-radius: 8px;
    background-color: red;
}

이 기사에서 주어진 방법에서 우리는 다른 CSS 속성을 사용해야 하며 기본 CSS outline 속성이 아닌 사용자 지정 윤곽선을 만들어 윤곽선의 둥근 모서리를 만들어야 합니다. 사용자 지정 개요를 변경할 수 있습니다.