📢 도형 만들기
📌 직사각형 만들기
정사각형 모양의 박스는 쉽게 만들 수 있다.
직사각형을 만들고 싶다면 가로와 세로 길이를 조정하면 된다.
css
div1 {
width: 50px
height: 50px
}
div2 {
width: 50px
height: 20px
}👉 div1은 정사각형, div2는 직사각형
📌 원 만들기
css
div {
width: 100px;
height: 100px;
background-color: blue;
border-radius: 50%;
}👇 출력 결과
정사각형을 만드는 코드에서 border-radius: 50%;가 추가되었다.
border-radius는 모서리를 둥글게 만들어주는 역할을 한다.
만약, 정사각형의 꼭지점만 둥글게 하고 싶다면 border-radius를 10% 정도로 조절하면 된다.
각 꼭지점에 다른 값을 부여하고 싶다면 border-radius: 10px 20px 30px 40px;과 같이 위-오른쪽-아래-왼쪽 순으로 지정하면 된다!
📌 속이 비어있는 도형(=테두리 만들기)
border를 이용하면 테두리를 만들 수 있다.
css
.border {
border-width: 10px;
border-color: black;
border-style: solid;
width: 100px;
height: 100px;
}👇 출력 결과
.border {
border: 10px solid black;
width: 100px;
height: 100px;
}위의 코드와 같이 border-width, border-style, border-color를 한줄로 나타낼 수도 있다.
border의 세세한 속성들
border-width: 선 굵기border-style: 선 모양
solid : 실선
dotted : 점선
dashed : 대쉬선
double : 이중실선border-color: 선 색깔
📌 각 변을 다르게 설정한 도형
.differ {
border-top: 10px solid blue;
border-right: 10px dotted black;
border-bottom: 10px dashed yellow;
border-left: 10px double red;
width: 100px;
height: 100px;
}👇 출력 결과
위와 같이 top, right, bottom, left를 이용해서 네 변 모두 다르게 지정해 줄 수 있다.
🌍 css 전용 도형 정리 사이트
http://css-tricks.com/the-shapes-of-css/
⭐정리⭐
- 도형 만들기
✔ border-radius
✔ border-style
✔ border-color
✔ border-width
🔥MISSION🔥
html
<!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>Document</title>
<link rel="stylesheet" href="../css/day8mission.css">
<body>
<div class="shape1"></div>
<div class="shape2"></div>
<div class="shape3"></div>
<div id="tv"></div>
</body>
</html>css
body {
background-color: black;
}
.shape1 {
border: white hidden;
border-radius: 50%;
width: 50px;
height: 50px;
background-color: white;
margin: 0px 25px;
}
.shape2 {
border: white hidden;
border-radius: 50%;
width: 100px;
height: 100px;
background-color: white;
}
.shape3 {
width: 0px;
height: 0px;
border-right: 60px solid transparent;
border-top: 60px solid red;
border-left: 60px solid red;
border-bottom: 60px solid red;
border-top-left-radius: 60px;
border-top-right-radius: 60px;
border-bottom-left-radius: 60px;
border-bottom-right-radius: 60px;
margin: 50px;
}
#tv {
position: relative;
width: 200px;
height: 150px;
margin: 20px 0;
background: red;
border-radius: 50% / 10%;
color: white;
text-align: center;
text-indent: 0.1em;
margin: 50px;
}
#tv:before {
content: '';
position: absolute;
top: 10%;
bottom: 10%;
right: -5%;
left: -5%;
background: inherit;
border-radius: 5% / 50%;
}4번째 도형인 tv의 경우 처음보는 css형태가 있었다.
#tv:before가 뜻하는 기능은 무엇일까?
id 속성의 용도를 확실하게 몰라서 class로 바꾸고 사용해보았는데, 적용이 되지않았다. 또한 처음보는 css 속성들이 많았기 때문에 추후에 복습을 통해서 더 알아 볼 것이다!
I want be a developer🙂