![[2021/12/27]국비지원 CSS3 8-(3) border-radius](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FdmrEpr%2Fbtrr3nbiiBX%2FFjDmqhinVLcYYasfcorCzK%2Fimg.png)
- border-radius
- 과제2 : 태극문양, 달
- border-radius : border의 모서리 곡률 property
- 모서리 방향 : top-left, top-right, bottom-left, bottom-right
- 원 size : box 사이즈의 1/2
- ex ) border-radius : 100px 0 0 0 = border-top-left-radius : 100px
- 윗 반원 : width: 200px; height : 100px ; border-radius : 100px 100px 0 0
- 1/4 원 : width : 100px; height : 100px ; border-top-left-radius : 100px
- box 출력 후 곡률 줄 모서리 방향
1. border-radius
작업내용
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>border-radius</title>
<style type="text/css">
body{text-align: center;color: #fff;}
h1{background-color: green;width:500px;height:100px;border: 10px double yellow;
line-height: 100px;border-top-left-radius: 25px;border-bottom-right-radius: 25px;}
/* top-left top-right bottom-left bottom-right */
li{list-style: none; width:200px;height: 200px;margin: 20px;
background-color: #000;color: #fff;font-weight: bold;}
.c1{border-radius: 100px;background-color: #f00;}
.c2{border-radius: 100px;background-color: #00f;}
/* 원 : width,height 값의 1/2로 지정 */
.c3{height:100px;background-color:#f00;border-radius:100px 100px 0 0}
.c4{height:100px;background-color:#00f;border-radius:0 0 100px 100px;}
/* border-radius 100px 0 0 0 = border-top-left-radius:100px*/
.c5{width:100px;height:100px;background-color:#f00;border-top-left-radius:100px;}
.c6{width:100px;height:100px;background-color:#00f;border-bottom-right-radius:100px;}
</style>
</head>
<body>
<h1>css3 : border-radius</h1>
<ul>
<li class="c1">원 그리기</li>
<li class="c2">원 그리기</li>
<li class="c3">반원 그리기</li>
<li class="c4">반원 그리기</li>
<li class="c5">1/4원 그리기</li>
<li class="c6">1/4원 그리기</li>
</ul>
</body>
</html>
결과물
2. 과제2 : 태극문양, 달
- 출력에서 제거한 것 : list-style, text
- 원의 위치 조절 > position : relative, position : absolute
작업 내용
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>태극기_달</title>
<style type="text/css">
ul{list-style:none;}
li{width:200px;height:200px;text-indent: -9999px;overflow: hidden;}
.korean{position:relative;}
.c1{height: 100px;border-radius: 100px 100px 0 0;background-color: #f00;}
.c2{height: 100px;border-radius: 0 0 100px 100px;background-color: #00f;}
.c3{width:100px;height:100px;border-radius: 50px;background-color: #f00;position:absolute;top:50px;}
.c4{width:100px;height:100px;border-radius: 50px;background-color: #00f;position:absolute;left:140px;top:50px;}
.moon{width:400px;height:300px;background-color: #000;position: relative;}
.moon1{border-radius: 100px;background-color: beige;position:absolute;top:50px;}
.moon2{border-radius: 100px;background-color:#000;position:absolute;left:80px;top:50px;}
</style>
</head>
<body>
<ul class="korean">
<li class="c1">태극기</li>
<li class="c2">태극기</li>
<li class="c3">태극기</li>
<li class="c4">태극기</li>
</ul>
<ul class="moon">
<li class="moon1">달</li>
<li class="moon2">그림자</li>
</ul>
</body>
</html>
결과물
