Notice
«   2024/09   »
일 월 화 수 목 금 토
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30
관리 메뉴

Jade_o.o

[css] attr 실습2 - border 테두리 그리기 본문

CSS

[css] attr 실습2 - border 테두리 그리기

by jade 2024. 1. 12. 12:26

선택자를 통해서 border의 테두리 별 색상 넣기와 모양 변화 시켜보자.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>실습 테두리 그리기</title>
    <style>

.square{
    display: inline-block;
    width:200px;
    height: 200px;
    cursor: pointer;
}

.border{
    background-color: black;
    border-color: red orange green blue;
    border-style: solid;
    /* border-style: dotted; */
    border-width: 7px;
    border-right-width: 1opx;
}

.rounded{
    background-color: mediumseagreen;
    border-radius: 5px 10px 20px 40px;
    border-radius: 5px 20px 40px;
    border-radius: 5px 40px;

}


    </style>
</head>
<body>
    <div class="square border"></div>
    <div class="square rounded"></div>
    <br/>
</body>
</html>

 

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

'CSS' 카테고리의 다른 글

[css] attr 실습4 - 요소 쌓임 순서 및 z-index  (0) 2024.01.12
[css] attr 실습3 - position : relative/absolute/fixed  (0) 2024.01.12
[css] 선택자 종합 실습 - 건의사항 작성란  (0) 2024.01.12
[css] attr 실습1 - inline-block 네모칸 속 색깔 다른 작은 네모 넣기  (0) 2024.01.12
[css] selector 실습5 - 속성 선택자  (0) 2024.01.12
'CSS' Related Articles more