클리엘
CLIEL LAB
클리엘
전체 방문자
117,110
오늘
341
어제
116
  • 분류 전체보기 (396)
    • Mobile (47)
      • Kotlin (47)
    • Web (84)
      • NestJS (9)
      • HTML5 & CSS3 (38)
      • Javascript (20)
      • TypeScript (6)
      • JQuery (11)
    • .NET (187)
      • C# (24)
      • ASP.NET Core (31)
      • Windows API for .NET (128)
    • Server (50)
      • SQL Server (8)
      • MariaDB (18)
      • Windows Server (5)
      • node.js (19)
    • System (12)
      • 작업LOG (12)
    • Review (11)
    • ETC (5)

블로그 메뉴

  • 홈
  • 태그
  • 방명록

공지사항

  • 블로그 정리

인기 글

  • [C#] Thread(스레드)와 Task(태⋯
    2021.10.24
    [C#] Thread(스레드)와 Task(태⋯
  • [C#] TCP/IP 통신
    2021.10.28
    [C#] TCP/IP 통신
  • [ASP.NET Core] IIS 배포 (게시)
    2021.12.15
    [ASP.NET Core] IIS 배포 (게시)
  • [MSSQL] MS SQL Server 다운로⋯
    2022.02.23
    [MSSQL] MS SQL Server 다운로⋯
  • [C#] 인터페이스와 추상클래스
    2021.10.07
    [C#] 인터페이스와 추상클래스

태그

  • class
  • TypeScript
  • NestJS
  • CSS3
  • android studio
  • Cookie
  • 변수
  • apache nifi
  • c#
  • node.js
  • android
  • jQuery
  • asp.net core
  • asp.net core web api
  • Windows API
  • HTML5
  • Kotlin
  • CentOS
  • MariaDB
  • JavaScript

최근 댓글

  • 흠... CACLS는 더이상 사용하지⋯
    클리엘
  • 안녕하세요! 아래 명령 하고부⋯
    방문자
  • 죄송합니다. 관련글을 작성한지⋯
    클리엘
  • 네 맞습니다. 본문에서는 표기⋯
    클리엘
  • 6000 ms 는 6초아닌가요?
    react

최근 글

  • [TypeScript] Visual Studio에⋯
    2022.05.06
    [TypeScript] Visual Studio에⋯
  • [C#] 함수(메서드)의 실행과 디⋯
    2022.05.06
    [C#] 함수(메서드)의 실행과 디⋯
  • [C#] 흐름제어, 형변환, 예외처리
    2022.04.27
    [C#] 흐름제어, 형변환, 예외처리
  • [C#] C# 개요
    2022.04.20
    [C#] C# 개요
  • C#과 .NET6 시작하기
    2022.04.13
    C#과 .NET6 시작하기

티스토리

hELLO · Designed By 정상우.
클리엘

CLIEL LAB

[HTML5&CSS3] SVG
Web/HTML5 & CSS3

[HTML5&CSS3] SVG

2020. 2. 27. 11:41
728x90

SVG(Scalable Vector Graphics)는 벡터 그래픽을 표현하는 데 사용되는 태그입니다.

 

우선 SVG를 사용해 그래픽을 표현하려면 SVG태그를 통해 그래픽으로 표현할 영역을 잡아야 합니다.

<body>
    <svg width="500" height="500">
        
    </svg>
</body>

그런 다음 svg태그 안에서 실제 표현할 그래픽을 작성합니다.

<body>
    <svg width="500" height="500">
        <rect width="500" height="500" fill="yellow"></rect>
    </svg>
</body>

이번에는 원을 그려보도록 하겠습니다.

<body>
    <svg width="500" height="500">
        <circle cx="300" cy="150" r="100" fill="orange"></circle>
    </svg>
</body>

SVG와 일반 이미지의 차이점은 이미지는 확대하면 품질이 깨지게 되지만 SVG는 벡터 방식이라 확대해도 깨지지 않고 품질을 계속 유지한다는 이점이 있습니다.

 

안타깝게도 본인이 이해하고 있는 SVG의 수준이 낮아서 본래 SVG에 관한 글을 올릴 생각이 없었으나 간단히 소개하는 정도로만 마무리하려고 합니다.

728x90
저작자표시비영리변경금지

'Web > HTML5 & CSS3' 카테고리의 다른 글

[HTML5&CSS3] SVG  (0) 2020.02.27
[HTML5&CSS3] Less 스타일시트 - 내장 함수  (0) 2020.02.25
[HTML5&CSS3] Less 스타일시트 - 변수, 연산, 선택자  (0) 2020.01.20
[HTML5&CSS3] Less 스타일시트 - 개요  (0) 2020.01.10
[HTML5&CSS3] 규칙(@-rule)  (0) 2020.01.10
[HTML5&CSS3] 3차원 구현  (0) 2020.01.10
    'Web/HTML5 & CSS3' 카테고리의 다른 글
    • [HTML5&CSS3] Less 스타일시트 - 내장 함수
    • [HTML5&CSS3] Less 스타일시트 - 변수, 연산, 선택자
    • [HTML5&CSS3] Less 스타일시트 - 개요
    • [HTML5&CSS3] 규칙(@-rule)
    CSS3, HTML5, svg
    클리엘
    클리엘
    누구냐 넌?
    댓글쓰기
    다음 글
    [2020-02-07] CentOS-MariaDB Replication / MHA 설치및 설정
    이전 글
    [HTML5&CSS3] Less 스타일시트 - 내장 함수
    • 이전
    • 1
    • ···
    • 217
    • 218
    • 219
    • 220
    • 221
    • 222
    • 223
    • 224
    • 225
    • ···
    • 396
    • 다음

    티스토리툴바