728x90
CSS 모서리 둥글게 변경하기 border-radius 원 (동그라미) 만들기
1. HTML에 style 속성 직접 입력을 통한 변경 방식
기본 형태
//Html 태그 내 style 속성을 이용한 직접 입력 방식
<태그명 style="border-radius:둥글기 원하는 퍼센트%"></태그명>샘플 예제
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>CSS 모서리 변경하기 샘플</title>
</head>
<body>
<div class="box" style="background:red;margin : 20px;width: 200px;height: 200px;border-radius : 5%;"></div>
<div class="box2" style="background:blue;margin : 20px;width: 200px;height: 200px;border-radius : 50%;"><div>
</body>
</html>출력 결과
2. CSS 파일 변경을 통한 모서리 모양 변경
기본 형태
//CSS 파일 변경을 통한 모서리 모양 변경
CSS Selector {
border-radius : 둥글기%;
}
샘플 예제 : HTML, CSS
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>CSS 모서리 변경하기 샘플</title>
<!--CSS 파일경로-->
<link href="/CSS파일경로">
</head>
<body>
<div class="box"></div>
<div class="box2"><div>
</body>
</html>.box {
background:red;
margin : 20px;
width: 200px;
height: 200px;
border-radius : 5%;
}
.box2 {
background : blue;
margin : 20px;
width: 200px;
height: 200px;
border-radius : 50%;
}
출력 결과
728x90
'프론트엔드 > CSS' 카테고리의 다른 글
| [CSS] 폰트 크기 설정 font-size (0) | 2021.04.11 |
|---|---|
| [CSS] border 테두리 속성 설정하기 (0) | 2021.04.06 |
| [CSS] 배경 색상 변경하기 background color (4) | 2021.04.03 |
| [CSS] 폰트 (문자) 색상 설정 하기 font color set (0) | 2021.04.02 |
| [CSS] 엘리먼트 투명도 조절 opacity (0) | 2021.03.20 |
댓글