웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
웹페이지에 외곽선, 테두리를 그릴 수 있는 CSS 프로퍼티 border에 대하여 알아봅니다. 아래처럼 말이죠 ~
border: width type color;
이때 적용 가능한 값들을 간단히 알아보면...
@ width
px값으로 사용하며 10px처럼 적용합니다.
@ Border Type
solid - 가장 일반적인 타입으로 상하좌우 스타일이 동일
inset - 안으로 파힌듯한 스타일. 내부 그림자 효과와 유사
outset - 밖으로 도드라진 스타일. 외부 그림자 효과와 비슷
dotted - 많은 점들로 연결된 스타일
dashed - 작은 실선처럼 Dash 기호들이 연결된 모습
double - 두 개의 선이 나타남
groove - 3D groove 스타일이 적용됨
ridge- 3D ridge 스타일이 적용됨
@ color
테두리에 적용될 색을 결정합니다. 값은 HEX값을 사용할 수 있습니다.
참고로 color는 옵션으로 만약 값이 없는 경우... 즉 적용되지 않는 경우에는 상위에 위치한 color 프로퍼티에 있는 값이 적용되게됩니다. 아래의 코드는 위의 red값이 테두리색으로 결정됩니다.
@ border.html
위 예제는 아래처럼 폰트색 red뿐만아니라 border에도 함께 red가 적용되어 빨간색 테두리로 나타나게됩니다.
! border 축약 프로퍼티
border 프로퍼티의 각 값들을 짧게 축약 프로퍼티를 사용하여 나타낼 수 있습니다. 다음은 축약 프로퍼티 border-width border-type 그리고 border-color입니다.
border-width - 테두리 두께 width 정하기
border-type - 테두리의 타입을 결정
border-color - 테두리 색을 결정
예를들어 아래의 border 프로퍼티는 다음과 같이 바꾸는 것과 동일하게 동작합니다.
여기까지 border 프로퍼티에 관한 몇 가지를 알아봤습니다. 그럼 아래는 이를 적용한느 다양한 예제 코드입니다.
@ border.html
@ border.css
예제를 위해서 각 엘리먼트는 width, height값을 각각 100px로 css에 추가하였습니다. 위 코드를 실행하면 아래와 같습니다.
Test border 1
Test border 2
Test border 3
# CSS border 프로퍼티 알아보기
border를 사용하면 해당 엘리먼트의 상하좌우 위치에 테두리를 적용할 수 있습니다. 사용방법은 아래와 같습니다.border: width type color;
이때 적용 가능한 값들을 간단히 알아보면...
- width : 테두리의 두께를 입력. px값으로 적용
- type: 테두리 타입을 결정함
- color: 테두리에 적용될 색의 값
@ width
px값으로 사용하며 10px처럼 적용합니다.
div { border: 10px solid; }
@ Border Type
solid - 가장 일반적인 타입으로 상하좌우 스타일이 동일
inset - 안으로 파힌듯한 스타일. 내부 그림자 효과와 유사
outset - 밖으로 도드라진 스타일. 외부 그림자 효과와 비슷
dotted - 많은 점들로 연결된 스타일
dashed - 작은 실선처럼 Dash 기호들이 연결된 모습
double - 두 개의 선이 나타남
groove - 3D groove 스타일이 적용됨
ridge- 3D ridge 스타일이 적용됨
@ color
테두리에 적용될 색을 결정합니다. 값은 HEX값을 사용할 수 있습니다.
Ex) border: 1px solid #f00;
참고로 color는 옵션으로 만약 값이 없는 경우... 즉 적용되지 않는 경우에는 상위에 위치한 color 프로퍼티에 있는 값이 적용되게됩니다. 아래의 코드는 위의 red값이 테두리색으로 결정됩니다.
div {
color: red;
}
div p {
border: 2px solid;
}
color: red;
}
div p {
border: 2px solid;
}
@ border.html
<div>
123
<p>456</p>
</div>
123
<p>456</p>
</div>
위 예제는 아래처럼 폰트색 red뿐만아니라 border에도 함께 red가 적용되어 빨간색 테두리로 나타나게됩니다.
123
456
! border 축약 프로퍼티
border 프로퍼티의 각 값들을 짧게 축약 프로퍼티를 사용하여 나타낼 수 있습니다. 다음은 축약 프로퍼티 border-width border-type 그리고 border-color입니다.border-width - 테두리 두께 width 정하기
border-type - 테두리의 타입을 결정
border-color - 테두리 색을 결정
예를들어 아래의 border 프로퍼티는 다음과 같이 바꾸는 것과 동일하게 동작합니다.
div {
border: 1px solid #000;
}
=> 아래와 동일border: 1px solid #000;
}
div {
border-width: 1px;
border-type: solid;
border-color: #000;
}
border-width: 1px;
border-type: solid;
border-color: #000;
}
여기까지 border 프로퍼티에 관한 몇 가지를 알아봤습니다. 그럼 아래는 이를 적용한느 다양한 예제 코드입니다.
# CSS Border 예제보기
아래는 다양한 스타일의 border 프로퍼티를 예제로 구현하였습니다. 각각 어떻게 다른지 알아보세요.@ border.html
<div class="border1">Example 1</div>
<div class="border2">Example 2</div>
<div class="border3">Example 3</div>
<div class="border4">Example 4</div>
<div class="border5">Example 5</div>
<div class="border2">Example 2</div>
<div class="border3">Example 3</div>
<div class="border4">Example 4</div>
<div class="border5">Example 5</div>
@ border.css
.border1 {
border: 1px solid;
}
.border2 {
border: 2px dashed #0f0;
}
.border3 {
border: 3px double #0f0;
}
.border4 {
border: 2px inset #999;
}
.border5 {
border: 3px outset #f30;
}
border: 1px solid;
}
.border2 {
border: 2px dashed #0f0;
}
.border3 {
border: 3px double #0f0;
}
.border4 {
border: 2px inset #999;
}
.border5 {
border: 3px outset #f30;
}
예제를 위해서 각 엘리먼트는 width, height값을 각각 100px로 css에 추가하였습니다. 위 코드를 실행하면 아래와 같습니다.
아래의 글도 찾고 계시지 않나요?
