1. border-style 속성 : 테두리 스타일 지정하기
border-style : none | hidden | dashed | dotted | double | groove | inset | outset | ridge | solid
<style>
div {
width: 200px;
height: 100px;
display: inline-block;
margin: 15px;
border-width: 5px;
}
.box1 {
border-style: solid;
}
.box2 {
border-style: dashed;
}
.box3 {
border-style: dotted;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
2. border-width 속성 : 테두리 두께 지정하기
border-top-width : <크기> | thin | medium | thick
border-right-width : <크기> | thin | medium | thick
border-bottom-width : <크기> | thin | medium | thick
border-left-width : <크기> | thin | medium | thick
border-width : <크기> | thin | medium | thick
테두리는 네 방향을 따로 지정하거나 한 번에 지정할 수 있다.
border-width : 5px 4px 👉 위아래는 5px, 좌우는 4px
border-width : 5px 3px 6px 7px 👉 위 오른쪽 아래 왼쪽 순서(시계 방향)
.box1 {
border-style: solid;
border-width: 5px;
}
.box2 {
border-style: dashed;
border-width: 5px 2px;
}
.box3 {
border-style: dotted;
border-width: 5px 3px 6px 10px;
}
3. border-color 속성 : 테두리 색상 지정하기
테두리 또한 두께와 마찬가지로 네 방향의 색상을 각각 지정할 수도 한 번에 지정할 수도 있다.
.box1 {
border-color: cornflowerblue;
}
.box2 {
border-color: darkorange;
}
.box3 {
border-color: deeppink;
}
만약 테두리의 두께만 있고 컨텐츠 영역의 width 와 height 값이 없다면 어떻게 표현될까?
예시 코드를 다음과 같이 변형시켜 보았다.
<style>
div {
display: inline-block;
margin: 15px;
border-width: 50px;
border-style: solid;
}
.box1 {
border-color: cornflowerblue;
}
.box2 {
border-color: darkorange;
}
.box3 {
border-color: deeppink;
}
</style>
그렇다면 이러한 상태에서 네 방향의 색상을 모두 다르게 색칠하면 어떤 모양이 나올까?
이번에는 box1 만 바꿔보았다.
.box1 {
border-top-color: cornflowerblue;
border-right-color: dodgerblue;
border-bottom-color: darkslateblue;
border-left-color: lightblue;
}
이를 통해 테두리는 단순히 일직선으로 구분된 것이 아니라 일종의 액자 틀 모양처럼 네 방향이 구분되어진 것을 알 수 있게 되었다.
4. border-radius 속성 : 박스 모서리 둥글게 만들기
border-top-left-radius : <크기> | <백분율>
border-top-right-radius : <크기> | <백분율>
border-bottom-right-radius : <크기> | <백분율>
border-bottom-left-radius : <크기> | <백분율>
border-radius : <크기> | <백분율>
테두리의 꼭지점을 둥글게 만드는 속성이기 때문에 속성 명 또한 꼭지점의 위치를 특정하기 위해 표기되었다.
크기와 백분율은 원의 반지름 값으로 지정되어 해당 테두리를 둥글게 변환시킨다.
.box1 {
border-radius: 10px;
border-top-color: cornflowerblue;
border-right-color: dodgerblue;
border-bottom-color: darkslateblue;
border-left-color: lightblue;
}
이 예시는 네 개의 테두리에 반지름 10px 의 원이 있는 것처럼 만들어진 것이다.
이 속성을 활용하면 테두리로 원 형태를 만들 수도 있다.
.box1 {
border-radius: 50%;
border-top-color: cornflowerblue;
border-right-color: dodgerblue;
border-bottom-color: darkslateblue;
border-left-color: lightblue;
}
또는 각 모퉁이의 정도를 달리하여 다음과 같은 모양도 만들 수 있다.
.box2 {
border-top-left-radius: 10px;
border-top-right-radius: 80px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 80px;
border-color: darkorange;
}
5. box-shadow 속성 - 선택한 요소에 그림자 효과 내기
box-shadow : none | <그림자 값>....
그림자 값 = <수평 거리> <수직 거리> <흐림 정도> < 번짐 정도> <색상> inset
1️⃣ 수평 거리 : 필수 속성으로 그림자가 수평으로 얼마나 떨어져 있는지에 대한 정도를 나타내는 값이다.
양수 값은 요소의 오른쪽, 음수 값은 요소의 왼쪽에 그림자를 만든다.
2️⃣ 수직 거리 : 필수 속성으로 그림자가 수직으로 얼마나 떨어져 있는지에 대한 정도를 나타내는 값이다.
양수 값은 요소의 아래쪽, 음수 값은 요소의 위쪽에 그림자를 만든다.
3️⃣ 흐림 정도 : 0 을 기본값으로 하고 그림자의 진하기를 나타내는 값이다.
값이 커질수록 부드러운 그림자를 표시하며 음수 값은 사용할 수 없다.
4️⃣ 번짐 정도 : 양수 값을 사용하면 그림자가 모든 방향으로 퍼져나가고,
음수 값을 사용하면 모든 방향으로 축소되어 보인다. 기본값은 0 이다.
5️⃣ 색상 : 기본 값은 현재 글자 색을 기준하고, 한 가지 또는 공백으로 여러 가지를 함께 지정할 수 있다.
6️⃣ inset : 안쪽으로 그림자 효과를 주는 값이다.
<style>
div {
width: 200px;
height: 100px;
display: inline-block;
margin: 15px;
border: 2px solid;
border-radius: 20px;
}
.box1 {
box-shadow: 5px 5px 10px 0px black;
}
.box2 {
box-shadow: 5px -5px 10px 0px black;
}
.box3 {
box-shadow: 5px 5px 0px 10px black;
}
.box4 {
box-shadow: 5px 5px 10px 10px black;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
</body>
'CSS' 카테고리의 다른 글
| float, clear 속성 (0) | 2022.10.21 |
|---|---|
| 여백(margin, padding)을 조절하는 속성 (0) | 2022.10.21 |
| 박스 모델 속성 (0) | 2022.10.20 |
| 그라데이션 효과주기 (0) | 2022.10.19 |
| 배경 색과 배경 이미지 (0) | 2022.10.19 |
