반응형
테두리(Border)
요소의 테두리 선을 표현하는 스타일 설정
★ border-style : 테두리 종류(선의 모양)
★ border-width : 테두리 두께
- 단위 : px(pixel) = 1인치의 1/96
- pt(point) = 1인치의 1/72
- cm = 센티미터
- em = 출판에서 사용하는 문자의 가로 길이(M 문자)
- 고정값 : thin(얇은), medium(중간), thick(두꺼운)
★ border-color : 테두리 색상
★ border-radius : 둥근모서리 설정
★ border : 위의 개별 속성을 하나로 처리하기 위한 단축 속성
- 두께, 종류, 색상을 하나로 같이 표현
- 순서) 두께 > 종류(필수) > 색상
- 한 방향에 같은 두께, 종류, 색상을 지정할 경우
border-top, border-right, border-bottom, border-left를 사용.
★ 방향에 따른 설정 : style, width, color, radius는 모두 방향에 따라 다르게 설정이 가능
style, width, color는 방향에 따라 속성이 따로 존재
예) border-top-style
※ [참고] 방향
- 좌(left), 우(right), 위(top), 아래(bottom)
- 일반적인 순서(시계 방향)
- top > right > bottom > left
boder.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>테두리(경계선)</title>
<style type="text/css">
div {
width: 200px;
background-color: yellow;
border-width: 5px;
text-align: center;
}
#d0 {
border-style: solid;
border-width: medium thin thick 7px;
}
#d1 {
border-style: dotted;
}
#d2 {
border-style: dashed;
}
#d3 {
border-style: double;
}
#d4 {
border-style: groove;
}
#d5 {
border-style: ridge;
}
#d6 {
border-style: inset;
}
#d7 {
border-style: outset;
}
#d8 {
border-style: none;
}
#d9 {
border-style: hidden;
}
#d10 {/* border-style: dotted solid double;
◆ top: dotted ◆ left, right: solid ◆ bottom: double */
border-style: dotted solid double none;
}
#d11 {
border-style: solid;
border-color: #FFE08C blue green;
}
#d12 {
border: 2px dashed hotpink;
}
#d13 {
height: 30px;
border: 5px solid red;
border-radius: 5px;
/* 왼쪽상단 - 오른쪽산단 - 오른쪽하단 - 왼쪽하단 순
3개를 작성할 경우 : 왼쪽상단 (오른쪽상단,왼쪽하단) 오른쪽하단
2개를 작성할 경우 : (왼쪽상단, 오른쪽하단) (오른쪽상단, 왼쪽하단) */
box-sizing: border-box;
}
</style>
</head>
<body>
<p><div id="d0">실선(solid)</div></p>
<p><div id="d1">점선(dotted)</div></p>
<p><div id="d2">파선(dashed)</div></p>
<p><div id="d3">이중선(double)</div></p>
<p><div id="d4">음각선(groove)</div></p>
<p><div id="d5">양각선(ridge)</div></p>
<p><div id="d6">내막선(inset)</div></p>
<p><div id="d7">외막선(outset)</div></p>
<p><div id="d8">선없음(none)</div></p>
<p><div id="d9">선숨김(hidden)</div></p>
<p><div id="d10">통합(mixed)</div></p>
<p><div id="d11">테두리 색상</div></p>
<p><div id="d12">단축 설정</div></p>
<p><div id="d13">둥근 모서리</div></p>
</body>
</html>반응형
'Front-end > Css' 카테고리의 다른 글
| [CSS] 높이, 너비 사이즈 (0) | 2023.07.07 |
|---|---|
| [CSS] 여백(margin, padding) (0) | 2023.07.06 |
| [CSS] 배경 (0) | 2023.07.06 |
| [CSS] 색상표현 (0) | 2023.07.06 |
| CSS 가상 선택자4(::first-line, ::first-letter, ::before, ::after) (0) | 2023.05.16 |
