css border 속성 이용하여 테두리 꾸미기
네 안녕하세요, 이번 포스팅에서는 테두리를 꾸미는 방법에 대하여 알아보도록 하겠습니다.
박스를 꾸밀 때는 특히 박스의 내부보다는 테두리를 주로 꾸미는 경우가 많습니다.
박스의 내부를 다채롭게 채우는 것 보다 테두리를 꾸미는 것이 오히려 더 깔끔하고 예뻐 보이기 때문입니다.
그래서 이번 시간에는 테두리를 어떻게 꾸밀 수 있는 지 한 번 알아보도록 하겠습니다.
그럼 지금부터 시작하도록 하겠습니다.
1. 테두리의 두께, 모양, 색 꾸미기 : border-width, border-style, border-color 이용
테두리는 패딩과는 다르게 박스의 경계부를 지칭하기 때문에 색과 스타일을 지정할 수 있습니다.
그 쓰임은 이렇습니다.
아래에 보여드리는 예시는 기본적으로 쓰는 박스 테두리 꾸미기 예시 코드입니다.
p {
border-width : 3px; // 테두리 두께 3픽셀
border-style : dotted; // 테두리 스타일 점선
border-color : blue; // 테두리 색깔 blue
}한 가지 예시로 p 태그의 테두리애 css 스타일을 입힌다고 한다면,
이런 식으로 쓸 수가 있습니다.
그리고 border-style 프로퍼티는 지금 보여드린 dotted 속성 외에도 정말 많습니다.
속성은 이 정도를 주로 씁니다.
none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset보통은 이 정도를 많이 쓰곤 합니다.
그러면 이 테두리들을 직접 적용을 시키면 어떻게 나올까요?
제가 간단한 예제를 한 번 준비를 해봤습니다.
<!DOCTYPE html>
<html lang="ko">
<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>다양한 테두리</title>
</head>
<body>
<h3>다양한 테두리</h3>
<hr>
<p style="border: 3px solid blue">3픽셀 soild</p>
<p style="border: 3px none blue">3픽셀 none</p>
<p style="border: 3px hidden blue">3픽셀 hidden</p>
<p style="border: 3px dotted blue">3픽셀 dotted</p>
<p style="border: 3px dashed blue">3픽셀 dashed</p>
<p style="border: 3px double blue">3픽셀 double</p>
<p style="border: 15px groove yellow">15픽셀 groove</p>
<p style="border: 15px ridge yellow">15픽셀 ridge</p>
<p style="border: 15px inset yellow">15픽셀 inset</p>
<p style="border: 15px outset yellow">15픽셀 outset</p>
</body>
</html>각각의 태그에 직접 테두리 속성을 지정하여 나타낸 코드입니다.
그럼 결과 화면도 같이 보시죠.
이렇게 각각의 태그에 테두리 꾸미기를 적용을 해봤는데,
정말 다양한 테두리들이 있는 것을 확인할 수 있습니다.
여기에서 여러분들이 원하는 테두리를 선택하여 꾸밀 수 있습니다.
여기까지 테두리를 꾸미는 방법에 대하여 알아보았습니다.
다음 포스팅에서는 테두리를 꾸밀 때 쓰는 단축 프로퍼티에 대하여 알아보도록 하겠습니다.
긴 글 읽어주신 독자분들께 진심으로 감사드립니다~
'html, css, 자바스크립트 > css' 카테고리의 다른 글
| css border-radius 속성으로 모든 모서리 둥글게 만들기 (0) | 2023.03.19 |
|---|---|
| css border 속성으로 테두리 한 번에 꾸미기 (0) | 2023.03.19 |
| css 박스에 색 입히기 (0) | 2023.03.18 |
| css 박스 프로퍼티로 박스 제어하기 (0) | 2023.03.18 |
| css 박스 모델의 구성 알아보기(콘텐츠, 패딩(padding), 테두리(border), 여백(margin) (0) | 2023.03.18 |
댓글