[속성] border 외 속성
학습일 : 2022. 09. 07
border 속성
요소의 테두리를 그리기 위해 사용한다.
테두리는 크기에 영향을 미친다.
용법
... {
border: [none | [[크기 : ?px|?rem|...] [모양 : *x] [색상]]];
}none 값을 주게 되면 테두리가 없어진다.
*x
- dotted : 원형 점선
- dashed : 직사각형 점선
- solid : 실선
- double : 이중 실선
- 기타 : https://developer.mozilla.org/ko/docs/Web/CSS/border-style
border-top 속성
상단 테두리를 그리기 위해 사용한다. 용법은 border와 같다.
border-right 속성
우측 테두리를 그리기 위해 사용한다. 용법은 border와 같다.
border-bottom 속성
하단 테두리를 그리기 위해 사용한다. 용법은 border와 같다.
border-left 속성
좌측 테두리를 그리기 위해 사용한다. 용법은 border와 같다.
border-radius 속성
요소의 각 꼭지점을 둥글게할 반지름을 지정한다.
용법
... {
border-radius: [?px|?rem|?%|...];
}
- 좌상, 우상, 우하, 좌하측 꼭지점을 둥글게할 반지름을 설정한다.
- 퍼센트(%) 값은 해당 요소 크기에 대한 비율로, width와 height가 같은 요소에 대해 해당 값을 50%로 지정할 경우
정원(正圓)을 만들 수 있다.
- 해당 값을 터무니 없이 크게 지정하면 소시지 모양을 만들 수 있음.
border-top-left-radius 속성
좌측 상단 꼭지점을 둥글게할 반지름을 설정한다. 용법은 border-radius와 동일하다.
border-top-right-radius 속성
우측 상단 꼭지점을 둥글게할 반지름을 설정한다. 용법은 border-radius와 동일하다.
border-bottom-left-radius 속성
좌측 하단 꼭지점을 둥글게할 반지름을 설정한다. 용법은 border-radius와 동일하다.
border-bottom-right-radius 속성
우측 하단 꼭지점을 둥글게할 반지름을 설정한다. 용법은 border-radius와 동일하다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>border 속성</title>
<style>
.box {
background-color: rgb(50, 100, 200);
border: 0.0625rem solid rgb(25, 50, 100);❤
border-radius: 0.5rem;❤
color: rgb(255, 255, 255);
display: inline-block;
padding: 0.5rem 1rem;
}
.round {
width: 15rem;
height: 15rem;
background-color: rgb(100, 200, 100);
border-radius: 50%;❤
}
.button {
background-color: black;
border-radius: 1000rem;❤
color: white;
display: inline-block;
padding: 0.75rem 1.25rem;
}
</style>
</head>
<body>
<div class="box">ㅋㅋ</div>
<br>
<div class="round"></div>
<br>
<div class="button">버튼임</div>
<br>
<br>
<br>
<br>
</body>
</html>===========실행결과=============
