border
: 테두리에 관련된 속성
★border : width style color
-> 한방 코드. 순서대로 입력하기(안해도 되긴하나 순서대로가 권장)
border: 10px solid red; ★1. border-width : 테두리 두께 (두께와 선은 세트)
★2. border-style : 선 종류 (기본값 1px)
- solid : 실선
- dahsed : 절취선
- dotted : 점선
- double : 이중선
- none : 없음
-> border-top-width, border-top-style 처럼 사방을 각각 다르게 스타일 줄 수 있다.
3. border-color : 16진수, rgb, rgba, 색명 다 가능
4. border-radius
- 단위 - px, %
- 테두리를 동그랗게 만듬.
- 영역은 네모 그대로임.
- (정사각형기준) 50%이상은 의미가 없다.
- 한방 코드에 포함 안 됨
- 기본적으로 html에는 원이 없다. 이걸로 만드는 거임.
- border-radius: 100px 20px; 이렇게 해도 적용됨. 적용방식은 여백할 때와 같음.
- 부모에 border-radius값주면 자식은 덮어씌여서 반영이 안된다.
-> 이럴 땐 부모에 overflow:hidden 주면 된다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
border-width: 10px;
border-top-width: 30px;
border-right-width: 20px;
border-style: solid;
border-top-style: dotted;
border-right-style: dashed;
width:200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
계속 나아가기
정말 잘 읽었습니다, 고맙습니다!