티스토리 뷰
이번 포스팅에서는 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 속성값이 커질수록 각 모서리 형태가 더 둥글게 변하는 것을 확인할 수 있습니다.
'Programming > HTML&CSS' 카테고리의 다른 글
| [HTML5/CSS3] CSS 속성 #3 - box-sizing 이해 (0) | 2019.04.02 |
|---|---|
| [HTML5/CSS3] CSS 속성 강좌 #2 - margin과 padding의 차이 (0) | 2019.03.31 |
| [HTML5/CSS3] CSS 속성 강좌 #1 - display/opacity/visibility (0) | 2019.03.29 |
| [HTML5/CSS3] CSS 선택자 #4 - 반응/상태/구조 선택자 (0) | 2019.03.28 |
| [HTML5/CSS3] CSS 선택자 #3 - 하위 선택자 / 자식 선택자 / 등위 선택자 (0) | 2019.03.27 |