[CSS] 04-2 테두리 관련 속성들

1. border-style 속성 – 테두리 스타일 지정하기

① 기본 값이 none이기 때문에 화면에 테두리가 표시되지 않음

② 테두리를 그리기 위해서는 맨 먼저 테두리 스타일부터 지정

③

④ border-style에 지정 가능한 속성 값들

<예제 – border-001.html>

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=
    , initial-scale=1.0">
    <title>테두리 스타일</title>
    <style>
        div {
            width: 200px;
            height: 100px;
            display: inline-block;
            border-width: 5px;
        }
        .box1 {
            position: absolute; /*글자 입력시 박스 내려가는 현상 해결하기위해*/
            border-style: solid; /*테두리 실선*/
        }
        .box2 {
            border-style: dotted; /*테두리 점선*/
        }
        .box3 {
            border-style: dashed; /*테두리 직선점선*/
        }
        .box4 {
            border-style: double; /*테두리 이중선*/
        }
        .box5 {
            border-style: groove; /*테두리 조각선*/
        }
        .box6 {
            border-style: inset; /*테두리 창에 박힌 것 처럼*/
            border-collapse: collapse; /*groove와 동일*/
        }.box7 {
            border-style: outset; /*테두리 창에서 튀어나온 것 처럼*/
            border-collapse: collapse; /*ridge와 동일*/
        }
        .box8 {
            border-style: ridge; /*테두리 창에서 튀어나온 것 처럼*/
        }
    </style>
</head>
<body>
    <!--div.box1*8-->
    <div class="box1">abcd</div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
    <div class="box5"></div>
    <div class="box6"></div>
    <div class="box7"></div>
    <div class="box8"></div>
</body>
</html>

2. border-width 속성 – 테두리 두께 지정하기

①

② border-width 속성 값의 개수에 따른 변화

- 1개 : 네 방향 모두 동일한 두께

- 2개 : 위아래, 좌우 묶어서 두께 적용

- 4개 : top -> right -> bottom -> left 순으로 두께 적용

3. border-color 속성 – 테두리 색상 지정하기

①

② 방향이 있는 속성은 각 방향의 테두리 색상을 지정하고

방향이 없는 속성인 border-color 속성은 네 방향의 테두리 색상을 지정

<예제 – border-002.html>

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>보더 색상 굵기</title>
    <style>
        div {
            width: 200px;
            height: 100px;
            display: inline-block;
            margin: 15px;
            border-style: dashed;
            border-width: 2px;
        }
        .box1 {
            border-color: red;
        }
        .box2 {
            border-color: blue;
        }
        .box3 {
            border-top-color: black;
            border-right-color: red;
            border-bottom-color: blue;
            border-left-color: green;
            border-top-width: 1px;
            border-right-width: 5px;
            border-bottom-width: 10px;
            border-left-width: 20px;
        }
    </style>
</head>
<body>
    <!--div.box1*3-->
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</body>
</html>

4. border 속성 – 테두리 스타일 묶어 지정하기

①

② 지정할 때 두께, 색상, 스타일의 순서 상관없이 지정 가능

<예제 – border-003.html>

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>보더 속성 묶어서 지정</title>
    <style>
        h1 {
            padding-bottom: 5px;
            border-bottom: 3px solid #ccc;
        }
        p {
            padding: 10px;
            border: 2px dotted black;
        }
        div {
            width: 300px;
            height: 200px;
        }
        .box1 {
            border-top: 1px dotted black;
            border-right: 5px dashed blue;
            border-bottom: 10px solid red;
            border-left: 15px double green;
        }
    </style>
</head>
<body>
    <!--h1+p+div.box1*3-->
    <h1>박스 모델</h1>
    <p>박스 모델을 실제 콘텐츠 영역, 박스와 콘텐츠 영역 사이의 패딩, 박스의 테두리 보더, 그리고
        여러 박스 모델 간의 여백인 마진 등의 요소로 구성된다.
    </p>
    <div class="box1"></div>
</body>
</html>

5. border-radius 속성 – 박스 모서리 둥글게 만들기

①

②

- 각 모서리의 반 지름이 border-radius의 속성 값이 됨.

<예제 – radius-001.html>

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>보더 모서리 둥글게 하기</title>
    <style>
        div {
            width: 300px;
            height: 200px;
            margin: 20px;
            display: inline-block;
        }
        .round1 {
            border: 2px solid red;
            border-radius: 20px;
        }
        .round2 {
            border: 2px solid red;
            border-top-left-radius: 20px;
            border-top-right-radius: 20px;
        }
        .round3 {
            border: 2px solid red;
            border-radius: 5% 30% 20% 45%;
        }
    </style>
</head>
<body>
    <!--div.round*3-->
    <div class="round1"></div>
    <div class="round2"></div>
    <div class="round3"></div>
</body>
</html>

6. 타원 형태로 둥글게 만들기

① 가로 반지름 크기와 세로 반지름 크기를 함께 지정

②

<예제 – radius-002.html>

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>보더 모서리 둥글게 하기</title>
    <style>
        div {
            width: 250px;
            height: 300px;
            margin: 20px;
            display: inline-block;
            border: 2px solid;
        }
        .bg {
            background: url(images/pic2.jpg);
            background-size: cover;
            border-radius: 70px/40px;
        }
        .bg1 {
            background: url(images/pic2.jpg);
            background-size: cover;
            border-top-left-radius: 70px 40px;
            border-top-right-radius: 20px 90px;
            border-bottom-right-radius: 80px 30px;
            border-bottom-left-radius: 50px 100px;
        }
    </style>
</head>
<body>
    <div></div>
    <div class="bg"></div>
    <div class="bg1"></div>

</body>
</html>

<예제 – radius-003.html>

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>보더 모서리 둥글게 하기</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            display: inline-block;
            margin: 15px;
            border: 2px solid black;
            background: #ffd800;
        }
        .round1 {
            border-bottom-left-radius: 100px 50px;
        }
        .round2 {
            border-bottom-right-radius: 50% 30%;
        }
        .round3 {
            border-top-right-radius: 50px;
        }
    </style>
</head>
<body>
    <div class="round1"></div>
    <div class="round2"></div>
    <div class="round3"></div>
</body>
</html>

7. box-shadow 속성 – 선택한 요소에 그림자 효과 내기

①

② 수평 거리와 수직 거리는 필수 값이고 기타 속성은 옵션

<예제 – box-shadow-001.html>

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>박스 그림자 효과</title>
    <style>
        div {
            width: 200px;
            height: 100px;
            margin: 15px;
            display: inline-block;
            border: 2px solid red;
        }
        .box1 {
            box-shadow: 2px -2px 5px 0px black;
        }
        .box2 {
            box-shadow: 5px 5px 15px 5px black;
        }
        .box3 {
            box-shadow: 2px -2px 5px 0px black;
        }
    </style>
</head>
<body>
    <!--div.box*3-->
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>

</body>
</html>

저작자표시 비영리 변경금지

'💻 1. 웹개발_Front end > 1-3 CSS' 카테고리의 다른 글

[CSS] 05-1 CSS 포지셔닝과 주요 속성들 (0)	2021.09.05
[CSS] 04-3 여백을 조절하는 속성들 (0)	2021.09.05
[CSS] 04-1 CSS와 박스 모델 (0)	2021.09.05
[CSS] 03-3 그라데이션 효과로 배경 꾸미기 (0)	2021.09.05
[CSS] 03-2 배경 색과 배경 이미지 (0)	2021.09.05