so woon!

[속성] border 외 속성 본문

CSS/개념정리

[속성] border 외 속성

xowoony 2022. 9. 10. 19:46

학습일 : 2022. 09. 07

border 속성
요소의 테두리를 그리기 위해 사용한다.
테두리는 크기에 영향을 미친다.

용법
  ... {
    border: [none | [[크기 : ?px|?rem|...] [모양 : *x] [색상]]];
  }

none 값을 주게 되면 테두리가 없어진다.

 

*x

    - dotted : 원형 점선
    - dashed : 직사각형 점선
    - solid : 실선
    - double : 이중 실선
    - 기타 : https://developer.mozilla.org/ko/docs/Web/CSS/border-style

 

border-top 속성
상단 테두리를 그리기 위해 사용한다. 용법은 border와 같다.

border-right 속성
우측 테두리를 그리기 위해 사용한다. 용법은 border와 같다.

border-bottom 속성
하단 테두리를 그리기 위해 사용한다. 용법은 border와 같다.

border-left 속성
좌측 테두리를 그리기 위해 사용한다. 용법은 border와 같다.

border-radius 속성
요소의 각 꼭지점을 둥글게할 반지름을 지정한다.

용법
  ... {
    border-radius: [?px|?rem|?%|...];
  }


  - 좌상, 우상, 우하, 좌하측 꼭지점을 둥글게할 반지름을 설정한다.
  - 퍼센트(%) 값은 해당 요소 크기에 대한 비율로, width와 height가 같은 요소에 대해 해당 값을 50%로 지정할 경우
    정원(正圓)을 만들 수 있다.
  - 해당 값을 터무니 없이 크게 지정하면 소시지 모양을 만들 수 있음.

 


border-top-left-radius 속성
좌측 상단 꼭지점을 둥글게할 반지름을 설정한다. 용법은 border-radius와 동일하다.

border-top-right-radius 속성
우측 상단 꼭지점을 둥글게할 반지름을 설정한다. 용법은 border-radius와 동일하다.

border-bottom-left-radius 속성
좌측 하단 꼭지점을 둥글게할 반지름을 설정한다. 용법은 border-radius와 동일하다.

border-bottom-right-radius 속성
우측 하단 꼭지점을 둥글게할 반지름을 설정한다. 용법은 border-radius와 동일하다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">    
    <title>border 속성</title>
    <style>
        .box {
            background-color: rgb(50, 100, 200);
            border: 0.0625rem solid rgb(25, 50, 100);❤
            border-radius: 0.5rem;❤
            color: rgb(255, 255, 255);
            display: inline-block;
            padding: 0.5rem 1rem;
        }

        .round {
            width: 15rem;
            height: 15rem;
            background-color: rgb(100, 200, 100);
            border-radius: 50%;❤
        }

        .button {
            background-color: black;
            border-radius: 1000rem;❤
            color: white;
            display: inline-block;
            padding: 0.75rem 1.25rem;
        }
    </style>
</head>
<body>
    <div class="box">ㅋㅋ</div>
    <br>
    <div class="round"></div>
    <br>
    <div class="button">버튼임</div>
    <br>
    <br>
    <br>
    <br>
</body>
</html>

===========실행결과=============

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

'CSS > 개념정리' 카테고리의 다른 글

[속성] max-width, max-height, min-width, min-height  (0) 2022.09.10
[속성] font 외 속성  (0) 2022.09.10
[속성] display 속성  (0) 2022.09.10
[속성] padding 속성  (0) 2022.09.09
[속성] margin 속성  (0) 2022.09.07
'CSS/개념정리' Related Articles more
Comments