border 속성
- border 속성은 태그의 테두리를 설정하는 속성
- background 속성과 비슷하게 세부적인 속성들을 한번에 쓸 수 있는 속성
- width - style - color의 순서로 사용
형식
border: width style color;
/* 두께, 스타일, 색상 순으로 작성한다 */
개별적으로도 사용 가능 속성
* border-width
테두리 선의 두께
* border-style
테두리 선의 종류
* border-color
테두리 선의 색상
border-style(테두리 선의 종류) 속성
* none : 테두리 선 없음
* hidden : 테두리 선 없음
none은 테두리가 없다는 것이고, hidden은 테두리를 숨긴다는 뜻이다. 두 가지 모두 테두리가 나타나지 않는다.
* solid : 실선, 단선(일반선)
* dotted : 점선
* dashed : 파선
* double : 이중선
* groove : 홈이 파여있는 선
* ridge : 솟은 모양의 선(groove 반대)
* inset : 요소 전체가 들어간 선
* outset : 요소 전체가 나온 선
border-radius 속성
- border-radius는 테두리를 둥글게 만드는 속성
- CSS3에서 정의되었으며, IE는 버전 9부터 지원
- 8개의 속성 값을 넣어야 하지만, 값이 같다면 짧게 쓸 수 있음
- px 단위와 % 단위를 사용할 수 있으며, border 속성 없이도 사용할 수 있음
border-radius: : 길이값 / 길이값;- 길이값은 top-left, top-right, bottom-right, bottom-left 순임. (상단 왼쪽부터 시작하여 시계방향으로 돌아감)
- 슬래시 앞이 수평 반지름, 슬래시 뒤가 수직 반지름이며 슬래시가 없을 경우, 수평, 수직이 동일하게 적용됨
예)
border-radius: 5px;위 코드는 아래와 같음
border-top-left-radius:5px;
border-top-right-radius:5px;
border-bottom-right-radius:5px;
border-bottom-left-radius:5px;
border-radius: 40px 10px;위 코드는 다음과 같음
border-top-left-radius:40px;
border-bottom-right-radius:40px;
border-top-right-radius:10px;
border-bottom-left-radius:10px;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.box {
width: 500px;
height: 300px;
border: 5px solid blue; /* 두께 5px, 실선, 파란색상 속성 적용 */
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
border-style(테두리 선의 종류) 적용 예제)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.text {
background-color: yellow;
width: 40%;
height: 70px;
margin: 10% 0 0 10%;
border-style: dashed;
border-width: 0.3em;
border-color: red;
padding: 20px; /*글자와 테두리 사이의 여백*/
}
</style>
</head>
<body>
<div class="text" align="center">
*[5월] 주말 특강(무료교육) 안내<br>
*[웹퍼블리셔] 웹퍼블리셔 관련 무료 교육 : 2021/05/10(토)<br>
*[무료교육안내] 교육센터 :
</div>
</body>
</html>
'Front-End > CSS' 카테고리의 다른 글
| [CSS] float 속성 (0) | 2021.10.31 |
|---|---|
| [CSS] shadow 속성 (text-shadow, box-shadow) (0) | 2021.10.31 |
| [CSS] margin, padding (CSS에서의 여백) (0) | 2021.10.29 |
| [CSS] display 속성 (0) | 2021.10.28 |
| [CSS] 폰트 지정 (0) | 2021.10.27 |
댓글