더보기
CSS의 테두리 관련 스타일에 대해 알아보자
<border ~ 로 시작하는 코드>
✔️ 요소의 테두리 영역 (border)의 스타일을 지정할 때 쓰임
테두리 두께, 테두리 색상, 선의 모양, 각진 정도, ...
[ 표현법 ]
선택자 {
* 테두리 스타일
border-위치-style : none/dotted/dashed/solid/double/groove/inset/outset;
* 테두리 두께
dorder-width : 테두리두께;
* 테두리 색상
border-color : 색상;
* 테두리 두께, 스타일, 색상을 한 번에 지정 가능
border-위치 : 두께 스타일 색상; => 색상은 생략 가능, 색상 생략 시 글자색과 통일됨
* 테두리 모서리를 둥그스름하게
border-위/아래-좌/우-radius : 숫자값px; => 위치값 생략 시 네 모서리가 둥그스름해짐
* 박스에 그림자 효과
box-shadow : 가로거리(x) 세로거리(y) 흐림정도 번짐정도 색상;
}
👉🏻 위치는 위/아래/좌/우 (top/bottom/left/right) 지정 가능하고 생략 또한 가능함
실습을 위한 기본 설정
<style>
div {
width : 100px;
height : 100px;
border-width : 3px;
margin : 15px;
/* border-color : black; test4 groove가 이 속성 때문에 먹히지 않은 것처럼 보이므로 주석 처리 */
border-style : solid; /* 기본값 none 이므로 지정하지 않으면 눈에 보이지 않음 */
}
</style>
<body>
<!-- div#test$*10 + Enter -->
<div id="test1"></div>
<div id="test2"></div>
<div id="test3"></div>
<div id="test4"></div>
<div id="test5"></div>
<div id="test6"></div>
<div id="test7"></div>
<div id="test8"></div>
<div id="test9"></div>
<div id="test10"></div>
<botton id="btn">로그인</botton>
</body>
<test1>
<style>
div {
width : 100px;
height : 100px;
border-width : 3px;
margin : 15px;
border-color : black;
border-style : solid; /* 기본값 none 이므로 지정하지 않으면 눈에 보이지 않음 */
}
#test1 {
border-style : dotted; /* 테두리 선 모양: 점선 */
border-width : 10px; /* 테두리 선의 두께 */
border-color : green;
border-top-style : double; /* 테두리 선 모양: 이중선 */
border-right-color : red;
border-bottom-width : 1px;
}
</style><test2>
<style>
div {
width : 100px;
height : 100px;
border-width : 3px;
margin : 15px;
border-color : black;
border-style : solid; /* 기본값 none 이므로 지정하지 않으면 눈에 보이지 않음 */
}
#test2 {
border : 10px dotted green; /* 점선 두께 10px, 색상 그린 */
border-left-style : solid;
border-top : 5px dashed red; /* dashed: 절취선 */
}
</style><test3>
<style>
div {
width : 100px;
height : 100px;
border-width : 3px;
margin : 15px;
border-color : black;
border-style : solid; /* 기본값 none 이므로 지정하지 않으면 눈에 보이지 않음 */
}
#test3 {
border-style : dashed double solid dotted; /* 위, 오른쪽, 아래, 왼쪽 순서*/
}
</style><test4>
<style>
div {
width : 100px;
height : 100px;
border-width : 3px;
margin : 15px;
/* border-color : black; test4 groove가 이 속성 때문에 먹히지 않은 것처럼 보이므로 주석 처리 */
border-style : solid; /* 기본값 none 이므로 지정하지 않으면 눈에 보이지 않음 */
}
#test4 {
border-style : groove; /* 패인 액자 틀 느낌 */
border-width : 10px;
border-bottom-right-radius : 50px;
}
</style><test5>
<style>
div {
width : 100px;
height : 100px;
border-width : 3px;
margin : 15px;
/* border-color : black; test4 groove가 이 속성 때문에 먹히지 않은 것처럼 보이므로 주석 처리 */
border-style : solid; /* 기본값 none 이므로 지정하지 않으면 눈에 보이지 않음 */
}
#test5 {
border-style : ridge; /* 튀어나온 액자 틀 느낌 */
border-width : 10px;
border-top-right-radius : 80px;
}
</style><test6>
<style>
div {
width : 100px;
height : 100px;
border-width : 3px;
margin : 15px;
/* border-color : black; test4 groove가 이 속성 때문에 먹히지 않은 것처럼 보이므로 주석 처리 */
border-style : solid; /* 기본값 none 이므로 지정하지 않으면 눈에 보이지 않음 */
}
#test6 {
border-style : inset;
border-width : 10px;
border-top-left-radius : 60px;
border-bottom-right-radius : 60px;
background-color : yellow;
}
</style><test7>
<style>
div {
width : 100px;
height : 100px;
border-width : 3px;
margin : 15px;
/* border-color : black; test4 groove가 이 속성 때문에 먹히지 않은 것처럼 보이므로 주석 처리 */
border-style : solid; /* 기본값 none 이므로 지정하지 않으면 눈에 보이지 않음 */
}
#test7 {
border-style : outset; /* 면적 자체가 튀어나온 듯한 느낌 */
border-width : 10px;
}
</style><test8>
<style>
div {
width : 100px;
height : 100px;
border-width : 3px;
margin : 15px;
/* border-color : black; test4 groove가 이 속성 때문에 먹히지 않은 것처럼 보이므로 주석 처리 */
border-style : solid; /* 기본값 none 이므로 지정하지 않으면 눈에 보이지 않음 */
}
#test8 {
border-radius : 50px;
border-style : dotted;
}
</style><test9>
<style>
div {
width : 100px;
height : 100px;
border-width : 3px;
margin : 15px;
/* border-color : black; test4 groove가 이 속성 때문에 먹히지 않은 것처럼 보이므로 주석 처리 */
border-style : solid; /* 기본값 none 이므로 지정하지 않으면 눈에 보이지 않음 */
}
#test9 {
box-shadow : 5px 5px 10px 5px gray;
border-width : 0px;
}
</style><test10>
<style>
div {
width : 100px;
height : 100px;
border-width : 3px;
margin : 15px;
/* border-color : black; test4 groove가 이 속성 때문에 먹히지 않은 것처럼 보이므로 주석 처리 */
border-style : solid; /* 기본값 none 이므로 지정하지 않으면 눈에 보이지 않음 */
}
#test10 {
border : 2px dashed pink
}
</style><button>
<style>
#btn {
width : 100px;
height : 65px;
border : 2px dashed pink; /* 버튼도 스타일 지정 가능 */
padding : 10px 20px; /* 버튼도 여백 주기 가능 */
border-radius : 10px; /* 버튼도 둥그스름하게 만들기 가능 */
}
#btn:hover { /* 반응 선택자 */
cursor : pointer;
background-color: gray;
}
</style>