반응형
1. SVG 이용해서 <rect> 사각형 태그 그리기
<svg height="210" width="500">
<rect x="150" y="100" width="300" height="100" style="fill:#dddddd;stroke:purple;stroke-width:3" />
</svg>
x 와 y 는 사각형의 왼쪽 위쪽 위치를 정의 ( X축 150픽셀에서 사각형 만들어라./ Y축 100픽셀에서 사각형 만들어라.)
width: 가로 픽셀 넓이
height: 세로 픽셀 길이
2. SVG 이용해서 <rect> 모서리 둥근 사각형 태그 그리기
<svg height="210" width="500">
<rect x="150" y="100" rx="20" ry="20" width="300" height="100" style="fill:#dddddd;stroke:purple;stroke-width:3" /> </svg>
rx와 ry는 사각형 모서리의 둥글기를 정의합니다.
반응형
'프론트엔드 > CSS' 카테고리의 다른 글
| [CSS] 태그 <ul>에 사용되는 꿀팁 CSS 종류들 (0) | 2020.09.14 |
|---|---|
| [CSS] CSS3 셀럭터 selector 마스터하기 (0) | 2020.04.12 |
| [CSS] SVG 태그 <circle> <ellipese> 태그 / 원형태그 / 원형만들기 / 타원 (0) | 2020.01.03 |
| [CSS] flex 관련 속성 정리 flex-direction / flex-wrap / flex-flow (0) | 2019.12.23 |
| [CSS3] display:flex / flexible 레이아웃 / HTML 요소 가운데 정렬하는 방법 7가지 (0) | 2019.12.23 |