1. 비쥬얼스튜디오코드 프로그램으로 수업내용 복붙
2. 미리보기로 활용 복습
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS - 테두리 관련 스타일</title>
<style>
div {
width: 100px;
height: 100px;
border-width: 3px;
margin: 15px;
}
#border1 {
border-style: dashed;
border-top-width: 5px;
}
#border2 {
box-shadow: 7px 7px 20px 5px pink;
}
#border3 {
border-style: dotted;
border-bottom-color: greenyellow;
}
#border4 {
/* top right bottom left 순으로 각각 지정 가능 */
border-style: solid dotted double dashed;
border-width: 7px;
}
#border5 {
border-style: groove;
border-width: 15px;
}
#border6 {
border-style: ridge;
border-width: 15px;
}
#border7 {
border-style: inset;
border-width: 15px;
}
#border8 {
border-style: outset;
border-width: 15px;
}
#border9 {
border-style: solid;
/* border-radius: 50px; */
border-top-right-radius: 50px;
border-bottom-left-radius: 50px;
background-color: yellow;
}
#border10 {
border: 10px double darkmagenta;
}
#btn {
border: none;
padding: 10px;
border-radius: 10px;
}
#btn:hover {
background-color: seagreen;
color: yellow;
cursor: pointer;
}
</style>
</head>
<body>
<h1>테두리 관련 스타일 (border~)</h1>
<pre>
선택자 {
/* 테두리 스타일 */
border[-위치]-style: none | solid | dotted | dashed | doubled | groove | ridge | inset | outset;
/* 테두리 두께 */
border[-위치]-width: 값;
/* 테두리 색상 */
border[-위치]-color: 색상 정보;
/* 위의 항목들을 한번에 적용 */
border[-위치] : 두께 스타일 [색상];
/* 테두리의 모서리 부분을 둥글게 표현 */
border[-상하위치-좌우위치]-radius: 값;
/* 테두리(박스) 그림자 효과 */
box-shadow: 가로거리(x) 세로거리(y) 흐림정도 번짐정도 색상;
}
</pre>
<!-- div#border$*10 -->
<div id="border1"></div>
<div id="border2"></div>
<div id="border3"></div>
<div id="border4"></div>
<div id="border5"></div>
<div id="border6"></div>
<div id="border7"></div>
<div id="border8"></div>
<div id="border9"></div>
<div id="border10"></div>
<hr>
<button id="btn">로그인</button>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>