CSS day9

border(테두리)의 다양한 속성

테두리

테두리는 박스 모델의 끝 선상을 가리키며 스타일로 점선 실선 등을 지정할 수 있다.

border-style

테두리의 스타일을 지정할 때 사용하는 속성으로 기본 값은 none으로 속성 값을 따로 지정하지 않으면 테두리 색상이나 두께를 지정하더라도 화면에 표시 되지 않는다. 테두리의 스타일에는 여러 속성값이 있다.

종류	설명
none	태두리가 없음(기본값)
hidden	테두리를 감춤
solid	테두리를 실선으로 표시
dotted	테두리를 점선으로 표시
dashed	테두리를 짧은 직선으로 표시
double	테두리를 이중선으로 표시

<!--생략-->
...
.a{border-style: solid;}
.b{border-style: dotted;}
.c{border-style: dashed;}
.d{border-style: double;}
...
<div class="a">실선</div>
<div class="b">점선</div>
<div class="c">짧은 직선</div>
<div class="d">이중선</div>
...
<!--생략-->

border-width

테두리의 두께를 지정하는 속성으로 당연히 속성값을 지정하지 않는다면 테두리가 나타나지않을 것이다. 속성값으로는 px 이나 thin, thick과 같은 예약어로도 표현 가능하다.

기본형

border-width: <크기> | thin | medium | thick

<!--생략-->
...
.a{border-width: 2px;}
.b{border-width: thin thick;}
.c{border-width: thick thin thin;}
.d{border-width: 1px 5px 3px 5px;}
...
<div class="a">전체</div>
<div class="b">상하, 좌우</div>
<div class="c">상하, 우, 좌</div>
<div class="d">상, 우, 하, 좌</div>
...
<!--생략-->

위 예제처럼 박스 모델은 상하 좌우 4개의 방향이 있고 그 방향을 한번에 적용할 수 도 있고, 모두 다르게 지정할 수 도있다. 이때 박스 모델의 방향 순서를 알아야한다. 순서는 상 우 하 좌의 시계방향이며 이는 속성값으로 기입할 때의 순서가된다. 이를 활용하면 각기 다른 방향에 원하는데로 속성값 적용이 가능하다.

border-color

테두리의 색상을 정하는 속성이다.

<!--생략-->
...
div{
    border-style: dashed;
    border-color: black;
}
.a{border-color: red;}
.b{border-bottom-color: red;}
...
<div class="a">red</div>
<div class="b">하 red</div>
...
<!--생략-->

border

위 테두리의 스타일 두께 색상을 한번에 표현하고자 할 때 사용하는 속성이다. 테두리의 왼쪽만 혹은 아래만 적용하고 싶다면 border-left, border-bottom처럼 속성 이름에 방향만 붙이면 사용 가능하다.

<!--생략-->
...
div{
	border:3px dotted deepskyblue;
}
...
<div>통합 테두리</div>
...
<!--생략-->

border-radius

이번에는 박스 모델의 테두리를 부드럽게 만드는 방법을 살펴보자. 이 속성은 원의 반지름을 이용하며 둥근 정도를 나타내는 방법이다.

기본형

border-radius: <크기> | <백분율>

border-radius 속성을 사용하면 이미지를 원 형태로 만들 수 도 있다. 이미지 요소의 너비와 높이를 똑같이 하고 border-radius의 반지름 값을 너비나 높이의 50%로 지정하면 원이 된다. 예를 들어 300px의 박스가 있다고하면 150px이나 50%로 적용하면 원으로 표현된다.

<!--생략-->
...
.a{
	border-radius: 10px;
}
.b{
	width: 100px;
    height: 100px;
	border-radius: 50%;
}
...
<div class="a">둥근 테두리</div>
<div class="b"></div>
...
<!--생략-->