-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathborder-bottom.html
More file actions
25 lines (24 loc) · 1.12 KB
/
Copy pathborder-bottom.html
File metadata and controls
25 lines (24 loc) · 1.12 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html> <!-- HTML5 문서 선언 -->
<html lang="ko"> <!-- 문서 언어를 한국어로 지정 -->
<head> <!-- 문서 메타정보 영역 -->
<meta charset="utf-8"> <!-- 문자 인코딩 UTF-8 설정 -->
<title>border-bottom - 요소의 아래쪽 테두리를 설정하는 단축 속성</title> <!-- 브라우저 탭 제목 -->
<!--
[박스 모델] border-bottom
설명: 요소의 아래쪽 테두리를 설정하는 단축 속성
구문: border-bottom: <line-width> || <line-style> || <color>
팁: 밑줄 효과에 자주 활용. text-decoration: underline 대신 border-bottom으로 세밀 제어 가능.
-->
<style>
/* .box: 아래쪽 테두리 단축 시연 박스 */
.box {
border-bottom: 3px solid #3b82f6; /* 아래쪽 테두리 단축. 두께 3px, 실선(solid), 파란색(#3b82f6). 순서: width style color */
padding: 16px; /* 박스 내부 사방 16px 여백 */
background: #f8fafc; /* 배경색 매우 옅은 회색(#f8fafc) */
}
</style>
</head>
<body>
<div class="box">border-bottom</div> <!-- 아래쪽 테두리 단축이 적용된 박스 -->
</body>
</html>