테두리 스타일, 너비와 색상
단축형 및 개별 속성을 사용해 다양한 스타일, 너비, 색상의 테두리를 적용합니다.
테두리 스타일, 너비와 색상은(는) CoddyKit의 무료 CSS Academy 강의입니다. 이것은 4개 중 2번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 CSS Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. CSS Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
테두리 단축 속성
border 단축 속성은 네 면의 너비, 스타일 및 색상을 한 번에 설정합니다.
<div class="box">Solid border box</div>
<div class="warning">Dashed warning box</div>
테두리 스타일 값
테두리가 표시되려면 border-style을 설정해야 합니다. 사용할 수 있는 값은 다음과 같습니다:
solid— 연속된 선dashed— 긴 대시 선dotted— 둥근 점double— 평행한 두 선groove/ridge/inset/outset— 3D 효과none— 테두리 없음(기본값)
테두리 너비
border-width에는 모든 길이 단위나 thin, medium, thick 키워드를 사용할 수 있습니다. 정확하게 지정하려면 숫자를 사용하십시오.
<div class="thin-border">Thin</div>
<div class="medium-border">Medium</div>
<div class="thick-border">Thick</div>
테두리 색상
border-color에는 투명도를 위한 RGBA를 포함하여 모든 CSS 색상 값을 사용할 수 있습니다. currentColor는 텍스트 색상을 상속합니다.
<div class="card">Card with translucent border</div>
<button class="icon-btn">Icon Button</button>
개별 면 테두리
개별 속성을 사용하여 특정 면에 테두리를 설정하십시오:
<div class="bottom-only">Bottom border only</div>
<div class="left-accent">Accent quote</div>
테두리 모서리 둥글기
border-radius는 요소의 모서리를 둥글게 만듭니다. 모든 모서리를 동일하게 둥글게 하려면 하나의 값을 사용하고, 모서리별로 제어하려면 최대 네 개의 값을 사용하십시오.
<div class="card">Card</div>
<div class="pill">Pill</div>
<div class="circle">●</div>
<div class="custom">Custom</div>
타원형 테두리 모서리 둥글기
각 모서리의 둥글기는 /로 구분된 두 값을 사용하여 비대칭 타원형으로 설정할 수 있습니다:
<div class="leaf"></div>
테두리 이미지
border-image는 테두리를 잘라낸 이미지나 그라데이션으로 바꾸어 장식용 테두리를 만들 수 있게 합니다:
<div class="fancy">Gradient border image</div>
외곽선과 테두리 비교
outline은 테두리 바깥에 선을 그립니다. 테두리와 달리 레이아웃이나 요소의 크기에 영향을 주지 않습니다. 키보드 포커스 표시기로 자주 사용합니다.
<button class="focus-demo">Focused Button (demo)</button>
외곽선 제거: 신중하게 사용
대신 눈에 보이는 포커스 표시기를 제공하지 않고 :focus 외곽선을 제거하지 마십시오. 포커스 스타일을 제거하면 키보드 및 스크린 리더 사용자가 불편을 겪습니다.
<button>Button without outline</button>
<a href="#">Link without outline</a>
표에서의 테두리 상쇄
HTML 표에서는 border-collapse: collapse가 인접한 셀 테두리를 하나의 선으로 합쳐 더 깔끔하게 표시합니다.
<table>
<tr><th>Name</th><th>Age</th></tr>
<tr><td>Alice</td><td>30</td></tr>
</table>
빠른 확인
요소의 레이아웃에 영향을 주지 않고 테두리 바깥에 선을 그리는 CSS 속성은 무엇입니까?
복습
border 단축 속성은 너비, 스타일 및 색상을 설정합니다. border-radius는 모서리를 둥글게 만듭니다. outline은 테두리와 별개이며 레이아웃에 영향을 주지 않고 키보드 접근성을 위한 포커스 표시기에 중요합니다.
자주 묻는 질문
“테두리 스타일, 너비와 색상” 강의는 무료인가요?
네 — “테두리 스타일, 너비와 색상” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 CSS Academy 강의 전체를 잠금 해제할 수 있습니다. CSS Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“테두리 스타일, 너비와 색상”에서 뭘 배우나요?
단축형 및 개별 속성을 사용해 다양한 스타일, 너비, 색상의 테두리를 적용합니다. 브라우저에서 직접 실행하는 실습 코드로 CSS Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
CSS Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 CSS Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 2번째 강의입니다.
“테두리 스타일, 너비와 색상” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 CSS Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 CSS Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.