|
스타일 시트 CSS border-radius 속성, 테두리, 모서리를 둥글게 표시하기 |
|
환경: Eclipse Mars, CSS3 |
border-radius 속성은 태그의 모서리를 둥글게 만들고 싶을 때 적용합니다. 많이 사용하는 속성 중 하나입니다. 각이 진 사각형을 좀더 부드럽게 만드는 효과를 가지고 있어서 디자인 할 때 많이 사용합니다. border-radius 는 IE8 이하에서는 지원하지 않습니다. 요즘 IE8 이하를 사용하는 사람은 없으니까 걱정하지 않아도 될 것 같네요.
▼ 테두리를 둥글게 해 주는 radius 속성은 2가지 형태로 표현이 가능합니다. 띄워 쓰기를 통해 4개 모서리 값을 한번에 넣어 주거나 각 모서리 별로 지정할 수 있는 속성에 값을 넣는 것입니다. 모서리 적용 순서는 top left 에서 시계 방향으로 돌아갑니다.
¤ border-top-left-radius : 상자의 왼쪽 위 모서리를 정의합니다.
¤ border-top-right-radius : 상자의 오른쪽 위 모서리를 정의합니다.
¤ border-bottom-right-radius : 상자의 오른쪽 아래 모서리를 정의합니다.
¤ border-bottom-left-radius : 상자의 왼쪽 아래 모서리를 정의합니다.
|
<style type="text/css"> 선택자 { border-radius: [top-left 값] [top-right 값] [bottom-right 값] [bottom-left 값] ; } 선택자 { border-top-left-radius : 값; border-top-right-radius : 값; border-bottom-right-radius : 값; border-bottom-left-radius : 값; } </style> |
▼ 샘플에서 2가지 형태를 같이 표현해 보았습니다. 첫 번째는 개별 속성으로 적용한 것이 아니라 한 번에 4개 모서리를 지정한 형태입니다. 값은 top left 에서 시계 방향으로 적용됩니다. 두 번째 예제는 속성을 분리해서 적용했습니다. 바로 위에 적용한 radius 와 동일한 모양입니다.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="euc-kr">
<title>정렬</title>
<style type="text/css">
body {
background-color: #e7e7e7;
}
#radius1{
background-color: #cc5b88;
width: 300px; height: 100px;
margin: 10px; border: solid;
border-radius: 7px 10px 7px 20px ;
}
#radius2{
background-color: #4e539a;
width: 300px; height: 100px;
margin: 10px; border: solid;
border-top-left-radius : 7px;
border-top-right-radius : 10px;
border-bottom-right-radius : 7px;
border-bottom-left-radius : 20px;
}
</style>
</head>
<body>
<div id="radius1">
border-radius: 7px 10px 7px 20px;
</div>
<div id="radius2">
border-top-left-radius : 7px;<br/>
border-top-right-radius : 10px;<br/>
border-bottom-right-radius : 7px;<br/>
border-bottom-left-radius : 20px;<br/>
</div>
</body>
</html>
▼ 만약 border-radius: 7px 7px 7px 7px; 와 같이 모두 동일하다면 값을 다 적을 필요가 없습니다. 간략하게 border-radius: 7px; 로 표시해 주시면 됩니다.
|
#radius1 을 풀어 쓰면 #radius2 와 같습니다.
#radius1 { border-radius: 7px; }
#radius2 { border-top-left-radius : 7px; border-top-right-radius : 7px; border-bottom-right-radius : 7px; border-bottom-left-radius : 7px; } |
'웹 프로그래밍 > 스타일시트 CSS' 카테고리의 다른 글
| 인터넷 사이트를 통해 CSS 소스코드 한번에 정렬하는 방법 (2) | 2018.11.21 |
|---|---|
| 스타일 시트 CSS 모서리 기능 이용해서 버튼 만들기 (0) | 2018.10.21 |
| 스타일 시트 CSS box-shadow 속성, 그림자 추가하는 방법 (0) | 2018.10.10 |
| 스타일 시트 CSS border-radius 속성, 테두리, 모서리를 타원으로 표시하기 (0) | 2018.09.17 |
| 스타일 시트 CSS display 속성, 태그의 inline 과 block 속성 바꾸기 (0) | 2018.08.09 |
| 스타일 시트 CSS 마우스 모양을 바꾸는 cursor 속성 알아보기 (1) | 2018.07.27 |
| 스타일 시트 CSS 적용 우선 순위 알아 보기 (1) | 2018.07.20 |
| 스타일 시트 CSS z-index 태그 요소 보이는 순서를 결정 (0) | 2018.07.06 |
