--> [HTML5/CSS3] CSS 속성 강좌 #4 - border 속성

[HTML5/CSS3] CSS 속성 강좌 #4 - border 속성

이번 포스팅에서는 html 요소에 테두리를 지정하는 border 속성에 대해서 알아보도록 하겠습니다. 


  1. border 속성


border 속성은 요소의 테두리를 지정할 때 사용하는 속성입니다. CSS로 border 속성을 지정하는 형태는 아래와 같습니다. 


▼ 첫 번째 요소에는 테두리 두께가 오고 두 번째 요소에는 테두리 스타일 세 번 째 요소에는 테두리 색깔이 옵니다. 특정 요소의 4가지 방향에 대해서 각각 다르게 border 속성을 부여하는 것이 가능합니다. 각 방향에 대한 속성명은 아래 그림과 같습니다.

▼ 요소에서 각 영역의 위치는 4가지로 구분이 가능합니다. top, right, bottom, left 영역으로 나누어지고 각 영역에 대해 다르게 border 속성 적용이 가능합니다. 아래 샘플 예제를 살펴보겠습니다.


▼ 2개의 <div> 태그 요소를 정의하였고 각각 border 속성을 정의하는 방식이 다릅니다. 먼저 id Content1에 해당하는 태그의 경우 border 속성을 이용하여 상하좌우 같은 border Style을 적용하는 형태입니다. 반면 id Content2에 해당하는 태그의 경우 각 영역별로 다른 border 속성을 적용하고 있습니다. 아래는 브라우저에서 보이는 형태입니다.



  2. border style


테두리 스타일은 여러 가지 종류가 있습니다. 아래는 각각의 border-style과 브라우저에서 나타나는 형태입니다. 브라우저에서 나오는 형태를 보고 원하는 style을 적용하시면 되겠습니다.



▼ 각 border-style 별로 브라우저에 표시되는 형태는 아래와 같습니다.



  3. border-radious


border-radious 속성을 사용하여 테두리 모서리 형태를 변경할 수 있습니다. 값이 커질수록 모서리 형태가 더 둥글게 표현이 됩니다. 아래 샘플 예제로 참고 바랍니다.


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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>border-radious 속성</title>
    <style>
       div {
           width : 500px;
           height : 50px;
           text-align : center;
           line-height: 50px;
           margin-bottom : 10px;
       } 
       #Content1{
           border : 3px solid black;
       }       
       #Content2{
           border : 3px solid black;
           border-radius: 5px;
       }   
       #Content3{
           border : 3px solid black;
           border-radius: 20px;
       }   
       #Content4{
           border : 3px solid black;
           border-radius: 50px;
       }   
    </style>
</head>
<body>
   <div id = "Content1">
       radious 적용 안함
   </div>
   <div id = "Content2">
       각 모서리 5px 적용
   </div>
   <div id = "Content3">
       각 모서리 20px 적용
    </div>
    <div id = "Content4">
       각 모서리 50px 적용
    </div>
</body>
</html>
cs


▼ <div> 태그 4개를 정의하였으며 각각 border-radious 속성값을 다르게 지정하였습니다. 아래는 브라우저에서 보이는 형태입니다.


▼ border-radious 속성값이 커질수록 각 모서리 형태가 더 둥글게 변하는 것을 확인할 수 있습니다.

댓글(0)

Designed by JB FACTORY