CSS에는 테두리와 아웃라인이라는 두 가지 테두리 유형이 있습니다. 테두리는 항상 직사각형 프레임을 특징짓는 반면, CSS2에 도입된 아웃라인 프레임은 직사각형이 아닌 영역을 위한 것입니다. 그리고 또 다른 차이점이 있습니다: 아웃라인을 사용하면 테두리가 프레임 외부에서 발생하므로 요소에 테두리가 있는 프레임과 아웃라인이 있는 테두리를 모두 지정할 수 있습니다.
이 튜토리얼에 제시된 테두리 정의는 자체 단락을 구성하는 요소에 특히 흥미롭습니다. 그러나 원칙적으로 다른 요소에도 물론 적용할 수 있습니다.
테두리 정의하기
테두리를 사용하여 요소 주변의 전체 테두리 모양을 정의할 수 있습니다.
일반적인 테두리 속성은 다음 값을 요약한 것으로, 아래에서 자세히 설명합니다:
- border-color
- 테두리 스타일
- 테두리 너비
개별 속성의 값은 공백으로 서로 구분됩니다. 속성을 지정하는 순서는 중요하지 않습니다. 테두리에는 개별 요소 페이지의 테두리 색상, 테두리 두께 및 테두리 유형을 지정하는 데 사용할 수 있는 네 가지 하위 속성도 있습니다.
- border-top - 상단 테두리
- border-right - 오른쪽 테두리
- 테두리-하단 - 테두리 하단
- 테두리 왼쪽 - 테두리 왼쪽
다음 예는 테두리 사용을 보여줍니다. 이 정의는 3포인트 너비의 검은색 단색 테두리를 만듭니다.
<p style="border:3pt solid #000000;"> Welcome </p>
브라우저의 결과입니다:
테두리 색상
테두리 색상은 테두리 색상을 통해 결정됩니다. 허용되는 값은 다음과 같습니다:
- 투명 - 투명한 테두리
- 색상 값
값을 하나만 지정하면 모든 프레임 페이지에 적용됩니다. 개별 페이지에 대해 서로 다른 색상을 정의하려면 여러 값을 공백으로 구분하여 입력합니다.
- 두 개의 값 - 첫 번째 값은 상단과 하단에, 두 번째 값은 왼쪽과 오른쪽 프레임 색상에 지정합니다.
- 세 값 - 첫 번째 값은 상단, 두 번째 값은 왼쪽 및 오른쪽, 세 번째 값은 하단 프레임 색상을 입력합니다.
- 네 가지 값 - 첫 번째 값은 위쪽, 두 번째 값은 오른쪽, 세 번째 값은 아래쪽, 네 번째 값은 왼쪽 테두리 색상입니다.
다음과 같은 테두리 하위 프로퍼티도 사용할 수 있습니다:
- border-top-color - 상단 테두리 색상
- border-right-color - 오른쪽 테두리 색상
- 테두리-하단 색상 - 하단의 테두리 색상
- 테두리-왼쪽 색상 - 왼쪽 테두리 색상
예시입니다:
<p style="테두리색: #ffff00; 테두리 너비: 3px; 테두리 스타일: 솔리드; 패딩: 2px"> PSD-Tutorials.de </p>
다음은 브라우저의 결과입니다:
선 스타일
프레임의 선 스타일은 테두리 스타일을 통해 정의할 수 있습니다.
아래에서 사용 가능한 테두리 변형 목록을 확인할 수 있습니다:
- 없음 - 보이지 않는 테두리
- 점선 - 점선
- 파선 - 파선
- 단색 - 단색
- 이중 - 이중 솔리드
- 홈 - 3D 선
- 능선 - 3D 선
- 삽입 - 3D 선
- 아웃셋 - 3D 선
다음은 프레임 유형이 어떻게 보이는지 보여주는 예시입니다.
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>PSD-Tutorials.de</title> <style> p.none {border-style:none;} p.dotted {border-style:dotted;} p..dashed {border-style:dashed;} p.solid {border-style:solid;} p.double {border-style:double;} p.groove {border-style:groove;} p.ridge {border-style:ridge;} p.inset {border-style:inset;} p.outset {border-style:outset;} p.hidden {border-style:hidden;} </style> </head> <body> <p class="none">없음</p> <p class="점선">점선</p> <p class="점선">점선</p> <p class="solid">솔리드</p> <p class="double">더블double</p> <p class="groove">그루브</p> <p class="ridge">리지</p> <p class="inset">inset</p> <p class="outset">아웃셋</p> <p class="hidden">숨겨짐</p> </body> </html>브라우저에 표시되는 결과입니다:
값을 하나만 지정하면 프레임의 모든 페이지에 적용됩니다. 개별 페이지에 대한 프레임 유형을 정의하기 위해 여러 값을 공백으로 구분하여 지정합니다.
- 두 개의 값 - 첫 번째 값은 상단과 하단에, 두 번째 값은 왼쪽과 오른쪽 프레임 유형에 사용됩니다.
- 세 값 - 상단 프레임 유형에 대한 첫 번째 값, 왼쪽 및 오른쪽 프레임 유형에 대한 두 번째 값, 하단 프레임 유형에 대한 세 번째 값.
- 네 개의 값 - 첫 번째 값은 상단, 두 번째 값은 오른쪽, 세 번째 값은 하단, 네 번째 값은 왼쪽 테두리 유형입니다.
다음 테두리 하위 속성도 사용할 수 있습니다:
- border-top-style - 상단 테두리 스타일
- border-right-style - 오른쪽 테두리 스타일
- 테두리-하단 스타일 - 하단 테두리 스타일
- 테두리-왼쪽 스타일 - 왼쪽 테두리 유형
다음은 또 다른 예시입니다:
<p style="border-bottom-style: dashed;"> 파선 테두리 </p>
브라우저에서 이렇게 표시됩니다:
테두리 너비 설정
테두리의 너비는 테두리 너비에 의해 결정됩니다.
- 길이 사양
- 얇은 - 얇은 프레임
- 중간 - 중간 두께 프레임
- 두꺼운 - 두꺼운 테두리
하나의 값만 지정하면 요소의 모든 페이지에 적용됩니다. 개별 페이지에 대해 서로 다른 프레임 두께를 지정하는 데는 두 가지 옵션이 있습니다. 첫 번째 옵션에서는 공백으로 구분된 여러 값이 표시됩니다.
- 두 개의 값 - 첫 번째 값은 위쪽과 아래쪽, 두 번째 값은 왼쪽과 오른쪽 프레임 너비에 대한 값입니다.
- 세 개의 값 - 첫 번째 값은 상단, 두 번째 값은 왼쪽 및 오른쪽, 세 번째 값은 하단 프레임 너비입니다.
- 네 개의 값 - 첫 번째 값은 상단, 두 번째 값은 오른쪽, 세 번째 값은 하단, 네 번째 값은 왼쪽 프레임 너비입니다.
다음 테두리 하위 속성을 사용할 수도 있습니다:
- border-top-width - 상단의 테두리 두께
- 테두리 오른쪽 너비 - 오른쪽의 테두리 두께
- 테두리-하단 너비 - 하단의 테두리 두께
- 테두리-왼쪽 너비 - 왼쪽 테두리 두께
예시입니다:
<p style="border-width:2px;border-style: 점선;"> Welcome </p>
아웃라인의 테두리 색상
테두리 색상은 outline-color 속성을 통해 정의됩니다. 이 사양은 테두리 색상과 동일합니다.
- 반전 - 색상이 반전됩니다. 이 색상은 16진수 색상 값의 모든 비트를 반전하여 생성됩니다.
- 색상 사양
예시입니다:
<p style="윤곽선 너비: 중간; 윤곽선 스타일: 단색; 윤곽선 색상: 파란색;"> PSD-Tutorials.de </p>
브라우저에서 보이는 모습입니다:
아웃라인의 프레임 유형
아웃라인 스타일 사양은 아웃라인의 유형을 결정합니다. 테두리 스타일과 동일한 값을 사용할 수 있습니다.
- none - 보이지 않는 테두리
- 점선 - 점선
- 파선 - 파선
- solid - 단색
- 이중 - 이중 솔리드
- 홈 - 3D 선
- 능선 - 3D 선
- 삽입 - 3D 선
- 아웃셋 - 3D 선
예시입니다:
<p style="아웃라인 스타일:솔리드;아웃라인 너비:2px; 아웃라인 색상:빨간색;"> PSD-Tutorials.de </p>
윤곽선의 프레임 두께
윤곽선 너비 사양은 테두리 너비와 동일합니다. 이는 테두리 두께도 정의합니다. 눈에 보이는 테두리 선을 만들려면 항상 윤곽선 너비와 윤곽선 스타일을 결합하세요.
- 중간 - 중간 두께 테두리
- thin - 얇은 프레임
- 두꺼운 - 두꺼운 프레임
- 길이 사양 - 프레임 두께를 결정합니다.
예시입니다:
<p style="아웃라인 너비: 얇게;아웃라인 스타일: 단색; 아웃라인 색상: 빨간색;"> 환영 </p>
테두리와 마찬가지로 윤곽선 프레임에 대한 일반 속성도 있습니다.
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>PSD-Tutorials.de</title> <style> p { 테두리:빨간색 실선 굵기; 윤곽선:녹색 점선 굵기; } </style> </head> <body> <p>Welcome to PSD-Tutorials.de!</p> </body> </html>
그러면 다음과 같은 속성이 요약됩니다.
- outline-width
- outline-style
- outline-colour
여기서 원리는 일반적인 테두리 속성과 동일합니다.
