css border-radius 속성으로 각각의 테두리에 둥근 모서리 적용시키기
네 안녕하세요, 이번 포스팅에서는 각각의 테두리에 둥근 모서리를 적용시키는 방법에 대하여 알아보겠습니다.
이전 포스팅에서 쓴 모든 모서리를 둥글게 만드는 방벙에 이어서 작성하는 포스팅입니다.
모든 모서리를 둥글게 만드는 방법이 궁금하신 분들은 아래 포스트를 기재해 둘 테니,
그곳을 방문해 주시면 감사하겠습니다.
2023.03.19 - [html, css, 자바스크립트] - css border-radius 속성으로 모든 모서리 둥글게 만들기
css border-radius 속성으로 모든 모서리 둥글게 만들기
css border-radius 속성으로 모든 모서리 둥글게 만들기 네 안녕하세요, 이번 포스팅에서는 css에서 쓰는 고급 테두리 꾸미기 기능 중에서 테두리를 둥글게 만드는 방법에 대하여 알아보도록 하겠습
funnycoderl.tistory.com
1. 각각의 테두리에 둥근 모서리 적용시키기
각각의 테두리를 개별적으로 적용시키는 방법은 다소 까다로울 수 있습니다.
우선 테두리가 적용이 되는 순서를 알아야 합니다.
테두리 적용의 우선순위는 이러합니다.
- 좌상단(border-top-left)
- 우상단(border-top-right)
- 우하단(border-bottom-right)
- 좌하단(border-bottom-left)
이 순서대로 진행이 됩니다.
그리고 하단의 테두리는 각각 다르게 적용을 하면 그에 대한 값이 적용이 되지만,
그 값을 적용하지 않았을 경우에는 상단에 지정한 값의 영향을 받습니다.
그리고 그 영향을 받는 관계는 선대칭 관계가 아닌 점대칭 관계로 지정되기로 약속이 되어있습니다.
예를 들어 이렇습니다.
- 좌상단만 값을 주었을 경우 : 좌상단, 우하단만 값 적용
- 우상단만 값을 주었을 경우, 우상단, 좌하단만 값 적용
이러한 관계가 형성이 되어있습니다.
그리고 적용 값이 3개일 경우는 css가 적용되는 우선순위에 따라서
좌상던, 우상단, 우하단 순으로 지정이 됩니다.
만약에 이 값이 적용되는 가장 마지막 부위를 좌하단으로 적용하고 싶으시다면,
제일 먼저 값이 지정되는 좌상단 값에 '0px'를 집어넣으시면 됩니다.
그러면 원하는 대로 값이 지정이 됩니다.
그럼 이에 대한 간단한 예제를 한 번 보여드리도록 하겠습니다.
<!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>
<style>
p {
background : #90D000;
padding : 20px;
width : 300px;
}
#round1 { border-radius : 50px; }
#round2 { border-radius : 0px 20px 40px 60px; }
#round3 { border-radius : 0px 20px 40px; }
#round4 { border-radius : 0px 20px; }
#round5 { border-radius : 50px;
border-style : dotted; }
</style>
</head>
<body>
<h3>둥근 모서리 테두리</h3>
<hr>
<p id="round1">반지름 50픽셀의 둥근 모서리</p>
<p id="round2">반지름 0, 20, 40, 60 둥근 모서리</p>
<p id="round3">반지름 0, 20, 40, 20 둥근 모서리</p>
<p id="round4">반지름 0, 20, 0, 20 둥근 모서리</p>
<p id="round5">반지름 50의 둥근 점선 모서리</p>
</body>
</html>이렇게 각각의 태그에 서로 다른 모서리 스타일을 지정을 해봤습니다.
각각에 대하여 설명을 드리자면,
첫 번째는 사면 모두 둥근 박스이고,
두 번째는 각각의 부분에 다 다른 값을 적용한 박스이고,
세 번째는 좌하단 값을 적지 않아서 우상단 값이 상속되어 같은 값을 띄고 있는 것을 보여주는 박스이고,
네 번째는 좌상단의 값은 0px, 우상단의 값은 20px이므로
각각 우하단, 좌하단이 0px, 20px의 값을 상속받아 적용이 된 박스이고,
다섯 번째는 둥글게 굴린 모서리에도 다양한 테두리 효과를 입힐 수 있음을 보여주려고 만든 것입니다.
그럼 결과 화면도 같이 보시죠.
이렇게 결과가 잘 적용이 된 것을 보실 수가 있습니다.
요런 식으로 모서리를 다양한 모습으로 둥글려서 만드실 수도 있습니다.
여기까지 css로 둥근 모서리를 만드는 방법을 알아보았습니다.
다음 포스팅에서는 css를 이용하여 이미지 테두리를 만드는 방법에 대하여 알아보도록 하겠습니다.
긴 글 읽어주신 독자분들께 진심으로 감사드립니다 ~
'html, css, 자바스크립트 > css' 카테고리의 다른 글
| css 배경 제어 프로퍼티로 배경 제어하기 (0) | 2023.04.02 |
|---|---|
| css border-image 프로퍼티로 이미지 테두리 만들기 (0) | 2023.04.02 |
| css border-radius 속성으로 모든 모서리 둥글게 만들기 (0) | 2023.03.19 |
| css border 속성으로 테두리 한 번에 꾸미기 (0) | 2023.03.19 |
| css border 속성 이용하여 테두리 꾸미기 (0) | 2023.03.18 |
댓글