border-width

CSS 공작소에 방문해 주셔서 감사드립니다. 반응형 예제로 느껴보세요!!

border-width 는 테두리의 두께만 지정합니다.

예제 1
실습 - border-width 테두리 두께 조절해 보기
보기
CSS 공작소
CSS 공작소
span div img
border-width :
1px
border-width : 1px
CSS 공작소
설명
- border-width 는 테두리의 두께만 전문적으로(?) 지정할 수 있습니다.
- border 도 참고해 보세요 ^^
- border 등으로 설정이 된 상태에서 사용해야 됩니다.
예제 2
실습 - 2개의 속성값 조절해 보기
보기
CSS 공작소
CSS 공작소
span div img
border-width :
1px
1px
border-width : 1px 1px
CSS 공작소
설명
- 이 border-width 도 총 4개의 값으로 각각의 테두리를 조절할 수 있습니다.
- 2개를 사용할때는 border-width : 1px 1px 하면 되겠습니다.
- 이때는 위 아래, 오른쪽 왼쪽 이 한쌍입니다.
예제 3
실습 - 3개의 속성값 조절해 보기
보기
CSS 공작소
CSS 공작소
span div img
border-width :
1px
1px
1px
border-width : 1px 1px 1px
CSS 공작소
설명
- 이번에는 3개 입니다.
- 위, 오른쪽 왼쪽, 아래 이렇게 조절됩니다. 오른쪽과 왼쪽은 동시에 적용됩니다.
- padding 이나 margin 에 사용되는 방법과 같습니다.
예제 4
실습 - 4개의 속성값 조절해 보기
보기
CSS 공작소
CSS 공작소
span div img
border-width :
1px
1px
1px
1px
border-width : 1px 1px 1px 1px
CSS 공작소
설명
- 마지막으로 4개 입니다.
- 위, 오른쪽, 아래, 왼쪽 이렇게 조절됩니다.
- padding 이나 margin 에 사용되는 방법과 같습니다.
- 위쪽 부터 시계방향으로 회전한다고 생각하고 위, 오른쪽, 아래쪽, 왼쪽 이렇게 외우면 좋습니다.
연구 1
border 설정을 한 상태와 그렇지 않은 상태에서의 border-width
보기

border 설정이 되지않은 상태 : 테두리가 나타나지 않음


설정을 한 상태 : 테두리가 나타남
소스
<style type="text/css">
    .css_test1 {/* 테두리 설정이 되어있지 않아서 border-width 가 적용되지 못함 */
        border-width : 10px;
    }
    .css_test2 {
        border : 1px solid black;/* 테두리 설정하여 활성화 */
        border-width : 10px;
    }
</style>
<img class="css_test1" src="http://cfile26.uf.tistory.com/image/270A673D54EF575A111913" style="width:90%;" /><br>
border 설정이 되지않은 상태 : 테두리가 나타나지 않음<br>
<br>
<img class="css_test2" src="http://cfile26.uf.tistory.com/image/270A673D54EF575A111913" style="width:90%;" /><br>
설정을 한 상태 : 테두리가 나타남
사용된 CSS (클릭시 보기) : borderborder-width
설명
- 설정을 바꿀수는 있지만 단독으로는 사용할 수 없습니다.
- 기존의 설정을 바꾸는 용도로 사용하면 좋습니다.
- 참고 : border
연구 2
이미지의 테두리의 두께를 다르게 해보기
보기
소스
<style type="text/css">
    .css_test {
        border : 0 solid black;
        border-width : 1px 2px 3px 1px;
        border-color : black;
        padding : 2px;
        width : 80%;
    }
</style>

<img class="css_test" src="https://t1.daumcdn.net/cfile/tistory/27239438550B92392A" />
사용된 CSS (클릭시 보기) : borderborder-colorborder-widthpaddingwidth
+ 관련 CSS +