css
border-radius 는 요소의 모서리, 테두리 부분을 둥글게 만들 때 사용되는 CSS 속성입니다.
border-radius 의 값은 해당 모서리의 둥글기를 나타냅니다.
border-radius 속성은 1개, 2개, 3개, 4개의 값을 가질 수 있습니다.
개수에 따라서 값이 적용되는 위치가 달라집니다.
각각 다른 위치에 값을 따로 지정 해 줄 수도 있습니다.
border-radius 에 1개의 값을 지정하면, 모든 모서리에 동일한 값이 적용됩니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.box {
width: 200px;
height: 150px;
background-color: skyblue;
border: 2px solid black;
/* 모든 모서리에 20px의 값을 적용 */
border-radius: 20px;
color: #fff;
text-align: center;
}
</style>
<title>border-radius 예제</title>
</head>
<body>
<div class="box">
<p>박스</p>
</div>
</body>
</html>
HTML1개의 값을 적용해 모든 모서리에 동일한 20px 의 값을 주었습니다.
border-radius 에 2개의 값을 지정하면
첫 번째 값은 왼쪽 위와 오른쪽 아래의 모서리,
두 번째 값은 오른쪽 위와 왼쪽 아래의 모서리에 적용됩니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.box {
width: 200px;
height: 150px;
background-color: skyblue;
border: 2px solid black;
/* 왼쪽 위,오른쪽 아래 20px / 오른쪽 위,왼쪽 아래 40px */
border-radius: 20px 40px;
color: #fff;
text-align: center;
}
</style>
<title>border-radius 예제</title>
</head>
<body>
<div class="box">
<p>박스</p>
</div>
</body>
</html>
HTML첫 번째 값 20px 은 왼쪽 위와 오른쪽 아래의 모서리에 적용,
두 번째 값 40px 은 오른쪽 위와 왼쪽 아래의 모서리에 적용 됩니다.
border-radius 에 3개의 값을 지정하면 순서대로
왼쪽 위, 오른쪽 위/왼쪽 아래, 오른쪽 아래의 모서리에 적용됩니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.box {
width: 200px;
height: 150px;
background-color: skyblue;
border: 2px solid black;
/* 왼쪽 위 / 오른쪽 위+왼쪽 아래 / 오른쪽 아래의 모서리에 값을 적용 */
border-radius: 10px 50px 100px;
color: #fff;
text-align: center;
}
</style>
<title>border-radius 예제</title>
</head>
<body>
<div class="box">
<p>박스</p>
</div>
</body>
</html>
HTML왼쪽 위 10px, 오른쪽 위+왼쪽 아래 50px, 오른쪽 아래 100px 의 값을 적용
border-radius 에 4개의 값을 지정하면 순서대로
왼쪽 위 / 오른쪽 위 / 오른쪽 아래 / 왼쪽 아래의 모서리에 적용됩니다.
즉 왼쪽 위부터 시계 방향으로 적용 됩니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.box {
width: 200px;
height: 150px;
background-color: skyblue;
border: 2px solid black;
/* 왼쪽 위 부터 시계방향으로 값을 적용 */
border-radius: 10px 20px 30px 40px;
color: #fff;
text-align: center;
}
</style>
<title>border-radius 예제</title>
</head>
<body>
<div class="box">
<p>박스</p>
</div>
</body>
</html>
HTML왼쪽 위 모서리부터 시계 방향으로 10px 20px 30px 40px 을 순서대로 적용했습니다.
왼쪽 위 모서리부터 시계 방향으로 더 둥글게 적용되는 것을 확인 할 수 있습니다.
이번에는 아주 유용한 기능인 원형 만들기 입니다.
border-radius 를 50% 로 1개의 값만 주게 되면,
모서리 모두 50% 의 값이 적용되어 원형으로 나타나게 됩니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.circle {
width: 200px;
height: 200px;
background-color: yellow;
border: 2px solid black;
/* 원 모양을 만들기 위해 50% 값을 적용 */
border-radius: 50%;
text-align: center;
}
</style>
<title>border-radius 예제</title>
</head>
<body>
<div class="circle">
<p>원 모양</p>
</div>
</body>
</html>
HTMLborder-radius: 50%; 로 원이 만들어졌습니다.
CSS border-radius 속성에 대하여 알아봤습니다.
다양한 표현을 할 수 있으며 웹 개발에서 유용하게 활용 할 수 있습니다.
Enum이란? Enum은 "enumeration"의 줄임말로, 특정 값들의 집합을 정의할 수 있는 특별한 클래스입니다. 예를 들어, 요일,…
래퍼 클래스(Wrapper Class)란? 자바에서 래퍼 클래스는 기본 데이터 타입(Primitive Data Type)을 객체(Object)로 감싸는 클래스입니다. 자바의…
서론 Java에서 문자열을 다룰 때, 문자열의 변경이 빈번하게 발생하는 경우라면 StringBuilder 클래스를 사용하는 것이 매우…
String 클래스란? 자바에서 String 클래스는 가장 널리 사용되는 클래스 중 하나입니다. 문자열 시퀀스를 나타내며, 문자열을…
불변 객체란? 불변 객체(Immutable Object)는 생성된 이후 그 상태를 변경할 수 없는 객체를 의미합니다. 불변…