목차
- border-left-style 예제 - 테두리 좌측 스타일 dotted 경우
- border-left-style 정의
- border-left-style 구문
- border-left-style 예제 - dashed 경우
- border-left-style 예제 - solid 경우
- border-left-style 예제 - double 경우
- border-left-style 예제 - none 경우
- border-left-style 예제 - groove 경우
- border-left-style 예제 - ridge 경우
- border-left-style 예제 - inset 경우
- border-left-style 예제 - outset 경우
border-left-style 예제 - 테두리 좌측 스타일 dotted 경우
<style>
h1 {border-left-style: dotted;}
div {border-style: solid; border-left-style: dotted;}
</style>
<h1>홈짱닷컴 Homzzang.com</h1>
<div>홈페이지 제작관리 강의</div>
결과보기
border-left-style 정의
테두리 좌측 스타일 지정.
1.
border 단축 속성으로 모든 테두리의 스타일 정의 후, border-left-style 속성으로 왼쪽만 다르게 스타일 지정 시 유용.
2.
- 기본값: none
- 상속여부: X
- 애니효과: X
- CSS버전: CSS1
- JS구문: object.style.borderLeftStyle="dashed"
3.
모든 브라우저 지원.
4. MDN border-left-style 예제 보기
https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-style
border-left-style 구문
selector {border-left-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;}
[매개변수]
none
테두리 아예 없음. (기본값)
테이블(=표) 테두리로 사용될 경우엔 테두리 보임. (= 테이블 테두리 경계충돌 해결 X)
hidden
있지만 눈에 안보이는 테두리.
테이블(=표) 테두리로 사용될 경우조차 테두리 안 보임. (= 테이블 테두리 경계충돌 해결 O)
dotted ★
점선 모양의 테두리.
dashed ★
- (대쉬 = 막대바) 모양의 테두리.
solid ★
2px 정도의 굵은 테두리.
double ★
두 줄 모양의 테두리.
groove
3D 움푹 파인 홈 모양의 테두리
※ groove: 홈
ridge
3D 위로 올라온 것 같은 모양의 테두리
※ridge: 산등성이
inset
3D 안으로 들어간 느낌의 테두리.
※좌측과 좌측이 테두리 진하게 표시
outset
3D 밖으로 나온 느낌의 테두리.
※ 좌측과 하단이 테두리 진하게 표시.
initial
이 속성의 기본값으로 설정.
inherit
부모요소의 속성값 상속.
border-left-style 예제 - dashed 경우
<style>
h1 {border-left-style: dashed;}
div {border-style: solid; border-left-style: dashed;}
</style>
<h1>홈짱닷컴 Homzzang.com</h1>
<div>홈페이지 제작관리 강의</div>
결과보기
border-left-style 예제 - solid 경우
<style>
h1 {border-left-style: solid;}
div {border-left-style: solid;}
</style>
<h1>홈짱닷컴 Homzzang.com</h1>
<div>홈페이지 제작관리 강의</div>
결과보기
border-left-style 예제 - double 경우
<style>
h1 {border-left-style: double;}
div {border-style: solid; border-left-style: double;}
</style>
<h1>홈짱닷컴 Homzzang.com</h1>
<div>홈페이지 제작관리 강의</div>
결과보기
border-left-style 예제 - none 경우
<style>
h1 {
border-style: solid;
border-left-style: none;
}
</style>
<h1>홈짱닷컴 Homzzang.com</h1>
결과보기
border-left-style 예제 - groove 경우
<style>
h1 {
border-left-style: groove;
border-left-color: coral;
border-left-width: 10px;
}
div {
border-style: solid;
border-left-style: groove;
border-left-color: yellow;
border-left-width: 10px;
}
</style>
<h1>홈짱닷컴 Homzzang.com</h1>
<div>홈페이지 제작관리 강의</div>
결과보기
border-left-style 예제 - ridge 경우
<style>
h1 {
border-left-style: ridge;
border-left-color: coral;
border-left-width: 10px;
}
div {
border-style: solid;
border-left-style: ridge;
border-left-color: yellow;
border-left-width: 10px;
}
</style>
<h1>홈짱닷컴 Homzzang.com</h1>
<div>홈페이지 제작관리 강의</div>
결과보기
border-left-style 예제 - inset 경우
<style>
h1 {
border-left-style: inset;
border-left-color: coral;
border-left-width: 10px;
}
div {
border-style: solid;
border-left-style: inset;
border-left-color: yellow;
border-left-width: 10px;
}
</style>
<h1>홈짱닷컴 Homzzang.com</h1>
<div>홈페이지 제작관리 강의</div>
결과보기
border-left-style 예제 - outset 경우
<style>
h1 {
border-left-style: outset;
border-left-color: coral;
border-left-width: 10px;
}
div {
border-style: solid;
border-left-style: outset;
border-left-color: yellow;
border-left-width: 10px;
}
</style>
<h1>홈짱닷컴 Homzzang.com</h1>
<div>홈페이지 제작관리 강의</div>
결과보기
