html/css/xml - [CSS] 테두리 및 외곽선을 둥글게 표현하기, border-radius, 라운드
이 름 : 바다아이
|
조회수 : 10269
짧은 주소 : https://www.bada-ie.com/su/?271591778056
CSS를 사용해 박스 형태의 인터페이스 테두리(외곽선)를 부드럽게 만들기 위해서 어떻게 해야할까요?
# 테두리 외곽선 둥글게 만들기, border-radius
과거에는 브라우저의 호환성을 위해 대부분 백그라운드 이미지를 활용하는 방법을 많이 사용했습니다.
하지만 최근에는 대부분의 브라우저가 둥글게 보이도록 만드는 border-radius 속성을 대부분 지원하기 때문에
어렵게 이미지 작업을 하지 않아도 css만으로 간단하게 사용 가능합니다.
참고로 테두리를 만드는 스타일인 속성 border가 없더라도 둥글게 표현되니 참고하세요. 아래는 간단한 문법, 사용 방법입니다.
border-radius: value
위의 방법으로 값을 지정할때는 얼마만큼 둥글게 표현할 것인지를 결정할 수 있습니다.
값은 아래와 같이 픽셀 또는 퍼센트를 입력하여 사용합니다.
border-radius: 2px;
border-radius: 10px;
// 픽셀(pixel) 단위의 값을 지정함
bordr-radius: 50%;
// 상대적인 수치를 사용한 방법도 가능함
위처럼 픽셀(px) 단위를 사용하기도 하지만 %를 사용하여 상대적인 수치 만큼 지정할 수도 있습니다.
! 픽셀과 퍼센트 값의 차이점은?
퍼센트를 사용한 방법의 경우 픽셀을 사용한 방법과 동일하지 않습니다.
이 둘은 차이점이 있는데 그 차이점은 % 단위 사용시 사각형의 가로 길이에 대하여도 비율만큼의 크기가 둥글게 외곽선이 표현된다는 점입니다.
일반적인 픽셀 사용시에는 둥글게 표현되는 크기가 가로와 세로 동일한 값으로 적용됩니다.
그럼 아래부터는 다양한 예제를 보면서 자세히 알아보겠습니다.
# border-radius 속성 예제소스 보기
아래는 네모난 영역에 속성을 적용하여 테두리를 둥글게 만들어 본 코드입니다. 아래를 확인하세요.
div {
width: 100px;
height: 50px;
border-radius: 20%;
}
위 코드를 실행하면 아래와 같이 나타나게됩니다.
Percent
퍼센트값을 적용하면 항상 같은 정도로 표현되지 않으며 적용대상의 width 및 height값에 따라 굴곡이 다르게 적용됩니다.
# 테두리의 원하는 모서리만 선택 적용하기
위 예제들은 모든 테두리에 동일한 둥근 스타일이 적용되었습니다. 만약 모서리마다 각각 다른 스타일을 적용하려면 어떻게할까요?
.test {
border-top-left-radius: 3px;
border-top-right-radius: 5px;
border-bottom-right-radius: 8px;
border-bottom-left-radius: 10px;
// 원하는 모서리를 선택하여 적용하는 방법
}
위 코드는 아래와 같이 나타나게됩니다.
! 한줄에 각각 테두리 적용하는 방법
위와 같이 위치값에 따른 다른 속성을 사용할 수 있지만 아래처럼 한줄에 사용하는 방법이 코드가 간결합니다.
시작지점부터 상좌, 상우, 하좌, 하우 방향입니다.
.test {
border-radius: 3px 5px 8px 10px;
}
실행하면 아래처럼 적용되어 나타납니다.
# 마치면서
여기까지 다양한 방법의 border-radius 사용예제를 알아보았습니다.
이처럼 이미지 사용없이 편리하게 테두리를 둥글게 표현해주는 속성이지만 오래된 브라우저의 경우 ..
예를들어 border-radius는 익스플로러(IE) 8 이하에서는 구현되지 않기때문에 다른 방법(역시 이미지)이 필요합니다.
Copyright ⓒ 2001.12. bada-ie.com. All rights reserved.
이 사이트는 리눅스에서 firefox 기준으로 작성되었습니다. 기타 브라우저에서는 다르게 보일 수 있습니다.
[ Ubuntu + GoLang + PostgreSQL + Mariadb ]
서버위치 : 오라클 클라우드 춘천 실행시간 : 0.05535 초 to webmaster... gogo sea. gogo sea.
살인!
html/css/xml
