Computer >> 컴퓨터 >  >> 프로그램 작성 >> CSS

CSS 테두리:단계별 자습서

CSS 테두리 속성은 HTML 요소. 약식 속성은 border-width , border-color 및 border-style .

웹 페이지의 요소 주위에 테두리를 추가하는 것은 웹 디자인의 중요한 기능입니다. 테두리를 사용하여 웹 페이지의 내용을 구분할 수 있으므로 사람들이 페이지에 제공된 정보를 더 쉽게 해석할 수 있습니다.

CSS 테두리 속성은 HTML 요소의 테두리를 설정하는 데 사용됩니다. border 속성은 테두리의 스타일, 색상 및 너비를 정의하는 세 가지 하위 속성의 약어입니다.

이 튜토리얼에서는 CSS 테두리 속성을 사용하는 방법과 그 하위 속성을 사용하여 HTML 요소의 테두리를 디자인하는 방법에 대해 설명합니다. 이 튜토리얼을 마치면 CSS에서 테두리를 디자인하는 데 필요한 모든 지식을 갖추게 될 것입니다.

CSS의 테두리 소개

앞에서 언급했듯이 CSS border 속성은 웹 요소 주위에 테두리를 지정하는 데 사용됩니다. 예를 들어 이미지, 상자 또는 웹 양식 주위에 테두리를 적용할 수 있습니다.

border 속성은 요소의 테두리에 특정 스타일을 적용하는 데 사용되는 세 가지 하위 속성의 약어입니다. 약식 속성은 다음과 같습니다.

  • border-width (테두리의 두께 지정)
  • border-color (테두리 색상 지정)
  • border-style (테두리 스타일 지정)

테두리를 정의할 때 border 속성을 사용하여 테두리를 지정하거나 각 하위 속성을 사용합니다. 이 기사 전체에서 두 가지 접근 방식에 대해 논의할 것입니다.

CSS 테두리 하위 속성

앞서 논의한 바와 같이 CSS에서 테두리를 정의하는 데 사용되는 세 가지 하위 속성이 있습니다. 각 하위 속성을 분석하고 작동 방식의 예를 살펴보겠습니다.

참가자의 81%는 부트캠프에 참석한 후 기술 직업 전망에 대해 더 자신감을 느꼈다고 말했습니다. 지금 부트캠프에 참여하십시오.

부트캠프 졸업생은 부트캠프 시작부터 첫 직장을 찾는 데까지 6개월도 채 걸리지 않았습니다.

border-style CSS의 속성

테두리 스타일 속성은 웹 페이지에 표시할 테두리 유형을 정의하는 데 사용됩니다. 즉, border-style 실선, 점선, 파선 등 웹 페이지에서 경계선이 어떻게 보이는지 결정합니다.

border-style에 할당할 수 있는 값은 10가지입니다. 재산. 다음은 각 스타일에 대한 설명과 함께 상자에 적용했을 때 이러한 각 스타일이 어떻게 나타나는지 보여줍니다.

CSS 테두리:단계별 자습서

이러한 웹 요소를 만드는 데 사용한 CSS 코드는 다음과 같습니다. 

.box { border-style: solid; }
.box { border-style: dotted; }
.box { border-style: dashed; }
.box { border-style: double; }
.box { border-style: ridge; }
.box { border-style: groove; }
.box { border-style: inset; }
.box { border-style: outset; }
.box { border-style: none; }
.box { border-style: hidden; }

보시다시피 코드에서 각 잠재적 값을 사용하여 테두리 스타일을 지정했습니다.

border-width CSS의 속성

border-width 속성은 CSS 테두리의 너비를 설정합니다. 테두리 너비는 CSS 길이 값(pt , px , em 등) 또는 세 가지 사용자 정의 border-width 중 하나를 사용하여 값:thin , medium , 및 thick .

5px를 만들고 싶다고 가정해 봅시다. 상자 주위의 단단한 테두리. 다음 코드를 사용하여 그렇게 할 수 있습니다.

<style>
  .box {
	border-style: solid;
	border-width: 5px;
  }
</style>

<html>
  <p class="box">5px thick solid border</p>
</html>

CSS 테두리:단계별 자습서 위의 코드 편집기에서 버튼을 눌러 코드 출력을 확인하세요.

단색 스타일을 사용하고 두께가 5px인 테두리를 만들었습니다.

border-color CSS의 속성

예상대로 color 속성은 색상을 지정합니다. border-color 속성은 CSS에서 테두리의 색상을 설정하는 데 사용됩니다. border-color에서 허용하는 색상 값 속성:

  • 이름(blue과 같은 색상 이름) )
  • HEX(#000와 같은 16진수 색상 값) )
  • HSL(hsl(10, 100%, 25%) )
  • RGB(rgb(102, 222, 95) )
  • transparent

너비가 5px인 파란색 점선 테두리가 있는 상자를 만들고 싶다고 가정합니다. 다음 코드를 사용하여 수행할 수 있습니다.

<style>
  .box {
    border-style: dotted;
	border-width: 5px;
	border-color: blue;
  }
</style>

<html>
  <p class="box">5px thick blue dotted border</p>
</html>

CSS 테두리:단계별 자습서 위의 코드 편집기에서 버튼을 눌러 코드 출력을 확인하세요.

하위 속성 다중 값

CSS border의 각 하위 속성 속성은 여러 값을 허용할 수 있습니다. 이를 통해 CSS에서 요소의 각 가장자리에 대해 사용자 정의 테두리를 설정할 수 있습니다.

CSS에서 요소의 각 가장자리에 대해 사용자 정의 테두리를 설정하려는 경우 염두에 두어야 할 규칙은 다음과 같습니다.

  • 하나의 값을 지정하면 테두리 스타일이 모든 가장자리에 적용됩니다.
  • 두 개의 값을 지정하면 다음 순서가 사용됩니다.
    • 위쪽과 아래쪽, 왼쪽과 오른쪽
  • 3개의 값을 지정하면 다음 순서가 사용됩니다.
    • 위쪽, 오른쪽 및 왼쪽, 아래쪽
  • 4개의 값을 지정하면 다음 순서가 사용됩니다.
    • 위쪽, 오른쪽, 아래쪽, 왼쪽

솔리드 상단과 하단이 있고 왼쪽과 오른쪽에 점선이 있는 테두리를 만들고 싶다고 가정합니다. 다음 코드를 사용하여 이 작업을 수행할 수 있습니다.

<style>
  .box { border-style: solid dashed; }
</style>

<html>
  <p class="box">solid top and dashed sides border</p>
</html>

CSS 테두리:단계별 자습서 위의 코드 편집기에서 버튼을 눌러 코드 출력을 확인하세요.

코드에서 두 가지 테두리 스타일을 지정하여 조합 테두리를 만들었습니다. 이 요소는 왼쪽과 오른쪽 가장자리에 파선 테두리 스타일을 사용하고 요소의 위쪽과 아래쪽에 단색 스타일을 사용합니다.

테두리 색상이나 너비를 변경하려는 경우에도 동일한 접근 방식을 사용합니다.

CSS 테두리 속기

테두리를 정의하는 데 사용할 수 있는 세 가지 CSS 하위 속성이 있습니다.

위의 예에서 우리는 이러한 각 하위 속성을 개별적으로 사용하는 방법에 대해 논의했습니다. 그러나 단일 속성에 모든 테두리 하위 속성을 지정할 수 있습니다. 이렇게 하면 코드를 줄일 수 있습니다.

border 속성은 다음 구조를 사용하여 CSS 테두리를 정의합니다.

  • border-width (선택 사항)
  • border-style (필수)
  • border-color (선택 사항)

텍스트 줄 주위에 5px의 단색 분홍색 테두리를 만들고 싶다고 가정합니다. 다음 코드를 사용하여 그렇게 할 수 있습니다.

<style>
  .box { border: 5px solid pink };
</style>

<html>
  <p class="box">5px solid pink border</p>
</html>

클릭 CSS 테두리:단계별 자습서 위의 코드 편집기에서 버튼을 눌러 HTML/CSS 코드의 출력을 확인하세요.

코드에서 세 줄과 각각의 개별 테두리 하위 속성을 사용하는 대신 한 줄에 테두리를 정의할 수 있음을 알 수 있습니다.

CSS 개별 테두리

테두리 하위 속성 및 속성은 웹 요소의 개별 측면에도 적용할 수 있습니다. 웹 요소의 특정 테두리 모양을 설정하려면 다음 속성을 사용할 수 있습니다.

  • border-left-[property]
  • border-right-[property]
  • border-top-[property]
  • border-bottom-[property]

속성 값은 다음 중 하나일 수 있습니다.

  • style (테두리 스타일 설정)
  • color (테두리 색상 설정)
  • width (테두리의 두께를 설정하기 위해)
  • 공백 (테두리를 정의하기 위해 테두리 약어 사용)

속성과 값은 사용하고 기억하기 쉽지만 가능한 모든 하위 속성-값 조합의 목록은 다음과 같습니다.

  • 테두리 왼쪽 스타일
  • 테두리 왼쪽 색상
  • 테두리 왼쪽 너비
  • 테두리 오른쪽 스타일
  • 테두리 오른쪽 색상
  • 테두리 오른쪽 너비
  • 보더 탑 스타일
  • 테두리 상단 색상
  • 테두리 상단 너비
  • 테두리 하단 스타일
  • 테두리 하단 색상
  • 테두리 하단 너비

왼쪽에 너비가 2px인 실선 테두리와 너비가 5px인 상단에 점선 테두리가 있는 텍스트 상자를 만들고 싶다고 가정합니다. 다음 코드를 사용하여 이 작업을 수행할 수 있습니다.

<style>
  .box {
	border-left: 2px solid;
	border-top: 5px dotted;
  }
</style>

<html>
  <p class="box">mixed border</p>
</html>

상자의 왼쪽에는 2px 실선 테두리가 있고 위쪽에는 5pc 점선 테두리가 있습니다. 개별 테두리 속성을 사용하여 상자의 각 가장자리에 테두리가 표시되는 방식을 지정할 수 있었습니다.

결론

border 속성은 CSS에서 테두리를 만드는 데 사용되며 스타일, 색상 및 너비의 세 가지 하위 속성이 있어 테두리의 각 부분을 개별적으로 사용자 정의하는 데 사용됩니다.

이 자습서에서는 몇 가지 예를 들어 border 속성과 세 가지 하위 속성을 모두 사용하여 CSS에서 테두리를 만드는 방법에 대해 설명했습니다. 또한 개별 테두리 속성을 사용하여 요소의 각 면에 스타일을 지정하는 방법도 살펴보았습니다.

CSS 테두리에 대해 자세히 알아보려면 테두리 이미지, 테두리 축소, 외곽선 및 외곽선 오프셋, 둥근 모서리의 테두리 반경, 미적으로 아름다운 상자 그림자 효과를 구현하는 방법을 설명하는 다른 자습서를 참조하세요!