|
스타일 시트 CSS border-radius 속성, 테두리, 모서리를 타원으로 표시하기 |
|
환경: Chrome, CSS |
border-radius 는 둥근 모서리를 표현할 수도 있지만 타원으로도 가능합니다. 이전에 다루었던 내용은 가로와 세로의 반지름이 같은 원이었습니다. border-radius 는 기본적으로 4개의 모서리에 들어가는 값은 하나인데 이것을 두 개로 나누어서 입력하게 되면 x(가로) 와 y(세로) 가 다른 반지름 적용이 가능합니다. 이렇게 다른 값을 넣게 되면 타원이 되는 것입니다.
▼ 먼저 그림을 통해서 설명을 하도록 하겠습니다. 그림처럼 개별 속성에서 2개의 값을 띄워서 써 주면 앞에 있는 값이 가로 지름이 되는 것이고 뒤에 있는 y 값이 세로 지금이 되어서 타원이 되는 것입니다.
▼ 또 다른 형태는 아래와 같습니다. 슬래쉬(/) 를 통해서 앞의 값은 각 모서리의 x 축을 나타내는 것이고 슬래쉬 뒤의 값들은 y 축에 해당합니다.
|
border-radius: ulx urx lrx llx / uly ury lry lly; |
▼ 그럼 border-radius: 2px 1px 4px / 0.5px 3px; 처럼 각 테두리 값이 다 채워지지 않은 것들은 어떻게 해석할까요? 이것은 앞의 값으로 채웁니다. 그러니까 앞의 두 값만 있으면 나머지 뒤에 값은 동일합니다. 같은 열에 있는 값으로 채우는 것이죠. border-radius: 2px 1px 4px 1px / 0.5px 3px 0.5px 3px; 와 같은 것이죠.
|
border-radius: 2px 1px 4px / 0.5px 3px;
아래에 있는 형식과 동일합니다.
border-top-left-radius: 2px 0.5px; border-top-right-radius: 1px 3px; border-bottom-right-radius: 4px 0.5px; border-bottom-left-radius: 1px 3px; |
▼ 아래 샘플에서는 표현 형식을 달리해서 동일한 타원형 모서리 모양을 만들었습니다. border-radius : 100px / 50px; 이 아니라 0 을 넣어 줘야 border-top-left-radius : 100px 50px; 와 동일하게 되는 것입니다.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="euc-kr">
<title>정렬</title>
<style type="text/css">
body {
background-color: #e7e7e7;
}
#radius1{
width: 300px; height: 100px;
margin: 10px; border: solid;
background-color: #4e539a;
border-radius : 100px 0 0 0 / 50px 0 0 0;
}
#radius2{
width: 300px; height: 100px;
margin: 10px; border: solid;
background-color: #2a7a0a;
border-top-left-radius : 100px 50px;
}
</style>
</head>
<body>
<div id="radius1"></div>
<div id="radius2"></div>
</body>
</html>
'웹 프로그래밍 > 스타일시트 CSS' 카테고리의 다른 글
| 스타일 시트 CSS 글꼴 font 꾸밈 관련 속성 알아보기 (0) | 2019.01.06 |
|---|---|
| 인터넷 사이트를 통해 CSS 소스코드 한번에 정렬하는 방법 (2) | 2018.11.21 |
| 스타일 시트 CSS 모서리 기능 이용해서 버튼 만들기 (0) | 2018.10.21 |
| 스타일 시트 CSS box-shadow 속성, 그림자 추가하는 방법 (0) | 2018.10.10 |
| 스타일 시트 CSS border-radius 속성, 테두리, 모서리를 둥글게 표시하기 (0) | 2018.08.25 |
| 스타일 시트 CSS display 속성, 태그의 inline 과 block 속성 바꾸기 (0) | 2018.08.09 |
| 스타일 시트 CSS 마우스 모양을 바꾸는 cursor 속성 알아보기 (1) | 2018.07.27 |
| 스타일 시트 CSS 적용 우선 순위 알아 보기 (1) | 2018.07.20 |
