고정 헤더 영역
상세 컨텐츠
본문
출처 : 따라하면서 배우는 HTML5+CSS3+jQuery+JavaScript 실무활용 14가지, 위키북스
더보기
> 이전 글
| 속성 | 기능 |
| border-radius | 비너의 모서리 둥글게 할 때 사용 속성 값이 클수록 모서리가 둥그러짐 |
| box-shadow | 배너에 그림자 속성 추가할 때 사용 그림자의 색상, 명암 등 지정 가능 |
| transform | 배너에 회전, 변형, 전환 등의 효과 줄 때 사용 |
| transform-origin | transform 되는 기준을 변경할 때 사용 기본값은 50% 50%로, 이미지의 중앙이 기준이다. |
| background: -weblit-gradient | 배너에 그라디언트 효과를 입히거나 광택 효과 줄 때 사용 |
| :before | 가상 선택자. 배너에서 지정한 요소의 앞부분 선택 |
| :after | 가상 선택자. 배너에서 지정한 요소의 뒷부분 선택 |
border-radius
아래의 그림과 같이 네 개의 모서리 중 한 군데만 둥글게 만들거나, 모서리마다 다른 값을 줄 때는 필요한 모서리 이름에 속성 값 적용.
적용하기
방법1. 모든 모서리에 동일한 값 주기
<!document html>
<html>
<head>
<meta charset="UTF-8">
<title>border-radius</title>
<style>
.box01{
width:140px;
height:140px;
background-color:rgb(48, 48, 48);
border-radius: 20px;
}
</style>
</head>
<body>
<div class="box01"></div>
</body>
</html>
방법2. 각 모서리에 다른 값 주기
속성이 입혀지는 순서는 왼쪽 위부터 시작해서 시계방향이다.
<!document html>
<html>
<head>
<meta charset="UTF-8">
<title>border-radius</title>
<style>
.box01{
width:140px;
height:140px;
background-color:rgb(48, 48, 48);
border-radius: 0px 15px 50px 100px;
}
</style>
</head>
<body>
<div class="box01"></div>
</body>
</html>
방법3. 일부 모서리만 속성 적용하기
<!document html>
<html>
<head>
<meta charset="UTF-8">
<title>border-radius</title>
<style>
.box1 {
width:140px;
height:140px;
background-color:rgb(48, 48, 48);
border-top-left-radius: 15px;
}
</style>
</head>
<body>
<div class="box01"></div>
</body>
</html>
'CSS' 카테고리의 다른 글
| ul li 사용한 메뉴 바 만들기 (0) | 2023.03.08 |
|---|---|
| transform 2D 속성 (0) | 2023.03.05 |
| [CSS3] 그림자 배너 만들기 :: box-shadow 속성 (0) | 2023.03.05 |
| [CSS3]그림자 있는 배너 :: 도형 모서리 테두리 둥글게 만들기(실습) (0) | 2023.03.05 |
| [CSS3]그림자 있는 배너 용어 정의 및 정리 (0) | 2023.03.05 |
댓글 영역