Reference/CSS
border-left 속성은 테두리 왼쪽 속성을 일괄적으로 설정합니다.
border-left
border-left 속성은 테두리 왼쪽 속성을 일괄적으로 설정합니다. 테두리 왼쪽 속성에 color, style, width 값을 일괄적으로 설정이 가능합니다.
특징 | 설명 |
---|---|
기본값 |
border-left-color : currentcolor border-left-style : none border-left-width : medium |
적용 | border |
버전 | CSS1 |
사용성 | ★★☆☆☆ |
정의(Definition)
- border-left 속성은 테두리 왼쪽 속성을 일괄적으로 설정합니다.
비교(Compare)
- border-left 속성은 테두리 왼쪽 속성을 일괄적으로 설정합니다.
- border-left-color 속성은 테두리 왼쪽 색 속성을 설정합니다.
- border-left-style 속성은 테두리 왼쪽 스타일 속성을 설정합니다.
- border-left-width 속성은 테두리 왼쪽 두께 속성을 설정합니다.
관련된 속성(Related Properties)
- border 속성은 테두리 속성을 일괄적으로 설정합니다.
- border-color 속성은 테두리 색 속성을 일괄적으로 설정합니다.
- border-style 속성은 테두리 스타일 속성을 일괄적으로 설정합니다.
- border-width 속성은 테두리 두께 속성을 일괄적으로 설정합니다.
- border-image 속성은 테두리 이미지 속성을 일괄적으로 설정합니다.
- border-radius 속성은 테두리 굴곡을 일괄적으로 설정합니다.
문법(Syntax)
border-left : color | style | width
/* 컬러 속성 */
border-left: currentcolor; /* 기본값 */
border-left: #ff0000; /* 헥사코드 */
border-left: #blue; /* 키워드 색상 */
border-left: rgb(255, 255, 255); /* RGB 색상 */
border-left: rgba(255, 255, 255, 1); /* RGBA 색상 */
border-left: hsl(120, 100%, 50%); /* HSL 색상 */
border-left: hsla(120, 100%, 50%,1); /* HSLA 색상 */
border-left: transparent; /* 투명 */
/* 스타일 속성 */
border-left: none;
border-left: hidden;
border-left: dotted;
border-left: dashed;
border-left: solid;
border-left: double;
border-left: groove;
border-left: ridge;
border-left: inset;
border-left: outset;
/* 두께 속성 */
border-left: 10px;
border-left: thin;
border-left: medium;
border-left: thick;
/* 두께 | 스타일 */
border-left: 1px solid;
/* 두께 | 스타일 | 색상 */
border-left: 1px solid #000;
/* 전역 속성 */
border-left: inherit; /* 상속 */
border-left: initial; /* 초기화 */
border-left: revert; /* 원래대로 돌리기 */
border-left: unset; /* 설정 해제 */
속성(Property)
속성값 | 값(예) | 설명 |
---|---|---|
color | border-left: #000 | 테두리 왼쪽 컬러 속성을 설정합니다. |
style | border-left: solid | 테두리 왼쪽 스타일 속성을 설정합니다. |
width | border-left: 1px | 테두리 왼쪽 두께 속성을 설정합니다. |
예제1(Sample)
테두리 스타일을 설정한 예제입니다.
border: 5px solid #4390e1
border: 10px solid #4390e1
border: 15px solid #4390e1
border-left: 5px solid #ff0;
border-left: 10px dotted #6943e1;
border-left: 15px dashed #25992c;
border-left: medium double red;
border-left: 25px groove #4390e1;
HTML
CSS
SCRIPT
<div class="border-box">
<div class="box"><span>border: 4px solid #4390e1</span></div>
<div class="box"><span>border: 10px solid #4390e1</span></div>
<div class="box"><span>border: 15px solid #4390e1</span></div>
</div>
.border-box {
display: flex;
justify-content: space-between;
}
.border-box .box {
width: 32%;
background-color: #a2cbfa;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
min-height: 200px;
box-sizing: border-box;
}
.border-box .box:nth-child(1){
border: 5px solid #4390e1
}
.border-box .box:nth-child(2){
border: 10px solid #4390e1
}
.border-box .box:nth-child(3){
border: 15px solid #4390e1
}
@media (max-width: 800px){
.border-box {
flex-direction: column;
}
.border-box .box {
width: 100%;
margin-bottom: 2%;
}
}
//javascript none
호환성(Compatibility)
6 | 7 | 8 | 9 | 10 | 11 | |||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
border-left | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ |
보더와 관련된 속성
- border 속성은 테두리 속성을 일괄적으로 설정합니다.
- border-color 속성은 테두리 색 속성을 일괄적으로 설정합니다.
- border-style 속성은 테두리 스타일 속성을 일괄적으로 설정합니다.
- border-width 속성은 테두리 두께 속성을 일괄적으로 설정합니다.
- border-top 속성은 테두리 위쪽 속성을 일괄적으로 설정합니다.
- border-top-color 속성은 테두리 위쪽 색 속성을 설정합니다.
- border-top-style 속성은 테두리 위쪽 스타일 속성을 설정합니다.
- border-top-width 속성은 테두리 위쪽 두께 속성을 설정합니다.
- border-right 속성은 테두리 오른쪽 속성을 일괄적으로 설정합니다.
- border-right-color 속성은 테두리 오른쪽 색 속성을 설정합니다.
- border-right-style 속성은 테두리 오른쪽 스타일 속성을 설정합니다.
- border-right-width 속성은 테두리 오른쪽 두께 속성을 설정합니다.
- border-bottom 속성은 테두리 아래쪽 속성을 일괄적으로 설정합니다.
- border-bottom-color 속성은 테두리 아래쪽 색 속성을 설정합니다.
- border-bottom-style 속성은 테두리 아래쪽 스타일 속성을 설정합니다.
- border-bottom-width 속성은 테두리 아래쪽 두께 속성을 설정합니다.
- border-left 속성은 테두리 왼쪽 속성을 일괄적으로 설정합니다.
- border-left-color 속성은 테두리 왼쪽 색 속성을 설정합니다.
- border-left-style 속성은 테두리 왼쪽 스타일 속성을 설정합니다.
- border-left-width 속성은 테두리 왼쪽 두께 속성을 설정합니다.
- border-image 속성은 테두리 이미지 속성을 일괄적으로 설정합니다.
- border-image-outset 속성은 테두리 이미지 간격 속성을 설정합니다.
- border-image-repeat 속성은 테두리 이미지 반복 속성을 설정합니다.
- border-image-slice 속성은 테두리 이미지 크기 속성을 설정합니다.
- border-image-source 속성은 테두리 이미지 경로 속성을 설정합니다.
- border-image-width 속성은 테두리 이미지 두께 속성을 설정합니다.
- border-radius 속성은 테두리 굴곡을 일괄적으로 설정합니다.
- border-top-left-radius 속성은 윗부분 왼쪽 모서리 굴곡을 설정합니다.
- border-top-right-radius 속성은 윗부분 오른쪽 모서리 굴곡을 설정합니다.
- border-bottom-left-radius 속성은 아래부분 왼쪽 모서리 굴곡을 설정합니다.
- border-bottom-right-radius 속성은 아래부분 오른쪽 모서리 굴곡을 설정합니다.
댓글