12. 레이아웃(테두리 스타일)

CSS_VSC

12. 레이아웃(테두리 스타일)

76beny 2022. 6. 22. 21:12

<!DOCTYPE html>
<html lang="en">

<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>Border 스타일</title>
</head>

<body>
    <h1>Border 스타일</h1>
    <hr><br>

    <style>
        .basic {
            width: 200px;
            height: 40px;
            margin: 10px;
            padding-top: 10px;
            text-align: center;
        }
        
        .border-test1 {
            border-style: none;
        }
        
        .border-test2 {
            border-style: dotted;
        }
        
        .border-test3 {
            /*일반 실선!! 제일 많이 활용!*/
            border-style: solid;
        }
        
        .border-test4 {
            border-style: double;
        }
        
        .border-test5 {
            border-style: dashed;
        }
        
        .border-test6 {
            border-style: solid;
            border-width: 5px;
        }
        
        .border-test7 {
            border-style: solid;
            border-color: blue;
        }
        
        .border-test8 {
            border-style: solid;
            border-top-color: red;
        }
        
        .border-test9 {
            border-style: solid;
            border-radius: 10px;
        }
        
        .border-test10 {
            border-style: solid;
            border-top-left-radius: 50px;
        }
        
        .border-test11 {
            border-style: solid;
            border-top-left-radius: 50px;
            border-bottom-right-radius: 50px;
        }
        
        .border-test12 {
            border-style: solid;
            box-shadow: 5px 5px 3px 2px gray;
        }
        
        .border-test13 {
            border-style: solid;
            border-width: 5px;
            border-color: grey;
            background-color: lemonchiffon;
            border-top-left-radius: 20px;
            box-shadow: 5px 5px 3px 2px lightslategrey;
        }
        
        .border-test14 {
            border: 5px solid gray;
            background-color: lemonchiffon;
            border-top-left-radius: 20px;
            box-shadow: 5px 5px 3px 2px gray;
        }
    </style>

    <div class="basic border-test1">1. none 옵션</div>
    <div class="basic border-test2">2. dotted 옵션</div>
    <div class="basic border-test3">3. solid 옵션</div>
    <div class="basic border-test4">4. double 옵션</div>
    <div class="basic border-test5">5. dashed 옵션</div>
    <div class="basic border-test6">6. solid 5px 옵션</div>
    <div class="basic border-test7">7. solid blue 옵션</div>
    <div class="basic border-test8">8. solid red 옵션</div>
    <div class="basic border-test9">9. solid radius 10px 옵션</div>
    <div class="basic border-test10">10. solid radius TL 50px 옵션</div>
    <div class="basic border-test11">11. solid radius TL BR 50px 옵션</div>
    <div class="basic border-test12">12. solid shadow</div>
    <div class="basic border-test13">13. composite1 </div>
    <div class="basic border-test14">14. composite2 </div>

</body>

</html>

Border 스타일

1. none 옵션

2. dotted 옵션

3. solid 옵션

4. double 옵션

5. dashed 옵션

6. solid 5px 옵션

7. solid blue 옵션

8. solid red 옵션

9. solid radius 10px 옵션

10. solid radius TL 50px 옵션

11. solid radius TL BR 50px 옵션

12. solid shadow

13. composite1

14. composite2

이를 무단으로 도용, 복사, 전재, 재배포, 2차 변형 등을 할 경우