고정 헤더 영역
상세 컨텐츠
본문
반응형
border-style 속성 - 테두리 스타일 지정하기
- 테두리 스타일은 기본적으로 none이기 때문에 테두리 스타일을 지정하지 않으면 테두리 색상이나 두께를 지정하더라도 화면에 표시되지 않는다.
border-style: none | hidden | dashed | dotted | double | groove | inset | outest | ridge | solid
속성
- none : 테두리가 나타나지 않는다. 기본 값이다.
- hidden : 테두리가 나타나지 않는다.
- dashed : 테두리르 짧은 선(점선)으로 표시한다.
- dotted : 테두리를 점선으로 표시된다.
- double : 테두리를 이중선으로 표시한다.
- groove : 테두리를 창에 조각한 것처럼 표시한다.
- solid : 테두리를 실선으로 표시한다.
<html>
<head>
<meta charset="utf-8">
<style>
div {
width: 300px;
height: 100px;
display: inline-block;
}
.box1 { border-style: solid; }
.box2 { border-style: dotted; }
.box3 { border-style: dashed; }
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
border-width 속성 - 테두리 두께 지정하기
- 테두리를 설정 후 테두리 굵기 설정은 border-width 속성을 이용해 적용하면 된다.
border-top-width: <크기> | thin | medium | thick
border-left-width: <크기> | thin | medium | thick
border-right-width: <크기> | thin | medium | thick
border-bottom-width: <크기> | thin | medium | thick
border-width: <크기> | thin | medium | thick
종류
- border-top-width : 테두리의 위쪽 두께를 지정한다.
- border-left-width : 테두리의 왼쪽 두께를 지정한다.
- border-right-width : 테두리의 오른쪽 두께를 지정한다.
- border-bottom-width : 테두리의 아래쪽 두께를 지정한다.
- border-width : 테두리의 전체 두께를 지정한다.
<html>
<head>
<meta chartset="utf-8">
<style>
.box {
width: 300px;
height: 100px;
border-style: solid;
border-width: 2px;
}
</style>
</head>
<body>
</body>
</html>
border-color 속성 - 테두리 색상 지정하기
- 테두리의 색상은 border-color 속성을 이용해 지정하면 된다.
border-top-color: <색상>
border-left-color: <색상>
border-right-color: <색상>
border-bottom-color: <색상>
border-color: <색상>
종류
- border-top-color : 테두리의 위쪽 색상을 지정한다.
- border-left-color : 테두리의 왼쪽 색상을 지정한다.
- border-right-color : 테두리의 오른쪽 색상을 지정한다.
- border-bottom-color : 테두리의 아래쪽 색상을 지정한다.
- border-color : 테두리의 전체 색상을 지정한다.
<html>
<head>
<meta charset="utf-8">
<style>
div {
width: 100px;
height: 100px;
display: inline-block;
border-style: dotted;
}
.box1 { border-top-color: blue; }
.box2 { border-left-color: grey; }
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
border-radius 속성 - 박스 모서리 둥글게 만들기
- 사각 박스를 사용할 때도 있지만 모서리가 둥근 박스를 원하는 경우도 있다. 그래서 border-radius 속성을 이용하면 박스 모서리를 둥글게 표시할 수 있다.
border-top-left-radius: <크기> | <백분율>
border-top-right-radius: <크기> | <백분율>
border-bottom-right-radius: <크기> | <백분율>
border-bottom-left-color: <크기> | <백분율>
border-radius: <크기> | <백분율>
속성
- <크기> : 둥글게 처리할 반지름 크기를 px이나 em 같은 단위와 함께 수치로 표시한다.
- <백분율> : 현재 요소와 크기를 기준으로 둥글게 처리할 반지를 크기를 %로 지정한다.
<html>
<head>
<meta charset="utf-8">
<style>
div {
width: 100px;
height: 100px;
display: inline-block;
border-style: solid;
}
.box1 { border-radius: 10px; }
.box2 { border-top-right-radius: 10px; border-top-left-radius: 5px; }
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
반응형
'IT > HTML 및 CSS' 카테고리의 다른 글
| [CSS 기초] CSS 포지셔닝과 주요 속성들 (0) | 2021.05.01 |
|---|---|
| [CSS 기초] 여백을 조절하는 속성들 (0) | 2021.04.28 |
| [CSS 기초] CSS와 박스 모델 (0) | 2021.04.26 |
| [CSS 기초] 배경 색과 배경 이미지 (0) | 2021.04.24 |
| [CSS 기초] 목록 스타일 (0) | 2021.04.23 |
댓글 영역