CSS / border-radius / 테두리 둥글게 만드는 속성
목차
border-radius
- border-radius는 테두리를 둥글게 만드는 속성입니다.
- CSS3에서 정의되었으며, IE는 버전 9부터 지원합니다.(IE8에서 사용하는 방법)
- 8개의 속성 값을 넣어야 하지만, 값이 같다면 짧게 쓸 수 있습니다.
- 다음 상자의 테두리를 여러 가지 방식으로 둥글게 만들어보겠습니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
div {
box-sizing: border-box;
width: 200px;
height: 200px;
margin: 20px auto;
background-color: orange;
}
</style>
</head>
<body>
<div class="jb"></div>
</body>
</html>
문법 1
border-radius: top-left-x top-right-x bottom-right-x bottom-left-x / top-left-y top-right-y bottom-right-y bottom-left-y
- 속성의 값에는 px, % 등 길이 단위를 넣습니다. 그 길이만큼 둥글게 만듭니다.
- 8군데의 길이를 정해야 하는데, 각 위치는 다음과 같습니다.
예제 1
.jb {
border-radius: 20px 40px 60px 80px / 80px 60px 40px 20px;
}
위치별로 다른 크기를 넣은 예제입니다. 어느 값이 어디 위치를 가리키는지 확인할 수 있습니다.
문법 2
border-radius: aa bb / cc dd
- 대각선 방향으로 값이 같을 때 사용할 수 있습니다.
- 다음과 의미가 같습니다.
border-radius: aa bb aa bb / cc dd cc dd
예제 2
.jb {
border-radius: 40px 80px / 80px 40px;
}
문법 3
border-radius: aa / bb
- 네 곳이 모두 같을 때 사용할 수 있습니다.
- 다음과 의미가 같습니다.
border-radius: aa aa aa aa / bb bb bb bb
예제 3
.jb {
border-radius: 80px / 40px;
}
문법 4
border-radius: aa bb cc dd
- 가로 방향과 세로 방향의 값이 같다면 앞에 부분만 쓸 수 있습니다.
- 다음과 의미가 같습니다.
border-radius: aa bb cc dd / aa bb cc dd
예제 4
.jb {
border-radius: 20px 40px 60px 80px;
}
문법 5
border-radius: aa bb
- 다음과 의미가 같습니다.
border-radius: aa bb aa bb / aa bb aa bb
예제 5
.jb {
border-radius: 40px 80px;
}
문법 6
border-radius: aa
- 다음과 의미가 같습니다.
border-radius: aa aa aa aa / aa aa aa aa
예제 6
.jb {
border-radius: 50%;
}
위치별 속성
각 위치를 가리키는 속성이 따로 있습니다. 예를 들어
border-radius: 10px 20px 30px 40px / 40px 30px 20px 10px;
는 다음과 같습니다.
border-top-left-radius: 10px 40px; border-top-right-radius: 20px 30px; border-bottom-right-radius: 30px 20px; border-bottom-left-radius: 40px 10px;
값을 하나만 쓰면 가로 방향과 세로 방향의 값이 같다는 뜻입니다. 예를 들어
border-top-left-radius: 10px; border-top-right-radius: 20px; border-bottom-right-radius: 30px; border-bottom-left-radius: 40px;
는 다음과 같습니다.
border-radius: 10px 20px 30px 40px / 10px 20px 30px 40px;
CSS / text-shadow / 글자에 그림자 효과를 주는 속성
개요 text-shadow는 글자에 그림자 효과를 주는 속성이다. 기본값 : none 상속 : Yes 애니메이션 : Yes 버전 : CSS Level 3 박스에 그림자 효과를 주고 싶다면 box-shadow를 사용한다. 문법 text-shadow: offset-x offset-y blur-radius color | none | initial | inherit offset-x : 그림자의 수평 거리를 정한다. (필수) offset-y : 그림자의 수직 거리를 정한다. (필수) blur-radius : 흐림 정도를 정한다. (선택 : ...
높이가 같은 박스 만들기 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> body { box-sizing: border-box; font-family: Consolas, monospace; ...
CSS / text-decoration / 선으로 텍스트를 꾸미는 속성
개요 text-decoration은 선으로 텍스트를 꾸밀 수 있게 해주는 속성입니다. 기본값 : none 상속 : No 애니메이션 : No 버전 : CSS Level 1 문법 text-decoration: none | line-through | overline | underline | initial | inherit none : 선을 만들지 않습니다. line-through : 글자 중간에 선을 만듭니다. overline : 글자 위에 선을 만듭니다. underline : 글자 아래에 선을 만듭니다. initial : 기본값으로 ...
CSS / display 속성의 값을 inline 또는 inline-block으로 했을 때 여백 조정하는 방법
inline 또는 inline-block의 여백 display 속성값으로 inline 또는 inline-block으로 정하면 요소들이 가로로 배열됩니다. 이 때 요소와 요소 사이에 여백이 생깁니다. 예를 들어 다음과 같이 순서 없는 목록을 가로로 배열해보겠습니다.(여백을 파악하기 위해 테두리를 만들었습니다.) <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> ...
CSS / border-style / 테두리 모양 정하는 속성
개요 border-style은 테두리(border)의 모양을 정하는 속성으로, 다음 속성의 단축 속성이다. border-top-style border-right-style border-bottom-style border-left-style 문법 border-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit initial : 기본값으로 설정한다. 기본값은 none이다. inherit : 부모 요소의 속성값을 상속받는다. 속성값은 한 개에서 네 개까지 정할 수 있다. 다음은 모든 ...
테두리 만드는 속성 테두리는 border 속성으로 만듭니다. table, th, td 요소에 적용할 수 있습니다. tr 요소에는 적용되지 않습니다. 기본 모양 아무런 꾸밈을 하지 않았다면 기본 모양은 테두리가 없는 것입니다. th 요소는 보통 굵은 글씨에 가운데 정렬이 기본 모양입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> ...
order 속성으로 그리드 아이템의 순서를 변경할 수 있습니다. 시각적인 순서만 바뀔 뿐 문서 구조가 바뀌는 것은 아닙니다. order 속성의 기본값은 0입니다. 값이 같은 경우 입력된 순서대로 나옵니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> body { ...
마름모는 삼각형을 두 개 붙여서 만든다. HTML 문서에 다음과 같이 내용이 없는 요소를 하나 넣는다. <div class="rhombus"></div> 크기를 0으로 한 후, border 속성을 이용하여 삼각형을 만든다. position: relative;는 나머지 반쪽의 위치를 잡기 위해 넣은 것이다. .rhombus { width: 0px; height: 0px; border-right: 200px solid #666666; border-top: 100px solid transparent; border-bottom: ...
CSS / background-clip / 배경을 어디에 넣을지 정하는 속성
개요 HTML 요소는 박스(box)로 이루어져 있습니다. 배경 이미지나 배경색을 그 박스 중 어디에 넣을 지 정하는 속성이 background-clip입니다. 기본값 : border-box 상속 : No 애니메이션 : No 버전 : CSS Level 3 문법 background-clip: border-box | padding-box | content-box | initial | inherit; border-box : 테두리 영역과 그 안쪽 영역을 채웁니다. padding-box : 안쪽 여백 영역과 그 안쪽 영역을 채웁니다. content-box : 내용 영역과 그 안쪽 영역을 채웁니다. initial : ...
CSS / empty-cells / 표에서 빈 셀의 테두리 표시 여부를 정하는 속성
개요 empty-cells은 표(table)에서 빈 셀의 테두리를 표시할지 말지는 정하는 속성입니다. 기본값 : show 상속 : Yes 애니메이션 : No 버전 : CSS Level 2 문법 empty-cells: show | hide | initial | inherit show : 빈 셀의 테두리를 보여줍니다. hide : 빈 셀의 테두리를 숨깁니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 예제 <!doctype html> <html lang="ko"> <head> ...