border-radius를 사용하면 박스의 테두리를 둥글게 만들 수 있습니다. 다음과 같이 태그를 만들어 봅시다. 오른쪽은 HTML파일이고 왼쪽은 CSS 파일 입니다. CSS 파일은 styles 폴더안에 style.css로 저장합니다.그리고 HTML파일에서 링크를 걸어줍니다. HTML파일에서는 상자의 클래스를 class="box"로 적어줍니다.
|
.box { width:200px; height:200px; background-color: rgb(226, 43, 104); border-radius: 20px; }
.box2 { margin-top: 20px; width:200px; height:200px; background-color: rgb(177, 226, 43); border-radius: 0 20px 0 20px; }
.box3 { margin-top: 20px; width:200px; height:200px; background-color: rgb(187, 128, 18); border-radius: 20px 0 60px 0; }
.box4 { margin-top: 20px; width:200px; height:200px; background-color: rgb(35, 138, 207); border-radius: 50%; } |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">
<title>css 배우기</title> <link rel="stylesheet" href="styles/style.css"> </head> <body> <div class="box">This is a box</div> <div class="box2">This is a box</div> <div class="box3">This is a box</div> <div class="box4">This is a box</div> </body> </html> |
아래 처럼 각 상자의 클래스를 부르고 대괄호안에 태그를 적어줍니다.
가로 크기(width), 세로 크기(height), 외부 여백(margin-top), 배경 색깔(background-color), 테두리 둥글게(border-radius) 설정합니다. border-radius 설정시 % 또는 픽셀로 지정할 수 있습니다.
예를 들어 아래와 같이 서로 다른 모양의 상자들이 생성되었습니다. 여기서 네번때 원은 border-radius 를 50%로 설정했기 때문입니다.
그리고, 사각형은 border-radius: 0 0 0 0; 인 경우이며 각각
border-radius: 0(top) 0(right) 0(bottom) 0(left); 를 의미합니다.
이미지를 부른 후 위와 같은 효과를 주면 예쁘게 적용할 수 있습니다. 아래와 같이 태그를 작성해서 실행해 봅시다.
'디지털노마드 > HTML과 CSS 강좌' 카테고리의 다른 글
| CSS - 텍스트 꾸미기와 정렬하기 (0) | 2020.07.21 |
|---|---|
| CSS Syntax - CSS 쓰는 방법 (0) | 2020.07.17 |
| CSS로 전체 배경색 바꾸기 (0) | 2020.07.15 |
| CSS 배우기 - CSS 기본설정하기 (0) | 2020.07.14 |
| HTML 과 CSS 배우기 - 1일차 (0) | 2020.07.14 |
