border는 CSS에서 테두리를 만들어줍니다!
1. HTML 코딩
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="title">
for it study!
</div>
<div class = border1>
<p>
border로 테두리 만들기~
</p>
</div>
<div class = border2>
<p>
border로 테두리 만들기~
</p>
</div>
<div class = border3>
<p>
border로 테두리 만들기~
</p>
</div>
<div class = border4>
<p>
border로 테두리 만들기~
</p>
</div>
<div class = border5>
<p>
border로 테두리 만들기~
</p>
</div>
</body>
</html>
2. CSS 코딩
div {
margin: 10px;
text-align: center;
}
.title {
font-weight: bold;
font-size: 30px;
}
.border1{
border: 4px solid #f44336;
}
.border2{
border: 4px dotted #009688;
}
.border3{
border: 4px dashed #0000FF;
}
.border4{
border: 4px double #006400;
}
.border5{
border: 4px groove #FF8200;
}
사용법:
. border1 {
border: 굵기 테두리종류 테두리 색상;
}
위와 같은 형태로 css를 작성해주면 테두리가 만들어집니다.
결과 화면
border과 함께 border_radius를 사용하면 테두리를 둥글게 만들 수도 있습니다.
3. CSS border-radius 추가
div {
margin: 10px;
text-align: center;
}
.title {
font-weight: bold;
font-size: 30px;
}
.border1{
border: 4px solid #f44336;
border-radius: 20px;
}
.border2{
border: 4px dotted #009688;
border-radius: 20px;
}
.border3{
border: 4px dashed #0000FF;
border-radius: 20px;
}
.border4{
border: 4px double #006400;
border-radius: 20px;
}
.border5{
border: 4px groove #FF8200;
border-radius: 20px;
}
사용법: border-radius : 굴곡 크기;
결과 화면
3. 테두리 종류 모음
| solid | 실선 |
| dotted | 짧은 점선 |
| dashed | 긴 점선 |
| double | 두줄 실선 |
| outset | 안쪽 어둡게 |
| inset | outset 반대 |
| groove | 파인선 |
| ridge | 불룩한 선 |
1) solid
2) dotted
3) dashed
4) double
5) outset
6) inset
7) groove
8) ridge
'프로그래밍 > HTML, CSS, JavaScript' 카테고리의 다른 글
| [JavaScript] 프로그래머스 level1 모의고사 풀이 (0) | 2021.03.30 |
|---|---|
| 프로그래머스 Level1 두수의 합 구하기(JavaScript) (0) | 2021.03.24 |
| HTML, CSS 수평배치와 줄넘김하는 방법, flex와 flax-wrap 사용법 (0) | 2021.03.06 |
| 스파르타 코딩클럽 웹 종합반 온라인 강의 회고 및 후기! (0) | 2020.10.16 |
| 부트스트랩 사용법, CSS 디자인 가져오기 (0) | 2020.09.22 |