8.1 border 속성
테두리는 웹 디자인에서 중요한 부분이야. 요소를 강조하고, 페이지의 시각적인 인식을 개선할 수 있어. CSS는 테두리를 만들고 스타일링하는 데 많은 속성을 제공해. 테두리의 기본 속성, 축약형과 완전한 형태의 작성법, 그리고 테두리의 너비, 스타일, 색상 및 둥근 모서리를 지정하는 속성을 알아보자.
기본 파라미터
테두리의 기본 파라미터는 개별 속성을 사용하여 설정할 수 있어: border-width, border-style 그리고 border-color.
문법:
element {
border-width: width;
border-style: style;
border-color: color;
}
사용 예시:
CSS
.border-full {
border-width: 2px;
border-style: solid;
border-color: red;
}
축약형
border 속성은 테두리의 모든 기본 파라미터 (너비, 스타일 및 색상)를 한 줄로 설정할 수 있어.
문법:
element {
border: width style color;
}
CSS
.border-compact {
border: 2px solid red;
}
.border-full {
border-width: 2px;
border-style: solid;
border-color: red;
}
HTML
<body>
<div class="border-compact">축약형</div>
<div class="border-full">완전한 작성법</div>
</body>
8.2 테두리 너비: border-width
border-width 속성은 테두리의 너비를 설정해. 값은 픽셀 (px), 포인트 (pt), 퍼센트 (%) 또는 키워드 (thin, medium, thick)로 설정할 수 있어.
문법:
element {
border-width: width;
}
예시:
CSS
.border-thin {
border: thin solid black;
}
.border-medium {
border: medium solid black;
}
.border-thick {
border: thick solid black;
}
.border-custom {
border-width: 5px;
border-style: solid;
border-color: black;
}
HTML
<body>
<div class="border-thin">얇은 테두리</div>
<div class="border-medium">중간 테두리</div>
<div class="border-thick">두꺼운 테두리</div>
<div class="border-custom">5px 너비의 테두리</div>
</body>
8.3 테두리 스타일: border-style
설명:
border-style 속성은 테두리의 스타일을 설정해. 스타일 옵션은 다음과 같아:
none: 테두리 없음solid: 실선dotted: 점선dashed: 대시선double: 이중선groove: 홈ridge: 능선inset: 안으로 들어감outset: 밖으로 나옴
문법:
element {
border-style: style;
}
예시:
CSS
.border-none {
border: 2px none black;
}
.border-solid {
border: 2px solid black;
}
.border-dotted {
border: 2px dotted black;
}
.border-dashed {
border: 2px dashed black;
}
.border-double {
border: 4px double black;
}
.border-groove {
border: 4px groove black;
}
.border-ridge {
border: 4px ridge black;
}
.border-inset {
border: 4px inset black;
}
.border-outset {
border: 4px outset black;
}
HTML
<body>
<div class="border-none">테두리 없음</div>
<div class="border-solid">실선</div>
<div class="border-dotted">점선</div>
<div class="border-dashed">대시선</div>
<div class="border-double">이중선</div>
<div class="border-groove">홈</div>
<div class="border-ridge">능선</div>
<div class="border-inset">안으로 들어감</div>
<div class="border-outset">밖으로 나옴</div>
</body>
8.4 테두리 색상: border-color
border-color 속성은 테두리의 색상을 설정해. 색상은 다양한 형식으로 지정할 수 있어: 색상명, 16진수 코드, RGB, RGBA, HSL, HSLA.
문법:
element {
border-color: color;
}
CSS
.border-red {
border: 2px solid red;
}
.border-blue {
border: 2px solid blue;
}
.border-green {
border: 2px solid green;
}
.border-rgba {
border: 2px solid rgba(255, 0, 0, 0.5);
}
HTML
<body>
<div class="border-red">빨간 테두리</div>
<div class="border-blue">파란 테두리</div>
<div class="border-green">초록 테두리</div>
<div class="border-rgba">반투명 빨간 테두리</div>
</body>
8.5 border-radius로 둥근 모서리 만들기
border-radius 속성은 요소의 모서리를 둥글게 만들어, 둥근 테두리를 만들 수 있어. 모든 네 모서리에 동시에 적용할 수도 있고, 각각의 모서리에 개별적으로 적용할 수도 있어.
문법:
element {
border-radius: radius;
}
값:
- 단일 값: 예를 들어,
border-radius: 10px;— 모든 모서리에 동일한 반경 설정 - 두 개의 값: 예를 들어,
border-radius: 10px 20px;— 첫 번째 값은 왼쪽 상단과 오른쪽 하단 모서리, 두 번째 값은 오른쪽 상단과 왼쪽 하단 모서리 - 네 개의 값: 예를 들어,
border-radius: 10px 20px 30px 40px;— 왼쪽 위, 오른쪽 위, 오른쪽 아래, 왼쪽 아래 모서리에 이미지 설정 - 혼합된 값: 반경을 퍼센트로 설정하여 요소의 크기에 맞게 둥글기를 조정할 수 있어
예시:
CSS
.radius-all {
border: 2px solid black;
border-radius: 15px;
padding: 10px;
margin: 10px;
}
.radius-top {
border: 2px solid red;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
padding: 10px;
margin: 10px;
}
.radius-bottom {
border: 2px solid blue;
border-bottom-left-radius: 25px;
border-bottom-right-radius: 25px;
padding: 10px;
margin: 10px;
}
.radius-mixed {
border: 2px solid green;
border-radius: 10px 20px 30px 40px;
padding: 10px;
margin: 10px;
}
HTML
<body>
<div class="radius-all">모든 모서리 둥글게</div>
<div class="radius-top">위쪽 모서리 둥글게</div>
<div class="radius-bottom">아래쪽 모서리 둥글게</div>
<div class="radius-mixed">혼합된 모서리 둥글게</div>
</body>
.radius-all: 모든 모서리에 동일한 반경 (15px) 적용.radius-top: 위쪽 모서리에만 둥글기 (20px) 적용.radius-bottom: 아래쪽 모서리에만 둥글기 (25px) 적용.radius-mixed: 각각의 모서리에 다른 반경 값 적용
GO TO FULL VERSION